javascript - Service Worker自动更新流程

Question

我对service worker的更新过程有疑问。在我的项目中有 2 个与 sw 相关的文件:

“sw.js”，放置在网站根目录中，不会被缓存(通过缓存 API 和 Web 浏览器)。

我的 service worker 管理所有静态文件和所有动态 url 页面的缓存。

有时我需要更新它，客户端必须检测到有更新并立即执行。

“sw_main.js”是安装我的软件的脚本。此文件由 Cache API 缓存，因为我的应用程序必须离线工作。

在里面我们可以找到:

var SW_VERSION = '1.2';
navigator.serviceWorker.register("sw.js?v=" + SW_VERSION, { scope: "/" }).then(....

问题是:因为sw_main.js是有缓存的，如果我改了SW_VERSION然后在线部署webapp，所有客户端都不会更新，因为看不到该文件中的更改。

管理 SW 更新过程的最佳方式是什么？

我现在有3种触发sw更新的方式:

1. 推送和同步事件(但我没有实现这些)
2. 仅当 service worker URL 发生变化时才调用 .register() (但是在我的例子中，这是不可能的，因为 sw_main.js 被缓存了，所以我无法更改 SW 网址)
3. 导航到范围内的页面(我想我们有同样的缓存问题第 2 点的内容

我还读到:“如果你的 service worker 与浏览器已有的字节不同，则认为它已更新”。

这意味着如果我更改 sw.js 的内容(未缓存)，Service Worker 将自动检测更新？

谢谢

Answer 1

我找到了 2 个可能的解决方案。

首先我想说最好缓存(使用 pwa 缓存 API)sw.js，因为当你离线时，它会被 sw_main.js 请求。

第一个解决方案:

使用 service worker 的缓存作为后备，并始终尝试通过 fetch() 进入网络优先。这仅适用于 sw.js 和 sw_main.js。您会失去缓存优先策略提供的一些性能提升，但 js 文件的大小非常小，所以我认为这不是大问题。

第二种解决方案:

如果您缓存的 sw.js 文件发生了变化？我们可以挂接到已注册的 Service Worker 上的“onupdatefound”函数。即使您可以缓存大量文件，Service Worker 也只会检查您注册的 service-worker.js 的哈希值。如果该文件只有 1 个小改动，它将被视为新版本。所以这证实了我之前的问题!我试试看!

如果可行，第二种方案最好