PWA（Progressive Web App）是一种结合了 Web 和 Native App 的体验的新型应用模式，其具有离线缓存、推送通知、快速响应等优秀特性，然而在 PWA 开发中会遇到许多常见的错误。本篇文章将总结 PWA 开发中常见的错误，并提供相应的解决方案，希望对读者在 PWA 开发中有所帮助。
离线缓存问题
错误描述
在页面支持离线访问时，第一次打开页面正常展示，但是在第二次离线情况下打开页面时，页面内容不会刷新，及时有内容更新也不会生效。
解决方案
添加一个版本号缓存，并且在版本号变化后让缓存失效，并请求新的资源。
-- -------------------- ---- -------
----- ---------- - ------------------
----- ----------- - -
----
-------------------
------------------
--
-------------------------------- ----- -- -
----------------
-----------------------
----------- -- --------------------------
-------------------------
--
---
------------------------------ ----- -- -
------------------
---------------------------
-------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--------- -- -
------ ------------------------------
--
--
---
--------------------------------- ----- -- -
----------------
----------------------------- -- -
------ ------------
--------------------------- -- -
------ --------- --- -----------
---------------- -- -
------ -------------------------
--
--
--
--
---添加 Service Worker
错误描述
当添加 Service Worker 文件时，在页面的开发过程中热加载失效，这导致每次改动后都需要手动刷新页面并清除 Service Worker。
解决方案
我们可以使用 workbox 库来管理 Service Worker，它提供了生命周期管理、资源管理、离线缓存等的解决方案。使用 workbox 可以帮助我们简化缓存管理，并提供离线缓存等优秀特性。
首先安装 workbox-cli，并根据项目需要生成需要的文件：
npm i -g workbox-cli workbox wizard
然后在代码中集成 workbox：
-- -------------------- ---- -------
-- -- -------------
-----------------------------------------------------------------------------------------
-- --- -------
-------------------
------ -----
---
-- -------
----------------------------------
------- ------------
---
---------------------------
----------------------------
-- -- --- - --
------------------------------
-----------------
--- -----------------------------------------
---------- -------------------
--
--
-- ----
------------------------------
---------------------------------
--- -------------------------------
---------- --------------------
-------- -
--- ---------------------------
----------- ---
-------------- -- - -- - -- - -- -- ---- -- -
--
-
--
--PWA 兼容性问题
错误描述
PWA 在不同浏览器下，表现有很大差异，有些浏览器不支持 PWA 相关的 API，在开发过程中需要进行兼容性测试。
解决方案
我们可以使用 Modernizer 库来检测浏览器是否支持 PWA 相关 API。
首先安装 Modernizer：
npm i modernizer -S
然后在代码中使用：
if (!Modernizr.serviceworker || !Modernizr.promises) {
console.log('Your browser is not support PWA.');
}结语
PWA 的优秀特性为 Web 应用带来了极大的提升，但在开发中会遇到各种问题，我们需要从错误中学习，不断优化 PWA 的实现。本篇文章总结了 PWA 开发中常见问题，并提供相应的解决方案，希望对读者在 PWA 开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a64de848841e98942e7731