如何使用新部署的网站版本（Firebase）从用户浏览器中删除在先前部署中注册的服务工作人员？

Question

我已通过现有项目将网站的新版本（之前在 Polymer 上，现在在 Vue.js 上）部署到 Firebase。

我vue init webpack my-project在新项目中使用默认的 Vue.js 模板和 Webpack ( )

---

现在我已经部署了新版本，当我打开站点时，我只看到一个缓存的 shell，我认为这是服务工作线程的错

为了从 Firebase 获取实际的当前文件，我（以及所有以前的访问者）现在每次都必须硬刷新网站（Ctrl+F5在 Firefox 中）

安慰

现在，在浏览器控制台（网络选项卡）中我看到：

• 红色的服务人员，它说：(failed) net::ERR_INSECURE_RESPONSE当我正常打开网站时（没有硬刷新）

• 有些文件的大小属性为(from ServiceWorker)- 这些文件具有，cache-control:max-age=3600但自从我部署新版本的站点以来已经一个多小时了。看起来 Service Worker 本身没有任何标头，也许这就是它不断加载旧文件的原因

---

我已将此代码添加到firebase.json，然后npm run build尝试删除服务工作人员，但我仍然遇到问题

Firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      { "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
    ]
  }
}

上一个项目中的 Service Worker 代码

我在新部署的版本上没有使用任何服务人员。但之前的部署注册了一个服务工作者

我使用的是 Polymer 1.0 框架库中的默认 sw-precache 组件，该组件是在我使用的预配置 Polymer 入门套件模板中构建的。Service Worker 在构建时生成

捆绑 > service-worker.js： https://jsfiddle.net/uydjzw13/

解绑 > service-worker.js： https: //jsfiddle.net/t42fdgow/

---

问题：

有没有办法从所有站点访问者的浏览器中删除旧的 Service Worker，以便他们始终获得新部署的版本？也许我可以用 Webpack 或 Firebase 来做到这一点？

---

如果我只是从 Firebase 中删除以前使用 Service Worker 部署的版本，它会得到修复吗？

或者，也许我可以部署另一个带有服务工作线程的版本，该版本的唯一功能是删除所有以前的缓存并取消注册以前的服务工作人员（如果可能的话）？

或者我可以使用这样的东西吗？：https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister

我不知道如何正确地做到这一点，并且不意外地注册更多我也无法摆脱的服务人员。

Answer 1

我终于找到了解决方案！

因此，如果您遇到同样的问题，只需执行以下操作：

1 安装此webpack 插件（如果您在项目中使用 webpack）

npm install webpack-remove-serviceworker-plugin

2 在webpack.prod.conf.js文件中创建常量（或任何您的生产配置名称）

const RemoveServiceWorkerPlugin = require('webpack-remove-serviceworker-plugin')

3 将插件添加到该文件中的plugins: [ ];中（如果您的项目中不使用它们，则不要放在那里）：

new RemoveServiceWorkerPlugin({ filename: 'service-worker.js' });

4 将service-worker.js文件名更改为您之前调用的服务工作线程（您需要删除的文件名。加载页面时，您可以在开发人员工具的网络选项卡中找到其名称）

5 再次构建项目并部署

如果您不使用 webpack，您可以尝试这样做- 将旧的 Service Worker 替换为自行取消注册的 Service Worker：

registration.unregister().then(async () => {
  // optionally, get controlled pages to refresh:
  for (const client of await clients.matchAll()) {
    client.navigate(client.url);
  }
});