代码之家 › 专栏 › 技术社区 › Un1

如何使用新部署版本的站点(Firebase)从用户浏览器中删除在先前部署中注册的服务工作者?

sw-precache service-worker browser-cache webpack firebase

Un1 · 技术社区 · 6 年前

我已经在现有项目的基础上,向Firebase部署了我的网站的新版本(它以前在Polymer上,现在在Vue.js上)。

我正在使用默认Vue。带Web包的js模板( vue init webpack my-project )在新项目中

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

为了从Firebase I(和所有以前的访问者)获得实际的当前文件,现在必须每次都硬刷新站点( Ctrl+F5 在firefox中)

安慰

现在,在浏览器控制台(网络选项卡)中,我看到:

红色的服务人员,上面写着: (failed) net::ERR_INSECURE_RESPONSE 正常打开站点时(无硬刷新)
某些文件的大小属性为 (from ServiceWorker) -这些文件具有 cache-control:max-age=3600 但我部署新版本的网站已经一个多小时了。看起来服务工作者本身没有任何头,也许这就是为什么它一直加载旧文件的原因

我已将此代码添加到 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"}] }
    ]
  }
}

上一个项目中的服务人员代码

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

我使用的是Polymer 1.0框架库中的默认sw precache组件,该组件构建在我使用的预配置Polymer starter kit模板中。在构建时生成了服务工作者

捆绑式>服务人员。js公司: https://jsfiddle.net/uydjzw13/

未绑定(&T);服务人员。js公司: https://jsfiddle.net/t42fdgow/

问题:

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

如果我只是用Firebase的服务人员删除以前部署的版本,它会得到修复吗?

或者,如果可能的话,我可以部署另一个带有服务工作者的版本,该服务工作者的唯一功能是删除所有以前的缓存并注销以前的服务工作者?

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

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

3 回复 | 直到 6 年前

Community holdenweb 4 年前

我终于找到了解决办法!

因此,如果您有相同的问题,请执行以下操作:

1安装 this webpack插件(如果您在项目中使用webpack)

npm install webpack-remove-serviceworker-plugin

2在中创建常量 网页包。prod.conf.js 文件(或任何您的生产配置)

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

3将插件添加到 插件:[] 在该文件中(不要 ; 如果您在项目中未使用它们,则会出现):

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

4改变这个 服务人员。js公司 您的服务人员之前被调用的名称(您需要删除的名称。加载页面时,您可以在开发人员工具的网络选项卡中找到其名称)

5重新构建项目并部署

如果你不使用webpack,你可以尝试 this -将旧的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);
  }
});

Leonardo Santos 5 年前

看看这个合并的 Pull Request 在何处实施该标志 --skip-plugins 您可以在其中指定要在过程中忽略的插件的名称 npm run build 或者类似的东西。关闭PWA插件似乎是个好主意。

Jason Allshorn 6 年前

我认为这取决于你的服务人员在做什么以及如何做。这 item Google谈到了与缓存代码的服务人员相关的困难,他们建议使用 library .

什么是服务人员?

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

历史比较

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

A风险

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

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

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