2020 年每个开发人员都应该知道的 22 个 PWA 面试问题

PWA 正在兴起。可以说，渐进式 Web 应用程序是 Web 开发和设计的未来。PWA 应用的加载方式与普通网页类似，但提供离线工作、推送通知和设备硬件访问功能。请继续阅读，查看 2020-2021 年全栈开发人员最常遇到的 22 个渐进式 Web 应用程序面试问题及答案。

最初发表于FullStack.Cafe - 面向开发人员的真正技术面试问题和答案

问题 1：什么是渐进式 Web 应用程序？

主题：PWA
难度：⭐

谷歌于 2015 年末提出了渐进式 Web 应用 (PWA)的概念。它们本质上是 Web 应用程序（网站），但外观和使用体验与其他原生移动应用相似。支持渐进式 Web 应用的网站可以提供离线工作、推送通知和设备硬件访问等功能。

🔗来源： stackoverflow.com

Q2：PWA 有哪些好处？

主题：PWA
难度：⭐⭐

渐进式 Web 应用程序的优势：

1. 更小更快：渐进式 Web 应用比原生应用体积更小，甚至无需安装。这意味着它们不会浪费磁盘空间，而且加载速度非常快。
2. 响应式界面：渐进式 Web 应用 (PWA) 支持的网页能够自动适应各种屏幕尺寸。无论是智能手机、平板电脑、台式机还是笔记本电脑。
3. 无需更新：大多数移动应用需要每周定期更新。与普通网站一样，渐进式 Web 应用 (PWA) 每次与用户交互时都会加载最新更新版本，无需 App Store 或 Play Store 批准。
4. 成本效益：原生移动应用需要分别针对 Android 和 iOS 设备进行开发，开发成本非常高昂。而渐进式 Web 应用拥有相同的功能，但价格却仅为后者的一小部分。
5. SEO优势：渐进式Web应用易于搜索引擎发现，加载速度极快。与其他网站一样，它们的链接也可以共享。换句话说，这不仅能提供良好的用户体验，还能提升SEO排名。
6. 离线功能：由于服务工作者 API 的支持，PWAs 可以在离线或低互联网连接下访问。
7. 安全性： PWAs 通过 HTTPS 连接传送，并在每次交互时保护用户数据。
8. 推送通知：通过推送通知的支持，PWAs 可以轻松地与用户交互并提供真正令人惊叹的用户体验。
9. 绕过应用商店： PWA 无需 App Store 或 Google Play 商店支持。它们的更新版本可以直接从 Web 服务器加载，无需应用商店审批。而原生应用如果要进行任何更新，则需要等待数天审批。因此，PWA 存在被拒绝或封禁的风险。
10. 零安装：在浏览过程中，渐进式 Web 应用程序在手机和平​​板电脑上拥有自己的图标，就像移动应用程序一样，但无需经过繁琐而缓慢的 App Store 安装过程。

🔗来源： stackoverflow.com

Q3：什么使应用程序成为 PWA？

主题：PWA
难度：⭐⭐

Web 应用要被认定为 PWA，应该遵循一些关键原则。它应该是：

• 可发现，因此可以通过搜索引擎找到内容。
• 可安装，因此可以在设备的主屏幕上使用。
• 可链接，因此您只需发送 URL 即可共享它。*** 独立于网络**，因此它可以在离线或网络连接较差的情况下工作。
• 渐进式，因此它在旧版浏览器上仍可在基本层面上使用，但在最新浏览器上则具有全部功能。
• 可重新参与，因此只要有新内容可用，它就能发送通知。
• 响应式，因此可在任何具有屏幕和浏览器的设备上使用 - 手机、平板电脑、笔记本电脑、电视、冰箱等。
• 安全，因此您和应用程序之间的连接是安全的，可以防止任何第三方试图访问您的敏感数据。

🔗来源： developer.mozilla.org

Q4：为什么我们需要 PWA 的 Web 清单？

主题：PWA
难度：⭐⭐

Web清单文件以 JSON 格式列出了网站的所有信息。拥有此文件是网站可安装的必要条件之一。

它通常位于 Web 应用的根文件夹中。它包含一些实用信息，例如应用的标题、可用于在移动操作系统上表示应用的不同大小图标的路径（例如，作为主屏幕图标），以及用于加载或启动画面的背景颜色。浏览器需要这些信息才能在安装时以及在主屏幕上正确显示 Web 应用。

🔗来源： developer.mozilla.org

Q5：PWA 有哪些缺点？

主题：PWA
难度：⭐⭐⭐

渐进式 Web 应用程序的缺点：

1. 系统功能访问受限：
   目前，渐进式 Web 应用对原生系统功能的访问受限于原生应用。此外，并非所有浏览器都支持其全部功能，但或许在不久的将来，它将成为新的开发标准。

2. 安卓系统更多，苹果 iOS 系统更少：
   目前，大多数渐进式 Web 应用都支持安卓设备。而苹果 iOS 系统仅部分支持。

3. 无审核标准：
   渐进式 Web 应用不需要任何适用于应用商店原生应用的审核系统。这可能会加快审核速度，但会降低应用商店的推广效益。

🔗来源： stackoverflow.com

Q6：渐进式 Web 应用程序具有哪些原生应用程序所缺乏的功能？

主题：PWA
难度：⭐⭐⭐

有一些：

• 可发现性——渐进式 Web 应用的内容很容易被搜索引擎找到，但像 StackOverflow 这样以内容为中心的原生应用，即使它提供了访问权限，也不会出现在应用商店的搜索结果中，例如“PWA vs. Native”。这对于像 Reddit 这样的社区来说是个问题，因为它们无法将其众多子社区作为独立的“应用”展示给应用商店。
• 可链接性- 任何页面/屏幕都可以有直接链接，可以轻松共享
• 书签功能- 保存该链接以直接访问应用程序的视图
• 始终保持最新- 无需通过应用商店推送更新
• 通用访问- 不受应用商店有时任意政策或（非故意的）地理限制的约束
• 节省大量数据流量，这对于互联网接入成本高昂且/或速度缓慢的新兴市场至关重要。例如，电商网站 Konga通过迁移到 PWA，首次加载的数据使用量减少了 92%。
• 分发摩擦低- 如果您的渐进式 Web 应用程序已上线，则 Android（和其他移动）用户已经可以访问它。
  • 65.5% 的美国智能手机用户每月不会下载任何新应用
  • PWA 省去了前往应用商店、搜索应用、点击安装、等待下载、然后打开应用的繁琐步骤。这些步骤中的每一个都会流失 20% 的潜在用户。

🔗来源： stackoverflow.com

Q7：什么是服务工作者？

主题：PWA
难度：⭐⭐⭐

Service Worker是一种特殊类型的 JS 脚本，在用户浏览器的后台运行。它就像一个代理服务器，存在于您的应用、浏览器和网络之间。此外，Service Worker 允许应用在用户断网的情况下继续离线运行。

Service Worker 是浏​​览器和网络之间的虚拟代理。它们终于解决了前端开发者多年来一直困扰的问题——最突出的是如何正确缓存网站资源，并在用户设备离线时确保其可用。

它们与我们页面的主 JavaScript 代码在不同的线程上运行，并且无法访问 DOM 结构。这引入了一种不同于传统 Web 编程的方法——API 是非阻塞的，并且可以在不同的上下文之间发送和接收通信。您可以使用基于 Promise 的方法，将任务交给 Service Worker 处理，并在其准备就绪时接收结果。

它们可以做的远不止“仅仅”提供离线功能，还包括处理通知、在单独的线程上执行大量计算等。服务工作者非常强大，因为它们可以控制网络请求、修改它们、提供从缓存中检索的自定义响应或完全合成响应。

🔗资料来源： developers.google.com

Q8：混合移动应用程序和渐进式 Web 应用程序之间有什么区别？

主题：PWA
难度：⭐⭐⭐

混合移动应用通常是指结合使用 Web 技术与原生技术构建，并通过原生应用商店发布的应用。这类应用需要经过苹果、谷歌、微软等应用商店的审核。

渐进式 Web 应用 ( PWA ) 是一种使用 Web 技术构建的应用程序，可在浏览器中运行，并可添加到主屏幕。它们无需通过原生应用商店分发，但可以包含在原生应用商店中。微软自 2018 年起已将 PWA 纳入其 Microsoft Store，而可信 Web 活动 (Trusted Web Activities) 则使向 Google Play 商店提交 PWA 变得更加容易。

一些混合移动应用平台包括 PhoneGap（又名 Cordova）、Appcelerator Titanium 和 Ionic。创建混合应用并不需要平台，但它们很有用，因为它们已经负责在原生 API 和 JavaScript API 之间搭建桥梁。

渐进式 Web 应用程序只需在浏览器中运行，因此可以使用基本的 HTML、CSS 和 JavaScript 构建。

🔗来源： stackoverflow.com

Q9：什么是 fetch 事件？

主题：PWA
难度：⭐⭐⭐

安装服务工作线程后，当用户导航到其他页面或刷新时，服务工作线程将开始接收fetch事件。

每次获取服务工作者控制的任何资源时都会触发一个fetch事件，其中包括指定范围内的文档以及这些文档中引用的任何资源（例如，如果 index.html 发出跨源请求以嵌入图像，则该请求仍会通过其服务工作者进行。）

考虑：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

🔗资料来源： developers.google.com

Q10：要使网站可安装为 PWA，有哪些要求？

主题：PWA
难度：⭐⭐⭐

为了使网站可安装，需要做好以下准备：

• 填写了正确字段的网络清单
• 要从安全 (HTTPS) 域提供服务的网站
• 代表设备上的应用程序的图标
• 注册服务工作者，使应用程序能够离线工作（目前只有 Android 版 Chrome 才需要此功能）

🔗来源： developer.mozilla.org

Q11：什么是 IndexedDB，PWA 如何使用它？

主题：PWA
难度：⭐⭐⭐

IndexedDB 是一个大规模 NoSQL 存储系统。它允许您在用户浏览器中存储几乎任何内容。除了常见的搜索、获取和写入操作外，IndexedDB 还支持事务。

IndexedDB 是一个低级 API，用于在客户端存储大量结构化数据（包括文件/blob）。此 API 使用索引来实现对这些数据的高性能搜索。DOM 存储适合存储少量数据，但不适合存储大量结构化数据。IndexedDB 提供了一种解决方案。

在 PWA 环境中，离线存储数据的一般建议：

• 对于离线时加载应用程序所需的网络资源，请使用缓存 API（服务工作者的一部分）。
• 对于所有其他数据，请使用 IndexedDB（带有承诺包装器）。

🔗资料来源： developers.google.com

Q12：什么是CacheStorage？

主题：PWA
难度：⭐⭐⭐

CacheStorage是浏览器中用于存储和检索网络请求及响应的一种存储机制。它存储一对 Request 和 Response 对象。Request 作为键，Response 作为值。

CacheStorage不是 Service Worker API，但它使 SW 能够缓存网络响应，以便在用户断开网络时提供离线功能。

(CacheStorage 的一个实例)对象caches用于访问 CacheStorage，检索、存储和删除对象。

🔗来源： blog.bitsrc.io

Q13：解释 Service Worker 生命周期

主题：PWA
难度：⭐⭐⭐⭐

服务工作者的生命周期与您的网页完全分开。

要为您的网站安装 Service Worker，您需要注册它，注册过程在页面的 JavaScript 代码中完成。注册 Service Worker 后，浏览器会在后台启动 Service Worker 的安装步骤。

通常在安装步骤中，您需要缓存一些静态资源。如果所有文件都成功缓存，则 Service Worker 已安装。如果任何文件下载和缓存失败，则安装步骤将失败，Service Worker 将无法激活（即无法安装）。

安装后，将进行激活步骤，这是处理任何旧缓存管理的好机会。

激活步骤完成后，Service Worker 将控制其范围内的所有页面，但首次注册 Service Worker 的页面直到再次加载后才会被控制。Service Worker 获得控制权后，将处于以下两种状态之一：要么终止 Service Worker 以节省内存，要么处理从您的页面发出网络请求或消息时发生的 fetch 和 message 事件。

🔗资料来源： developers.google.com

Q14：如何更新服务工作者？

主题：PWA
难度：⭐⭐⭐⭐

您的 Service Worker 最终可能需要更新。届时，您需要遵循以下步骤：

• 更新您的 Service Worker JavaScript 文件。当用户导航到您的网站时，浏览器会尝试在后台重新下载定义 Service Worker 的脚本文件。即使 Service Worker 文件与当前文件存在哪怕一个字节的差异，浏览器也会将其视为新文件。
• 您的新服务工作者将会启动并且安装事件将会被触发。
• 此时，旧服务工作者仍在控制当前页面，因此新服务工作者将进入等待状态。
• 当您网站当前打开的页面关闭时，旧的服务工作者将被终止，新的服务工作者将接管控制权。
• 一旦您的新服务人员取得控制权，其激活事件就会被触发。

🔗资料来源： developers.google.com

Q15：您知道哪些 Service Worker 的缓存策略？

主题：PWA
难度：⭐⭐⭐⭐

这三种缓存策略与框架无关：

• 仅缓存- SW 期望在这里找到所请求的资产。
• 仅网络- 此策略与前一个策略完全相反：我们始终访问网络，甚至不查询缓存。
• 重新验证时过期- 与仅缓存策略类似，目标是通过从缓存中获取数据来确保快速响应。但是，在处理客户端请求时，会触发一个单独的请求到服务器，以获取较新版本（如果有）并将其存储到缓存中。

Angular 仅提供两种缓存策略：

• 性能（默认） - 目标是优化响应时间。如果缓存中有可用资源，则提交该版本。否则，将执行网络请求来获取并缓存该资源。
• 新鲜度- 当需要从网络传输最新数据时使用。我们可以指定一个超时时间，超过该时间后，请求将回退到缓存，并尝试从缓存中传输所需数据。

🔗来源： dev.to

Q16：什么是App Shell？

主题：PWA
难度：⭐⭐⭐⭐

应用程序外壳（或应用程序外壳）架构是构建渐进式 Web 应用程序的一种方式，该应用程序可以可靠且即时地加载到用户的屏幕上，类似于您在本机应用程序中看到的。

应用“外壳”是用户界面所需的精简 HTML、CSS 和 JavaScript，离线缓存后可确保用户重复访问时获得即时、可靠的良好性能。这意味着应用外壳无需在用户每次访问时都从网络加载。只需从网络加载必要的内容即可。

对于导航相对不变但内容不断变化的应用程序和网站来说，应用程序外壳架构最有意义。

🔗资料来源： developers.google.com

Q17：App Shell 有哪些要求？

主题：PWA
难度：⭐⭐⭐⭐

理想情况下，应用程序外壳应该：

• 加载速度快
• 尽可能少地使用数据
• 使用本地缓存中的静态资产
• 将内容与导航分开
• 检索并显示页面特定内容（HTML、JSON 等）
• 可选地，缓存动态内容

🔗资料来源： developers.google.com

Q18：iOS 版 PWA 怎么样？

主题：PWA
难度：⭐⭐⭐⭐⭐

服务工作者在 Safari 11.1 中可用，该浏览器于 2018 年 3 月 29 日发布，附带 iOS 11.3 和 macOS 10.13.4。

笔记：

• Service Worker + Cache API 均受支持（Cache API 实际上是 Service Worker 支持的先决条件）
• Apple 的 Service Worker 实现存在一些明显的问题
• 没有“添加到主屏幕”提示
• 无推送 API
• 无后台同步

🔗来源： stackoverflow.com

Q19：可以有多个服务人员吗？

主题：PWA
难度：⭐⭐⭐⭐⭐

这里有两件事需要记住：

• 可以为给定的源注册任意数量的服务工作者，只要每个服务工作者都有自己独特的范围
• 缓存存储 API（和其他存储机制，如 IndexedDB）在整个源中共享，默认情况下没有“分片”或命名空间隔离。

🔗来源： stackoverflow.com

Q20：Service Worker 可以做什么而 Web Worker 不能做？

主题：PWA
难度：⭐⭐⭐⭐⭐

• Web Workers - 为 Web 内容提供一种在后台线程中运行脚本的简单方法。Worker 线程可以在不干扰用户界面的情况下执行任务。此外，它们还可以使用 XMLHttpRequest 执行 I/O（尽管其 respondXML 和 channel 属性始终为 null）。创建 Worker 后，可以通过将消息发布到创建它的 JavaScript 代码指定的事件处理程序来发送消息（反之亦然）。

• Service Worker本质上充当代理服务器，位于 Web 应用程序、浏览器和网络（如果可用）之间。它们旨在（除其他功能外）创建有效的离线体验，拦截网络请求，并根据网络是否可用以及更新的资源是否驻留在服务器上采取适当的操作。它们还允许访问推送通知和后台同步 API。
  

               | Web Workers  | Service Workers  |
|--------------|--------------|------------------|
| Instances    | Many per tab | One for all tabs |
| Lifespan     | Same as tab  | Independent      |
| Intended use | Parallelism  | Offline support  |

Web Workers 可以方便地运行昂贵的脚本而不会导致用户界面冻结，而 Service Workers 则可用于修改网络请求的响应（例如，在构建离线应用程序时）。

🔗来源： stackoverflow.com

Q21：带有服务工作线程的 App Shell 架构有哪些好处？

主题：PWA
难度：⭐⭐⭐⭐⭐

带有服务工作线程的 App Shell 架构的优点包括：

• 性能可靠，始终快速。重复访问速度极快。静态资源和 UI（例如 HTML、JavaScript、图片和 CSS）会在首次访问时缓存，以便重复访问时立即加载。内容可能会在首次访问时被缓存，但通常会在需要时加载。

• 类似原生应用的交互。通过采用应用外壳模型，您可以创建即时、类似原生应用的导航和交互体验，并提供离线支持。

• 节约使用数据。设计时应尽量减少数据使用量，并合理安排缓存内容，因为列出非必要文件（例​​如并非每个页面都显示的大图片）会导致浏览器下载超过实际需要的数据。尽管西方国家的数据相对便宜，但在连接成本高昂且数据流量昂贵的新兴市场，情况并非如此。

🔗资料来源： developers.google.com

Q22：PWA 中是否有可能拥有真正的持久存储？为什么您可能需要它？

主题：PWA
难度：⭐⭐⭐⭐⭐

答案是否定的。用户可以删除 PWA（如果安装在 Android 上）并清除浏览器中 PWA 的所有内容缓存。

Cache API 在设计上是临时的，当用户清除浏览器缓存时，IndexedDB 数据可能会被擦除。

因此，为了在 PWA 安装中保留应用程序的数据，您应该通过某些 API 使用云存储。

🔗来源： stackoverflow.com

感谢🙌的阅读，祝你面试顺利！
如果喜欢，请分享给你的开发者同事！
更多 FullStack 面试问答，请访问👉 www.fullstack.cafe