引言
PWA（Progressive Web App）是一种用于构建现代 web 应用程序的技术。它们是基于 web 技术构建的应用程序，具有许多像原生应用程序一样的功能，例如离线使用、应用安装等。其中最有名的服务工作线程就是实现了离线缓存的功能。但是，在应用程序更新期间，我们需要注意避免将新版本的应用程序覆盖已经缓存的文件，从而避免意外的数据丢失。
原理
PWA 应用程序的离线缓存是由服务工作线程实现的。服务工作线程是一种在后台运行的 JavaScript 线程，它可以拦截应用程序发出的每个网络请求并相应地缓存或替换响应。但是，在覆盖缓存之前，我们需要检查新版本的应用程序，以确保我们不会覆盖用户之前所保存的数据。
解决方案
我们可以通过引入版本号来避免新版本应用程序覆盖旧版本的缓存。具体来说，我们需要在每次更新应用程序时更新版本号。这与我们通常在程序中使用的版本号机制相同。每次应用程序更新都会增加版本号的值，从而唯一标识每个版本。通过唯一标识，浏览器可以区分新版本和旧版本的应用程序。
-- -------------------- ---- -------
----- ---------- - ------------
-------------------------------- ------- -- -
----------------
------------------------------------ -- -
------ --------------
----
--------------
--------------
---------
---
--
--
---
--------------------------------- ------- -- -
----------------
------------------------------- -- -
------ ------------
-------------------------- -- -
-- ---------- --- ----------- -
------ -------------------------
-
--
--
--
--
---
------------------------------ ------- -- -
------------------
------------------------------------------- -- -
-- ---------- -
------ ---------
- ---- -
------ ------------------------------------ -- -
------ ------------------------------------ -- -
------------------------ ------------------
------ ---------
---
---
-
--
--
---上面的示例代码给出了一个使用版本号缓存策略的服务工作线程。在安装事件中，我们创建一个名为 my-app-v1 的缓存。在激活事件中，我们使用 cache.keys() 获取所有缓存名称，然后通过 cache.delete() 删除不属于当前版本的所有缓存。在获取事件中，我们首先检查缓存中是否已经存在请求的响应。如果存在，则直接使用响应，否则我们通过网络来请求响应，并先将其存储在缓存中。
总结
通过上述步骤，我们可以避免新版本应用程序覆盖旧版本的缓存。这样，我们就不用担心在更新应用程序时意外删除了用户保存的数据。
当然，版本号机制也只是其中一种缓存策略。当我们使用 PWA 构建应用时，我们需要根据应用程序的需求选择正确的缓存策略。无论如何，PWA 技术为我们提供了很多选择，并极大地提高了 Web 应用程序的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466c625968c7c53b0736628