Service Worker

用户希望应用在网络连接速度较慢或不稳定时能够可靠地启动，或者 即使离线也无妨。他们希望看到最近互动过的内容 （例如媒体曲目、票券和行程）必须可供使用。 当请求不可行时，用户希望应用通知他们，而不是 无声地失败或崩溃。他们希望这一切都能快速发生。如 可以看出，毫秒带来数百万美元， 即使加载时间缩短 0.1 秒，转化率也可提高多达 10%。 Service Worker 是一种工具，可让您的渐进式 Web 应用 (PWA) 用户的预期。

<ph type="x-smartling-placeholder">
</ph> Service Worker 作为中间件代理，在 PWA 和服务器（包括您自己的服务器和跨网域服务器）之间运行设备端代理。
Service Worker 充当两个 API 之间的中间件， PWA 及其交互的服务器。

当应用请求在 Service Worker 的作用域内覆盖的资源时， Service Worker 会拦截请求并充当网络代理，即使 用户处于离线状态。然后，它可以决定是否应从 使用 Cache Storage API 提供的缓存，那么从网络传送缓存，就像没有 活动 Service Worker，也可以根据本地算法创建 Service Worker。这样，您就可以 提供类似于平台应用的优质体验， 应用处于离线状态。

注册 Service Worker

在 Service Worker 控制您的页面之前，必须先为其注册 PWA。这意味着用户第一次打开您的 PWA，它的所有网络 这些请求会直接发送到您的服务器，因为 Service Worker 并没有 网页的控制权。

检查浏览器是否支持 Service Worker API 后，您的 PWA 可以 注册一个 Service Worker。Service Worker 在加载后会自行设置 您的 PWA 和网络之间，拦截请求并提供 相应的回答。

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}
尝试注册一个 Service Worker， 都发生在浏览器的开发者工具中
。

验证 Service Worker 是否已注册

要验证 Service Worker 是否已注册，请使用 您喜爱的浏览器。

在 Firefox 和基于 Chromium 的浏览器（Microsoft Edge、Google Chrome 或 三星互联网）：

  1. 打开开发者工具，然后点击应用标签页。
  2. 在左侧窗格中，选择 Service Workers。
  3. 检查 Service Worker 的脚本网址是否随状态一起显示 “已启用”。（如需了解详情，请参阅生命周期）。在 Firefox 中 状态可以是“正在运行”或“已停止”。

在 Safari 中：

  1. 点击开发 >Service Worker。
  2. 查看此菜单中是否有包含当前源的条目。点击该条目 在 Service Worker 的上下文中打开检查器。
。 <ph type="x-smartling-placeholder">
</ph> Chrome、Firefox 和 Safari 上的 Service Worker 开发者工具。
Chrome、Firefox 和 Safari 上的 Service Worker 开发者工具。
。

范围

Service Worker 所在的文件夹决定其范围。Service Worker 位于example.com/my-pwa/sw.js的导航控件可以控制位于以下地址的任何导航： my-pwa 路径，例如 example.com/my-pwa/demos/。Service Worker 可以 仅控制其范围内的项（网页、工作器，统称为“客户端”）。 此范围适用于浏览器标签页和 PWA 窗口。

每个范围只允许有一个 Service Worker。当 Service Worker 处于活动状态时 并且无论有多少个客户端，通常只有一个实例可用 （PWA 窗口或浏览器标签页）在内存中。

Safari 的作用域管理（称为分区）更为复杂，会影响 范围支持跨网域 iframe。要详细了解 WebKit 的 请参阅他们的博文。

Lifecycle

Service Worker 的生命周期会分别决定它们的安装方式。 从 PWA 安装中删除。

Service Worker 生命周期从注册 Service Worker 开始。通过 然后浏览器尝试下载并解析 Service Worker 文件。如果解析 成功，则会触发 Service Worker 的 install 事件。install 事件 仅触发一次。

Service Worker 的安装会以静默方式进行，无需用户许可， 即使用户未安装 PWA。Service Worker API 可用 甚至在不支持 PWA 安装的平台上，例如 Safari 和 在桌面设备上使用 Firefox。

安装后，必须先激活 Service Worker 包括您的 PWA。当 Service Worker 准备好 则会触发 activate 事件。不过，在默认情况下， 激活的 Service Worker 无法管理注册它的页面，直到下一个 重新加载页面或重新打开 PWA 以导航到该页面。

您可以使用 self 监听 Service Worker 全局范围内的事件。 对象：

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

更新 Service Worker

在浏览器检测到 Service Worker 时，Service Worker 会更新 从命令行控制客户端和新版 Service Worker 文件 因字节而异。

安装成功后，新 Service Worker 将等待激活， 旧 Service Worker 不再控制任何客户端。此状态称为 “waiting”，这是浏览器确保只有一个版本的 Service Worker 同时运行。

刷新页面或重新打开 PWA 都不会使新 Service Worker 占用 控制。用户必须使用 当前 Service Worker，然后返回以为新的 Service Worker 提供 控制。如需了解详情，请参阅 Service Worker 生命周期。

Service Worker 寿命

已安装和注册的 Service Worker 可以管理所有网络请求 。它在自己的线程上运行，激活和终止 由浏览器控制，因此即使您未打开 PWA 或 。Service Worker 在自己的线程上运行，但内存中状态 在 Service Worker 的两次运行之间可能不会持续，因此 都可在 IndexedDB 或其他 永久性存储

如果 Service Worker 尚未运行，则每当有网络请求时，Service Worker 都会启动。 在其作用域内发送，或者当它收到触发事件（如定期发送）时， 后台同步或推送消息。

如果 Service Worker 已经空闲几秒钟，或者如果 他们太忙了太久了显示时间因浏览器而异。如果 Service Worker 被终止，并且发生了一个可启动 Service Worker 的事件， 它就会重新启动

功能

已注册的且活跃的 Service Worker 使用的线程具有完全不同的 执行生命周期。不过，在默认情况下， Service Worker 文件本身没有任何行为。它不会缓存或投放任何 资源；这些都是代码需要完成的工作您将在 后续几章

Service Worker 的功能不仅适用于代理或处理 HTTP 请求。 系统还会在此基础上提供其他功能，以便实现背景等其他用途。 代码执行、网络推送通知以及处理付款。我们将讨论 Capabilities 中的这些新增内容。

资源