如何使用新部署的网站版本（Firebase）从用户的浏览器中删除在先前部署中注册的服务工作者？ [英] How to remove a service worker registered in previous deploy from users' browsers with the newly deployed version of site (Firebase)?

问题描述

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

I've deployed a new version of my site (It was on Polymer, now on Vue.js) to Firebase over an existing project.

在新项目中使用默认的Vue.js模板和Webpack（ vue初始化webpack我的项目）

I'm using default Vue.js template with Webpack (vue init webpack my-project) in the new project

现在我已经部署了新版本，当我打开站点时，我看到的只是一个缓存的外壳，我认为那是服务人员的错

Now that I've deployed the new version, when I open the site I see just a cached shell, I assume that's the service worker's fault

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

In order to get actual current files from Firebase I (and all the previous visitors) have to now hard refresh the site every time (Ctrl+F5 in firefox)

现在，在浏览器控制台（网络标签）中，我看到：

Now, in browser console (network tab) I see:

• 红色的服务人员，它说：（失败）net :: ERR_INSECURE_RESPONSE 站点（无需硬刷新）

某些文件的大小属性为（来自ServiceWorker）-这些文件具有 cache-control：max-age = 3600 ，但是自从我部署了该网站的新版本以来已经一个多小时了。看来服务工作者本身没有任何标题，这也许就是为什么它会继续加载旧文件的原因

Some of the files have size property of (from ServiceWorker) - these files have cache-control:max-age=3600 but it's been more than an hour since I've deployed new version of the site. It looks like the service worker itself doesn't have any headers, maybe that's why it keeps loading the old files

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

I've added this code to firebase.json, then npm run build trying to remove the service worker, but I still have the issue

{
  "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 code from the previous project

I don't use any service workers on the newly deployed version. But the previous deploy registered a service worker

我使用的是Polymer 1.0框架库中的默认sw-precache组件，该组件是在预先配置的Polymer入门工具包模板中构建的，我用了。服务人员是在构建时生成的

I was using the default sw-precache component from Polymer 1.0 framework's library that was built in the pre-configured Polymer starter kit template that I used. Service worker was generated at build time

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

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

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

Is there a way to remove that old service worker from all the site visitors' browsers so that they always get the newly deployed version? Maybe I can do that with Webpack or Firebase somehow?

如果我只是删除先前部署的文件，是否可以解决？

Is it going to get fixed if I just delete the previously deployed version with the service worker from Firebase?

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

Or maybe I could deploy another version with a service worker that has the only function that deletes all previous cache and unregisters previous service worker, if that's possible?

或者我可以使用类似的方法吗？： https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister

Or can I use something like this maybe?: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister

我不确定如何正确地做到这一点，并且不确定是否还会注册其他我也将无法摆脱的服务人员。

I'm not sure how to do that correctly and not accidentally register any more service workers that I also won't be able to get rid of.

推荐答案

我终于找到了解决方案！

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

I finally found the solution!

So if you have the same problem, just do this:

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

1 Install this webpack plugin (if you're using webpack in your project)

npm install webpack-remove-serviceworker-plugin

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

2 Create the constant in webpack.prod.conf.js file (or whatever your production config is called)

const RemoveServiceWorkerPlugin = require（'webpack-remove-serviceworker-plugin'）

3将插件添加到插件中：[] 在该文件中（不要将; 放在项目中）：

3 Add the plugin into plugins: [ ] in that file (don't put ; there if you don't use them in your project):

new RemoveServiceWorkerPlugin（{filename：'service-worker.js'}）;

4更改了 service-worker.js 文件名到您以前称为服务工作者的名称（您需要删除的名称）。加载页面后，您可以在开发人员工具的网络标签中找到其名称）

4 change that service-worker.js filename to whatever your service worker was called previously (the one you need to remove. You can find its name in the network tab of developer tools when page is loaded)

5再次构建项目并部署

5 Build the project again and deploy

如果您不使用webpack，则可以尝试执行此 -用取消注册的旧服务人员替换：

If you don't use webpack, you can try to do this - replace the old service worker with one that unregisters itself:

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

这篇关于如何使用新部署的网站版本（Firebase）从用户的浏览器中删除在先前部署中注册的服务工作者？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！