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

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

我正在使用带有 Webpack 的默认 Vue.js 模板（vue init webpack my-project）在新项目中

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

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

Console

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

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

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

我已将此代码添加到firebase.json, then npm run build尝试删除 Service Worker，但问题仍然存在

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/ https://jsfiddle.net/uydjzw13/

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

问题：

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

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

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

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

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

我终于找到了解决方案！

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

1 安装this https://github.com/NekR/self-destroying-sw/tree/master/packages/webpack-remove-serviceworker-pluginwebpack 插件（如果您在项目中使用 webpack）

npm install webpack-remove-serviceworker-plugin

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

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

3 添加插件到插件：[ ]在该文件中（不要放入;如果您不在项目中使用它们）：

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

4 改变这一点service-worker.jsfilename 为您之前调用的 Service Worker 的名称（您需要删除的文件名。加载页面时，您可以在开发人员工具的网络选项卡中找到其名称）

5 再次构建项目并部署

如果你不使用webpack，你可以尝试这样做this https://github.com/w3c/ServiceWorker/issues/1258- 将旧的 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);
  }
});