Edit

制作渐进式 Web 应用程序(PWA)

生产版本具有生成一流的 Progressive Web App 所需的所有工具，但 离线/缓存优先行为选择性加入的。 默认情况下，构建过程将生成一个 service worker 文件，但不会注册，因此它不会控制你的生产 Web 应用程序。

为了选择加入离线优先行为，开发人员应在其 src/index.js 文件中查找以下内容：

// 如果你希望应用程序能脱机工作并加载更快，
// 那么可以将下面的 unregister() 改为 register()。 请注意，这带来了一些陷阱。
// 了解有关 service workers 的更多信息：http://bit.ly/CRA-PWA

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

正如注释所述，将 serviceWorker.unregister() 更改为 serviceWorker.register() 将选择使用 service worker 。

为什么选择性加入?

离线优先的 Progressive Web Apps（渐进式 Web 应用程序）比传统网页更快，更可靠，并提供了很好的移动体验：

  • 无论网络连接如何（例如2G或3G），所有静态站点资源都会被缓存，以便你的页面在后续访问中快速加载。更新将在后台下载。
  • 无论网络状态如何，即使离线，你的应用也能正常运行。这意味着你的用户将能够在 1万英尺的高空和地铁上使用你的应用程序。
  • 在移动设备上，你的应用可以直接添加到用户的主屏幕，应用图标和所有内容。这消除了对 app 商店的需求。

但是，它们使调试部署更具挑战性 ，因此，从 Create React App 2 开始，service workers 被设置成了可以选择加入。

workbox-webpack-plugin 已集成到生产配置中，它将负责生成 service worker 文件，该文件将自动预先缓存所有本地资源，并在部署更新时使其保持最新。 service worker 将使用 缓存优先策略 来处理对本地资源的所有请求，包括 HTML 的 导航请求，确保你的 Web 应用程序始终保持快速，即使在缓慢或不可靠的网络上也是如此。

离线优先的注意事项

如果你决定选择加入 service worker 注册，请考虑以下因素：

  1. 初始缓存完成后，service worker 生命周期 控制何时更新的内容最终显示给用户。为了 防止延迟加载内容的竞争条件 ，默认行为是保守地使更新的 service worker 保持 "waiting" 状态。这意味着用户最终会看到旧内容，直到他们关闭（重新加载）现有的打开标签。有关此行为的更多详细信息，请参阅 这篇博客文章。
  2. 用户并不总是熟悉离线优先Web应用程序。让用户知道 service worker 何时完成填充缓存（显示 "This web app works offline!（此 Web 应用程序脱机工作！）"消息），并让他们知道 service worker 何时获取可用的最新更新可能很有用。下次他们加载页面时（显示“New content is available once existing tabs are closed.(一旦现有选项卡关闭，新内容可用。)”消息）。显示这些消息目前留给开发人员，但作为一个起点，你可以使用 src/serviceWorker.js 中包含的逻辑，该逻辑演示了要监听哪些 service worker 生命周期事件以检测每个方案，以及默认情况下，只需将适当的消息记录到 JavaScript 控制台。
  3. service worker 需要 HTTPS，但为了便于本地测试，该策略不适用于 localhost 。如果你的生产 Web 服务器不支持 HTTPS ，则服务工作者注册将失败，但你的 Web 应用程序的其余部分仍将保持正常运行。
  4. service worker 仅在 生产环境 中启用，例如，npm run build 的输出。建议你不要在开发环境中启用离线优先 service worker 程序，因为它可能会导致使用以前缓存的资源时感到沮丧，并且不包括你在本地进行的最新更改。
  5. 如果 需要 在本地测试离线优先 service worker ，请构建应用程序（使用 npm run build ）并从构建目录运行简单的 http 服务器。运行构建脚本后，create-react-app 将提供一种在本地测试生产构建的方法的说明，并且 部署说明 包含使用其他方法的说明。 _请务必始终使用隐身窗口，以避免浏览器缓存出现问题 _。
  6. 默认情况下，生成的 service worker 文件不会拦截或缓存任何跨源资源，如 HTTP API请求，图片或从其他域名加载的嵌入。

渐进式 Web 应用程序元 Metadata

默认配置包含的 Web 应用程序 manifest 位于 public/manifest.json ，你可以使用特定于 Web 应用程序的详细信息进行自定义。

当用户在 Android 上使用 Chrome 或 Firefox 将网络应用添加到其主屏幕时，manifest.json 中的元数据可以设置显示网络应用时需要使用的图标，名称和品牌颜色（branding colors）。 Web App Manifest 指南 提供了有关每个字段的含义以及你的自定义将如何影响用户体验的更多背景信息。

已添加到主屏幕的渐进式Web应用程序将加载更快，并在激活 service worker 时脱机工作。话虽如此，无论你是否选择性加入 service worker 注册，Web 应用程序清单中的元数据仍将被使用。

← PreviousNext →