什么是 PWA
PWA（Progressive Web App）是一种新型的 Web 应用程序模型，可以让 Web 应用程序的用户体验接近原生应用程序。PWA 可以离线访问、加载速度快、可以被添加到主屏幕、可以推送通知等特性，这些特性使得 PWA 看起来和感觉上都像原生应用程序。
PWA 开发中的踩坑问题
在 PWA 开发过程中，我们可能会遇到一些问题，下面列举了一些常见的问题及其解决方案。
1. Service Worker 不生效
Service Worker 是 PWA 的核心技术之一，它可以用来缓存资源、离线访问等。但是在实际开发中，我们可能会遇到 Service Worker 不生效的问题。
解决方案：
- 确保 Service Worker 注册成功：在注册 Service Worker 的代码中，可以通过
navigator.serviceWorker.register()方法返回的 Promise 对象来判断注册是否成功。 - 确保 Service Worker 路径正确：Service Worker 的路径应该是相对于网站根目录的路径。
- 确保 Service Worker 更新成功：在更新 Service Worker 的代码中，可以通过
sw.onstatechange事件来监听更新状态，确保更新成功。
示例代码：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------------------
-------------------- -- -
-------------------- ------ ------
--
-------------- -- -
-------------------- ------ ------- ------
--
--- -------------------- ---- -------
-- -- ------- ------
-- ---------------- -- ---------- -
------------------------------------------
-------------------- -- -
-------------------------------------------- -- -- -
----- -- - -----------------------
---------------------------------- -- -- -
-- --------- --- ------------ -
-------------------- ------ ------
-
--
--
-----------
--
-2. 缓存策略不正确
在 PWA 中，我们可以使用 Service Worker 来缓存资源，从而实现离线访问等功能。但是如果缓存策略不正确，可能会导致缓存资源过期或者缓存不生效的问题。
解决方案：
- 确保缓存策略正确：在使用 Service Worker 缓存资源时，应该根据实际情况选择合适的缓存策略，比如
CacheFirst、NetworkFirst、StaleWhileRevalidate等。 - 确保缓存资源更新成功：在更新缓存资源时，应该使用
cache.put()方法，并且在更新成功后应该返回response对象。
示例代码：
-- -------------------- ---- -------
-- ----- ----------
------------------------------ ------- -- -
------------------
---------------------------
---------------- -- -
-- ---------- -
------ --------
- ---- -
------ --------------------
---------------- -- -
----- --------- - ----------
----------------------
------------- -- -
------------------------ ---------
--
------ ----------------
--
-
--
-
--3. 应用安装失败
在 PWA 中，我们可以将应用添加到主屏幕，从而实现类似原生应用程序的体验。但是在实际开发中，我们可能会遇到应用安装失败的问题。
解决方案：
- 确保应用满足添加到主屏幕的条件：应用需要满足一定的条件才能被添加到主屏幕，比如应用需要使用 HTTPS 协议、需要有 Web App Manifest 文件等。
- 确保应用已经添加到主屏幕：在应用添加到主屏幕后，可以通过
beforeinstallprompt事件来监听应用是否已经被添加到主屏幕。
示例代码：
// 监听 beforeinstallprompt 事件
window.addEventListener('beforeinstallprompt', (event) => {
event.preventDefault()
const deferredPrompt = event
// 显示添加到主屏幕的按钮
})总结
PWA 是一种新型的 Web 应用程序模型，可以让 Web 应用程序的用户体验接近原生应用程序。在 PWA 开发过程中，我们可能会遇到一些问题，比如 Service Worker 不生效、缓存策略不正确、应用安装失败等。针对这些问题，我们可以采取一些解决方案来解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6515fb3b95b1f8cacde5836c