什么是 PWA
PWA，全称 Progressive Web App，是一种新型的 Web 应用程序，它能够像 Native App 一样为用户提供更好的体验，比如可以离线访问、添加到主屏幕、推送通知等。
PWA 最大的特点就是它可以离线存储，即使没有网络也可以继续访问应用程序。这是通过使用 Service Worker 技术实现的。Service Worker 是一个 JavaScript 文件，它可以在后台拦截网络请求，从而实现离线存储和推送通知等功能。
PWA 离线存储失败的原因
PWA 离线存储失败的原因有很多，比如：
缓存策略不正确。缓存策略不正确可能会导致缓存被清空，从而导致离线存储失败。比如，如果你使用了 Cache-Control: no-cache 或者 Cache-Control: no-store 等缓存策略，那么浏览器就不会缓存这个资源，从而导致离线存储失败。
缓存版本号不正确。如果你的缓存版本号不正确，那么浏览器就会认为你的缓存已经过期，从而导致离线存储失败。
缓存文件路径不正确。如果你的缓存文件路径不正确，那么浏览器就会找不到这个文件，从而导致离线存储失败。
缓存文件格式不正确。如果你的缓存文件格式不正确，比如你尝试缓存一个 HTML 文件，那么浏览器就会认为它不是一个可缓存的文件，从而导致离线存储失败。
PWA 离线存储失败的解决方法
检查缓存策略是否正确。正确的缓存策略应该是 Cache-Control: max-age=xxx 或者 Cache-Control: public 等。如果你的缓存策略不正确，那么你需要修改它。
检查缓存版本号是否正确。正确的缓存版本号应该是一个唯一的字符串或者数字，比如 v1、v2、1.0.0 等。如果你的缓存版本号不正确，那么你需要修改它。
检查缓存文件路径是否正确。正确的缓存文件路径应该是相对于根目录的路径，比如 /index.html、/js/app.js 等。如果你的缓存文件路径不正确，那么你需要修改它。
检查缓存文件格式是否正确。正确的缓存文件格式应该是可缓存的文件，比如 HTML、CSS、JS、图片等。如果你尝试缓存一个不可缓存的文件，那么你需要修改它。
另外，你还可以使用一些工具来帮助你检查 PWA 离线存储失败的原因，比如 Lighthouse、Workbox 等。
示例代码
下面是一个简单的示例代码，它演示了如何使用 Service Worker 来实现 PWA 离线存储。
-- -------------------- ---- -------
-- -- ------- ------
-- ---------------- -- ---------- -
---------------------------------------------------------------------- -
-------------------- ------ ------- --------------------
------------------------ -
-------------------- ------ ------- -------
---
-
-- ----
-------------------------------- --------------- -
----------------
-------------------------------------- -
------ --------------
----
--------------
-----------------
-------------
---------------
---
--
--
---
-- ------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---在上面的代码中，我们首先注册了 Service Worker，然后在 Service Worker 中缓存了一些文件，最后拦截了网络请求，如果缓存中有对应的文件，就使用缓存中的文件，否则就从网络中获取文件。
总结
PWA 离线存储是 PWA 最重要的特性之一，它可以让用户在没有网络的情况下继续访问应用程序。但是，PWA 离线存储也有可能失败，我们需要仔细检查缓存策略、缓存版本号、缓存文件路径和缓存文件格式等因素，以确保离线存储能够正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6558217dd2f5e1655d25aa4a