如何从用户'；使用新部署的站点版本（Firebase）的浏览器？

我已经在现有项目的基础上将我的站点的新版本（它在Polymer上，现在在Vue.js上）部署到Firebase

我在新项目中使用默认的Vue.js模板和Webpack（

Vue init Webpack my project

）

---

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

为了从Firebase I（以及所有以前的访问者）获得实际的当前文件，现在必须每次硬刷新站点（

Ctrl+F5

，在firefox中）

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

• 红色的服务人员，上面写着：

  （失败）net:：ERR\u unsecure\u RESPONSE

  当我正常打开站点时（没有硬刷新）

• 一些文件的大小属性为

  （来自ServiceWorker）

  -这些文件具有

  缓存控制：max age=3600

  ，但自从我部署新版本的站点以来，已经一个多小时了。看起来服务工作者本身没有任何头，也许这就是为什么它一直加载旧文件的原因

---

我已将此代码添加到

firebase.json

，然后

npm run build

尝试删除服务工作者，但仍然存在问题

Firebase.json 来自上一个项目的服务人员代码 我没有在新部署的版本上使用任何服务人员。但是之前的部署注册了一个服务工作者

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

Bundled>service worker.js:

Unbundled>service worker.js:

---

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

---

如果我只是用Firebase中的service worker删除以前部署的版本，它会得到修复吗

或者，如果可能的话，我可以部署另一个版本，其中包含一个service worker，该服务worker只有一个功能可以删除所有以前的缓存并注销以前的service worker

或者我可以用这样的东西吗

---

我不知道如何正确地进行注册，也不知道如何不意外地注册更多我也无法摆脱的服务人员。

我认为这取决于您的服务人员正在做什么以及如何做。这篇来自谷歌的文章谈到了与缓存代码的服务人员相关的困难，他们建议使用这篇文章

什么是服务人员？

服务工作者位于客户端和服务器之间，驻留在用户浏览器中。他们有几个角色，可以执行许多任务。其中一项任务是缓存网站（它的shell）中的脚本/代码

历史比较

在许多方面，缓存代码看起来就像上世纪90年代末互联网的工作方式。那时，您可以进入文件夹的浏览器历史记录并打开文件夹，甚至在脱机时也可以获得一个部分工作的网站

风险

服务人员可以执行与查找存储在计算机上的网站文件夹相同的任务，通过在调用服务器获取文件之前执行此操作，可以使您的网站看起来和感觉超级快速，因为服务人员提供了您网站的本地存储版本

然而，这是一个巨大的风险。如果在用户访问url时未正确设置服务人员，则服务人员将始终首先指向网站的缓存版本。这意味着，无论您更改或交付什么代码，客户机都不会真正要求它

这是最糟糕的情况，因为解决这一问题的唯一方法是用户进入“开发人员”面板，删除服务人员，或清除浏览器数据，但他们可能永远不知道该怎么做，只是相信网站坏了

我终于找到了解决办法！ 因此，如果您有相同的问题，请执行以下操作：

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

npm安装网页包删除serviceworker插件

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

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

3将插件添加到该文件中的插件：[（如果在项目中未使用它们，请不要将

；

放在那里）：

newremoveserviceworkerPlugin（{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);
  }
});

看看这个合并的地方，它实现了标志
--skip plugins
，您可以指定在
npm run build
或类似的过程中要忽略的插件的名称。关闭PWA插件似乎是个好主意。
很遗憾，我对服务人员一无所知，我不知道如何处理这些信息。我使用了Polymer framework库中的默认预构建sw precache组件。我只是想摆脱它（不只是从我的开发工具中删除它，而是让所有的网站访问者都不再拥有它）。嗨，一个小小的改变，它应该是
npm安装webpack删除serviceworker插件--save de
registration.unregister().then(async () => {
  // optionally, get controlled pages to refresh:
  for (const client of await clients.matchAll()) {
    client.navigate(client.url);
  }
});