Progressive Web App(PWA) 是近几年比较火热的前端概念，可以让我们的 Web 应用程序近似于原生应用程序，具有离线访问、推送通知和设备硬件访问等能力。其中 Service Worker 是 PWA 的重要组成部分，它提供了一种将网络请求拦截并缓存返回结果的能力。本文将着重解析 PWA 的 Service Worker 缓存及更新机制。
Service Worker 简介
Service Worker 是运行在独立于 web 页面之外的 JavaScript 线程，可以拦截网络请求及返回。我们可以理解 Service Worker 是一个 JavaScript 代理，用于接管复杂的页面请求，其中缓存 API 是一个重要的应用场景。
Service Worker 缓存原理
为了加速 Web 应用程序的加载速度，可将 Web 应用的资源如： HTML、CSS、JavaScript、图像等缓存到本地，当用户首次访问网站时便可从本地快速获取资源，降低请求时间。当用户再次进入网站时，则可通过 Service Worker 将一些资源缓存在本地，以此来实现离线访问和资源快速加载。
Service Worker 缓存具体分为两部分：请求拦截、缓存匹配，其中使用 cache API 来实现缓存存储以及资源的匹配。
请求拦截
Service Worker 可使用 fetch 事件来拦截网络请求并进行处理，它只会拦截经过 HTTP(S) 发送的请求，建议全部使用 HTTPS 协议。
-- -------------------- ---- -------
------------------------------ --------------- -
-- ---------- ---
--- -------- - ---------------------------
-- -----------
-- -------------------------- -
------------------
---------------------------------------------- -
-- ------
------ --------------------------------------------- -
-- -----------
-- ---------- -
------ ---------
-
-- ----------
------ -------------------------------------------- -
-- --------------
--- -------------- - -----------------
------------------- ----------------
------ ---------
---
------------------- -
-- --------------
------ -----------------------
---
--
--
-
---缓存匹配
在拦截到请求后，我们需要进行缓存匹配，如果缓存存在则直接返回，否则发送请求进行数据更新。缓存匹配时我们需要以请求的 url 为 key 从缓存中寻找是否存在匹配。
-- -------------------- ---- -------
-------- -------------------- -
-- ----- --- ---- ---
--- ------- - -------------------- - -----------------------
--- --- - ------------
-- ----------------------- -
--- - -------------------- ----
-
------ --- ------------ ---------
-至此，Service Worker 的缓存机制就完成了。
Service Worker 更新机制
由于 PWA Service Worker 缓存是数据硬化，即权威主输出的数据会直接缓存在用户本地，因此缓存是需要时常进行更新的。常见的更新策略如下：
- 缓存 based 缓存策略：缓存前可以先与本地版本比对，相同时不进行缓存，不同时进行数据更新，可以减小不必要的网络开销。
- 缓存过期（cache expiration）策略： 设置缓存失效时间，在失效时间内优先使用本地缓存，否则发起请求，更新缓存。
- 缓存后请求策略： 缓存请求返回后，再发起请求，以防止内容不同、存储空间不足等情况。
推荐使用 compoare and swap( cache based update) 的更新策略，因为不仅仅只是本地缓存和服务器缓存相等时才进行更新，而是进行版本信息比较，比较相等则不更新，不等则更新，也是目前比较常见的 ServiceWorker 更新策略。
-- -------------------- ---- -------
-- -- ------- ------
-- ------------------------- -
------------------------------------------ ---------------------------- -
-- -- ------- ------ --
-------------------------------------------- ---------- -
--- --------- - ------------------------
-- - ------- ------ ----
----------------------------------------- ---------- -
-- ---------------- --- ------------ -
-- --- ------- ------ ----
-- ------------------------------------ -
--- --------- - -----------------------------------
-- ------------------ --- ------------------ -
-- -------- --- ----
----------------------- ------- ------------- ---
-
- ---- -
--------------- ------- ------- ---------
-
-
---
---
-- ----
-------------------------- -------------
-- ----------- -
-- ------------ ------
---------------------------- -------- -------- ---
---
-总结
PWA 的 Service Worker 缓存及更新机制主要是通过 Service Worker 的拦截和缓存匹配机制来实现，在缓存过期或版本过期时进行更新，推荐使用 compare and swap 的更新策略。在具体使用时需要结合实际场景进行设计，对于需要时时更新的数据可以不做缓存的考虑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1aa0df6b2d6eab3cdaaf0