随着移动端的普及，PWA（Progressive Web Apps）也越来越受到开发者们的重视。PWA 具有 APP 的体验，但却比 APP 更加便捷和省资源。但在使用 PWA 的过程中，我们可能会遇到更新后无法访问的问题。本文从以下几个方面对此问题进行了详细阐述，并提供了解决方案和示例代码。
问题原因
在 PWA 中，当我们访问一个网站并将其添加到主屏幕，会生成一个叫做 Service Worker 的缓存文件。每一次访问网站时，Service Worker 会自动向服务器请求资源，然后将这些资源缓存到本地，以便我们在没有网络连接的情况下仍然可以访问网站。同时，当网站有更新时，Service Worker 也会自动更新缓存文件。
但是，当 Service Worker 更新后，新的缓存文件中包含了新的代码，而浏览器中还保存着旧的 Service Worker，导致访问网站时无法加载新缓存的资源，从而出现了无法访问的问题。
解决方案
为了解决这个问题，我们需要手动删除旧的 Service Worker，从而让浏览器重新注册新的 Service Worker。
方法 1：在开发者工具中手动删除 Service Worker
我们可以打开 Chrome 浏览器的开发者工具，通过以下步骤删除旧的 Service Worker：
- 打开开发者工具
- 选择 Application 标签页
- 在左侧的 Service Workers 中找到旧的 Service Worker
- 点击 Unregister 按钮
但是，这种方法需要用户手动操作，对于一些不了解技术的普通用户来说，可能无法有效解决问题。
方法 2：使用 workbox-window 库
Workbox 是 Google 推出的一个 Service Worker 库，其中的 workbox-window 库可以帮助我们自动清理旧的 Service Worker。通过以下步骤使用 workbox-window：
- 安装 workbox-window 库：
npm install workbox-window - 在入口文件中引入 workbox-window：
import { Workbox } from "workbox-window"; - 在入口文件的最后加入以下代码：
if ("serviceWorker" in navigator) {
const wb = new Workbox("/sw.js");
wb.register()
.then(reg => {
reg.update();
})
.catch(e => console.error("Error during service worker registration:", e));
}以上代码中，/sw.js 是 Service Worker 文件所在的位置，我们可以根据实际情况进行修改。
这样一来，每一次用户打开网站时，workbox-window 会自动清理旧的 Service Worker，然后注册新的 Service Worker，从而解决更新后无法访问的问题。
示例代码
下面是一个使用 workbox-window 库的示例代码：
-- -------------------- ---- -------
------ - ------- - ---- -----------------
-- ---------------- -- ---------- -
----- -- - --- ------------------
-------------
--------- -- -
-------------
--
-------- -- -------------------- ------ ------- ------ --------------- ----
-总结
本文介绍了 PWA 更新后无法访问的问题，并提供了两种解决方法：在开发者工具中手动删除 Service Worker 和使用 workbox-window 库。其中，使用 workbox-window 库可以自动清理旧的 Service Worker，解决了手动操作的问题，推荐使用。要注意的是，在使用 Service Worker 时，我们应该尽可能保证其更新时的稳定性和可用性，以避免不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d462a1b5eee0b525bf2112