服务工作者自动更新过程

Question

我对服务工作者更新过程存有疑问。 在我的项目中有2个与sw相关的文件：

放置在网站根目录中的

＆＃34; sw.js ＆＃34;将不会缓存（通过缓存API和Web浏览器）。

我的服务工作者管理所有静态文件和所有动态网址页面的缓存。

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

＆＃34;的 sw_main.js ＆＃34;是安装我的sw的脚本。此文件由Cache API缓存，因为我的应用必须脱机工作。

我们可以在里面找到：

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

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

管理SW更新流程的最佳方法是什么？

就像我现在一样，有三种方法可以触发sw更新：

1. 推送和同步事件（但我没有实现这些）
2. 仅当服务工作者URL已更改时才调用.register（） 在我的情况下，它是不可能的，因为sw_main.js被缓存，所以我是 无法更改SW网址）
3. 导航到范围内的页面（我认为我们有相同的缓存问题 第2点）

我还读到了这一点：＆＃34;如果服务工作者的字节与浏览器已有的字节不同，则会被视为已更新＃34;。

这意味着如果我更改了sw.js的内容（未缓存），服务工作者会自动检测更新吗？

谢谢

Answer 1

我发现了两种可能的解决方案。

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

第一个解决方案：

使用服务工作者的缓存作为后备，并始终尝试通过fetch（）进入网络优先级。 这仅适用于sw.js和sw_main.js。 你失去了一些缓存优先策略所带来的性能提升，但js文件的大小非常轻，所以我不认为这是一个大问题。

第二个解决方案：

如果您的缓存sw.js文件已更改？ 我们可以加入＆＃34; onupdatefound＆＃34;注册服务工作者的功能。 即使您可以缓存大量文件，服务工作者也只会检查已注册的service-worker.js的哈希值。 如果该文件只有一点变化，它将被视为新版本。 所以这证实了我之前的问题！我试试吧！

如果有效，第二种解决方案是最好的