如何更新Service Worker？

Question

情况：

在mywebsite.com/game上，我使用以下方式注册了service-worker:

navigator.serviceWorker.register('/service-worker.js', {scope: "/"});

在我的服务器上，'/service-worker.js' 的maxAge为1d。

---

问题：

service-worker.js 有一个严重的bug。它总是显示空白页面，无法获取任何内容。 service-worker.js 必须更改。

问题是当用户访问mywebsite.com/game时，它会显示一个空白页面，并且不再进行任何操作。我无法让客户端获取新的service-worker.js。

如何使客户端获取新的service-worker.js？

- RainingChain

Answer 1

您所描述的——检查更新 /service-worker.js ——是有默认行为的，自动在符合该文章给出的情况下进行更新：

以下情况之一即触发更新：

• 导航到范围内页面。
• 功能事件，如推送和同步，除非在前24小时内已经进行过更新检查。
• 仅当服务工作者 URL 已更改时才调用 .register()。不过，应避免更改服务工作者 URL。

所有现代网络浏览器 默认忽略您在 /service-worker.js 设置的任何 Cache-Control 标头 , 并直接与 Web 服务器交互以获取最新版本。

如果您希望将其作为“关键开关”使用，则这个 Stack Overflow 回答提供了一些修订后的 service-worker.js 文件的最佳实践。

- Jeff Posnick

---

基于Chromium的浏览器的最新版本根本无法看到任何服务工作者文件的更改，版本控制是确保更改被应用的唯一可靠方法。 - Alliswell

这不是预期的行为，如果您在Chrome中看到这种情况，那么很可能是一个错误。您应该在https://crbug.com/new提供详细信息。 - Jeff Posnick

Answer 2

只需像这样在您的脚本中添加?v=1即可。

navigator.serviceWorker.register('/service-worker.js?v=1', {scope: "/"});

当您更改服务工作者脚本时，请增加脚本版本号。

- andrew_jackson

---

如果页面因之前的 service-worker.js 为空，则此方法无法正常工作。 - RainingChain

在涉及到服务工作者时，这样做是不好的实践。URI 应该始终保持不变，例如 '/service-worker.js'。 - Max Fahl