前言
在前端开发中，提高 Web 应用程序的性能是一个重要的议题。让你的 Web 应用程序更快、更接近原生应用体验是前端开发者常常思考的问题，而 PWA 的出现正是一个很好的解决方案。PWA 最重要的特点在于, 支持本地缓存技术, 以达到在离线状态下也能访问到应用程序的目的。然而，PWA 的缓存是否长期有效一直是一个比较棘手的问题。
问题
在 PWA 应用程序中, 一旦成功被缓存起来，如果缓存内容长期不被清理，那么这些缓存会一直保存在用户设备上。这会导致以下问题:
- 应用程序已经更新，但用户设备上的 PWA 仍然使用旧版本应用程序，不能收到新应用程序的优化和改进。
- 缓存的过多会增加用户设备存储的负担，降低用户的使用体验。
- 必须手动清理缓存才能得到更好的用户体验，而对于许多普通用户来说, 操作缓存清理是一件比较棘手的事情。
解决方案
Google 提出的解决方案是使用缓存版本号的方式。通过在 ServiceWorker 缓存的名称后面添加版本号，来保证浏览器强制更新缓存。
-- -------------------- ---- -------
----- --------- - ------------
-------------------------------- ------- -- -
-- ----- --- ------ ----
----------------
----------------------------------- -- -
------ --------------
--------------
----------------------
---
--
--
---
--------------------------------- ------- -- -
----------------
----------------------------- -- -
------ ------------
------------------- -- -
-- ----- --- ---------- -
------ --------------------
-
--
--
--
--
---
------------------------------ ------- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------------------- -- -
-- ----- - ---- -- ---- ------- -- --- -----
--------------------------------- -- -
------------------------ ------------------
---
------ ---------
---
--
--
---- 在 ServiceWorker 的 install 事件中，我们为缓存指定一个版本，这个版本号可以和你的应用程序版本号一致，保证它是一种静态资源。
- 在 ServiceWorker 的 activate 事件中，我们可以清除之前缓存的版本。
- 在每一个 fetch 事件中，我们可以先尝试从缓存中获取资源，如果没有命中缓存，则请求服务器获取。
通过这种方式，我们就可以保证 PWA 内容长期有效，并且在应用程序更新后强制更新客户端缓存。
总结
通过使用版本号的方式，可以解决 PWA 缓存内容长期有效的问题。通过在 ServiceWorker 缓存名称后面添加缓存版本号，可以在应用程序更新后强制更新缓存，从而保证 PWA 总是使用最新的应用程序。这种方式可以明显减轻用户设备上的存储负担，同时也可以提高用户的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f203c2f6b2d6eab3bca46a