2

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

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

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

为了从 Firebase 获取实际的当前文件，我（以及所有以前的访问者）现在必须每次都硬刷新站点（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"}] }
    ]
  }
}

上一个项目中的 Service Worker 代码

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

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

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

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

问题：

有没有办法从所有站点访问者的浏览器中删除旧的服务工作者，以便他们总是获得新部署的版本？也许我可以用 Webpack 或 Firebase 以某种方式做到这一点？

如果我只是从 Firebase 中删除先前使用服务人员部署的版本，它会得到修复吗？

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

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

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

4

3 回答 3

4

我终于找到了解决方案！

因此，如果您有同样的问题，请执行以下操作：

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，你可以尝试这样做-用一个取消注册的服务工作者替换旧的服务工作者：

registration.unregister().then(async () => {
  // optionally, get controlled pages to refresh:
  for (const client of await clients.matchAll()) {
    client.navigate(client.url);
  }
});
于 2018-01-10T13:28:23.837 回答
1

看看这个合并的拉取请求，它是在--skip-plugins哪里实现的，你可以在其中指定你想要忽略的插件的名称npm run build或类似的东西。关闭 PWA 插件似乎是个好主意。

于 2019-10-08T15:28:41.227 回答
0

我认为这取决于您的服务人员在做什么以及它是如何做的。Google 的这篇文章谈到了与缓存代码的服务工作者有关的困难，他们建议使用这个库。

什么是服务人员？

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

历史比较

在许多方面，缓存代码看起来就像互联网在 1990 年代后期的工作方式。那时您可以进入文件夹的浏览器历史记录并打开文件夹并获得一个部分工作的网站，即使在离线时也是如此。

风险

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

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

这是最糟糕的情况，因为解决此问题的唯一方法是让用户进入开发人员面板并删除服务人员，或清除他们的浏览器数据，但他们可能永远不知道这样做，只是认为网站已损坏.

于 2018-01-08T21:00:00.943 回答