在生产中更改或更换 Service Worker 的正确步骤是什么？答案

【问题标题】：What are the proper steps for changing or swapping out Service Workers in Production?在生产中更改或更换 Service Worker 的正确步骤是什么？
【发布时间】：2020-01-17 15:51:05
【问题描述】：

我有一个内置在 Angular 中的 PWA，它在生产中，并且正在使用 sw-precache 服务工作者。这是在 Angular 拥有 @angular/pwa 包之前。如果我想切换并开始使用 Angular sw，我该怎么做呢？

我需要以编程方式为用户处理这个问题。我认为我需要获取已注册的 SW，检查旧 SW 的名称，取消注册（清除缓存？），然后注册新的。就这么简单吗？我觉得服务人员和处理缓存会有一些问题。然而，我还没有找到这个过程的实际例子。

任何代码示例将不胜感激。谢谢！

【问题讨论】：

如果你只是从 index.html 中删除旧的清单引用并运行 ng add @angular/pwa 来添加一个新的，这还不够吗（让应用程序使用新的）？
我的用例是在已经上线的生产状态下处理这个问题，其中用户已经有一个正在运行的带有缓存的软件。您的建议可能适用于本地开发环境或新用户，但对于当前最终用户，更改清单并不会删除这些用户在其浏览器上已经拥有的正在运行的软件。
默认情况下，Angular CLI 不会将 service worker 添加到开发环境中，尽管我认为不会有区别（您可以在 http 服务器中启动应用程序并在本地测试它）。我要说的是，如果您的 index.html 指向一个新的工作人员，那么您的应用程序应该使用该工作人员。而老工人，会留下来，但不会被使用。只是在这里大声思考

标签： angular service-worker progressive-web-apps angular-service-worker

【解决方案1】：

基本上，您需要确保“取消注册”旧的 service-worker。如果您通过原理图添加@angular/pwa，他们还会为您创建一个名为safety-worker.js 的文件，在他们的文档中，该文件正是用于此目的：当您想要删除旧的软件时，您可以通过简单地使用该文件将 safety-worker.js 重命名为您的 sw-precache 工作人员的名称。该文件还可能包含删除旧缓存的说明（您需要自己添加）。安全工作者的文档可以在in the official documentation找到。

您已经可以使用对 ngsw-worker.js 的新引用更新清单文件，因为在删除旧 SW 后，下次访问该页面时，将安装新 SW 并接管后续访问。

【讨论】：

谢谢！很高兴知道这一点。但是，有没有办法从 angular.json 配置或以某种方式以编程方式配置到旧 sw url 的 safety-worker.js 路径？在--prod构建之后在/www文件夹中手动更改它肯定会太麻烦。
还有实现此功能后删除旧缓存的代码示例吗？安全工作者文件中没有说明，但看起来我可以在 saftey-worker.js 文件中返回取消注册承诺后进行缓存删除，但每次我执行 --prod 构建时都必须手动添加.

【解决方案2】：

为您的 Service Worker 查看推荐的食谱。 https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users。所以你可以通知你的用户有一个新的 Service Worker 可用并且他们可以得到它。希望对你有帮助。

【讨论】：