PWA （Progressive Web App）可以让你的网站获得 Native App 的体验，它可以离线访问，并且具备本地缓存和通知功能等特性。其中缓存功能是实现离线访问的关键，但是在实际开发中，会发现部分文件的缓存生命周期过短，需要频繁进行缓存更新，影响用户体验。本文将介绍如何解决这个问题。
缓存生命周期短的原因
在 PWA 中，我们使用 Cache API 来进行文件缓存。它包括两个 API，分别为 Cache 对象和 Service Worker 的 fetch 事件。缓存的生命周期取决于缓存策略和更新策略，这两个策略在 Service Worker 中进行设置。
首先，缓存策略用来确定缓存何时过期。我们可以使用一下策略：
no-store（不缓存）：每次都会请求最新的资源。no-cache（始终验证）：每次都会请求服务器与缓存记录进行比较，如果数据有更新，则会下载新的数据。max-age（缓存有效期）：指定缓存的有效时间，单位是秒。
然后，更新策略用来确定何时更新缓存。常用的策略有：
cache-first（优先使用缓存）：如果缓存中有资源，则直接使用缓存；若缓存中没有资源，则向服务器请求。network-first（优先获取最新数据）：如果网络正常，则首先请求服务器并缓存数据，如果网络不通则使用缓存数据。
如果不做设置，默认情况下，浏览器会按照刷新间隔（默认一周）来检查缓存文件是否过期，如果过期则会重新下载。
解决缓存生命周期短的方法
缓存生命周期过短的问题，即需要频繁更新缓存，那么我们需要通过改进缓存策略和更新策略来解决这个问题。
更新缓存策略
首先，我们可以把缓存策略中的缓存有效期增加到一个较长的时间，这样可以减少更新缓存的频率。例如设置缓存有效期为一年：
-- -------------------- ---- -------
----- --------- - -----------
----- ------------ - -
----
--------------
---------------------
------------------
--
-------------------------------- ----- -- -
----------------
----------------------
----------- -- ---------------------------
-------- -- -------------------
--
---
------------------------------ ----- -- -
------------------
---------------------------
-------------- -- -
-- -------------------
-- ---------- -
------ ---------
-
-- ----------------
------ --------------------
-------------- -- -
-- ---------------
-- ---------------- --- ---- -
----- ------------- - -----------------
----------------------
----------- -- ------------------------ ----------------
-
------ ---------
---
--
--
---注意：缓存有效期增加后，服务器修改了资源也不会立即更新，需要等到缓存过期才会重新下载更新。因此，这种方法适合于很少更新的静态资源。
精确判断更新时机
第二种方法是在更新策略中增加额外的判断。我们可以将更新策略改为 network-first，即优先获取最新数据，但是额外增加判断，如果服务器上的资源没有变化，则继续使用缓存。例如：
-- -------------------- ---- -------
----- --------- - -----------
----- ------------ - -
----
--------------
---------------------
------------------
--
-------------------------------- ----- -- -
----------------
----------------------
----------- -- ---------------------------
-------- -- -------------------
--
---
------------------------------ ----- -- -
------------------
---------------------------
-------------- -- -
----- ------------ - --------------------
-------------- -- -
-- ---------------
-- ---------------- --- ---- -
----- ------------- - -----------------
----------------------
----------- -- ------------------------ ----------------
-
------ ---------
---
-- --- ---- -------------
-- ----------------------------------------------------------- -
------ -------------
-
-- ---- ---- -------------------------------
------ ---------------------------
-------------- -- -
----- ------------ - --------------------------------------
----- ----------------- - ----------------------------- -- ----------------------------------
------ -------------------------- -------------------------------- -- -
-- --------- --- --------- -
------ ---------
- ---- -
------ -------------
-
---
---
--
--
---这样，我们就可以在确保服务器更新了资源的情况下，去更新缓存。但是这种方法需要服务器返回特定的头部信息（如 Last-Modified），并且获取这些信息需要额外的请求，因此比较耗损性能。
结论
准确地确定更新缓存的时机是一个有挑战的问题，因为我们需要考虑多种因素，如用户体验、服务器负载、缓存策略等。通过合理设置缓存策略和更新策略，我们可以最大化地使用缓存，减少网络请求，提高页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcd01e4471362601736c01