Service Worker 概览

Service Worker 提供不可思议的效用,但一开始可能很难上手。Workbox 使 Service Worker 更易于使用。但是,由于 Service Worker 会解决棘手的问题,因此如果不了解该技术的任何抽象概念,都将非常棘手。因此,在介绍 Workbox 细节之前,前几篇文章将涵盖底层技术。

如需查看正在运行的 Service Worker 列表,请在地址栏中输入 chrome://serviceworker-internals/

正在运行的 Service Worker 列表。

Service Worker 提供什么?

Service Worker 是专门的 JavaScript 资源,充当网络浏览器和 Web 服务器之间的代理。它们旨在通过提供离线访问来提高可靠性,以及提升网页性能。

一种渐进增强的类似应用的生命周期

Service Worker 是现有网站的增强功能。这意味着,如果用户使用不支持 Service Worker 的浏览器访问使用这些 Service Worker 的网站,则不会破坏基准功能。这就是网络的意义所在。

与针对具体平台的应用类似的生命周期,Service Worker 会逐步增强网站功能。 想想从应用商店安装原生应用时会出现什么情况:

  • 系统发出下载应用程序的请求。
  • 系统随即会下载并安装该应用。
  • 应用已可供使用,可以启动。
  • 针对新版本的应用更新。

Service Worker 的生命周期类似,但采用的是渐进式增强方法。首次访问安装新 Service Worker 的网页时,对页面的初始访问提供其基准功能,而 Service Worker 则进行下载。Service Worker 安装并激活后,可控制页面以提高可靠性和速度。

访问由 JavaScript 驱动的缓存 API

Service Worker 技术不可或缺的一个方面是 Cache 接口,它是一种完全独立于 HTTP 缓存的缓存机制。Cache 接口可以在 Service Worker 作用域和主线程作用域内访问。这就为用户与 Cache 实例互动带来了无限可能。

HTTP 缓存会受到 HTTP 标头中指定的缓存指令的影响,而 Cache 接口可通过 JavaScript 进行编程。这意味着,可以基于最适合给定网站的逻辑来缓存网络请求的响应。 例如:

  • 在收到第一次请求时将静态资源存储在缓存中,并且仅针对每个后续请求从缓存提供这些资源。
  • 将页面标记存储在缓存中,但仅在离线场景中从缓存提供标记。
  • 从缓存中针对某些资源提供过时的响应,但在后台通过网络对其进行更新。
  • 流式传输来自网络的部分内容,然后将其与来自缓存的 App Shell 组装在一起,以提升感知性能。

以上每个都可以作为一个缓存策略的示例。缓存策略可实现离线体验,并且可以绕过 HTTP 缓存启动检查,以规避高延迟重新验证检查,从而提供更好的性能。在深入了解 Workbox 之前,我们会回顾一些缓存策略和使它们正常运行的代码。

异步和事件驱动型 API

通过网络传输数据本质上是异步进行的。请求资源、服务器响应该请求并下载响应需要一些时间。所涉及的时间多种多样,而且不确定。 Service Worker 通过事件驱动型 API 适应这种异步性,针对如下事件使用回调:

您可以使用熟悉的 addEventListener API 注册事件。所有这些事件都可能会与 Cache 接口交互。具体而言,在调度网络请求时运行回调的能力对于提供人们所期望的可靠性和速度至关重要。

在 JavaScript 中执行异步工作需要使用 promise。由于 promise 还为 asyncawait 提供依据,因此这些 JavaScript 功能还可用于简化 Service Worker(和 Workbox!)代码,从而提供更好的开发者体验。

预缓存和运行时缓存

Service Worker 与 Cache 实例之间的交互涉及两个不同的缓存概念:预缓存和运行时缓存。每项功能都是 Service Worker 可以提供的核心优势。

预缓存是提前(通常是在 Service Worker 安装期间)缓存资源的过程。借助预缓存,用户可以下载离线访问所需的关键静态资源和材料,并将其存储在一个 Cache 实例中。 这种缓存还可以提高后续需要预缓存资源的页面的网页速度。

运行时缓存是指在运行时从网络请求资源时将缓存策略应用于资源的情况。这种缓存非常实用,因为它可以保证离线访问用户已访问过的网页和资源。

组合使用时,这些在 Service Worker 中使用 Cache 接口的方法不仅能够改善用户体验,还能为普通网页提供类似应用的行为。

与主线程隔离

JavaScript 性能的状态是 Web 不断演变的挑战,从用户的角度来看,它取决于设备功能和对高速互联网的访问。 使用 JavaScript 越多,构建速度快的网站以提供令人愉悦的用户体验就越难。

Service Worker 与 Web Worker 类似,因为它们执行的所有工作都是在自己的线程上进行。这意味着 Service Worker 任务不会与主线程上的其他任务竞争注意力。Service Worker 在设计上秉持用户至上的理念!

未来之路

本文档只是概览。在介绍 Workbox 相关内容之前,还有几个关于 Service Worker 需要了解的话题,但请放心:对 Service Worker 的深入了解后,使用 Workbox 将获得更加轻松和高效的体验。