angular-service-worker - Angular 5 ServiceWorker 未加载更新的 ngsw.json

Question

不确定这是一个潜在的错误还是我做错了什么。

我正在使用基于 cli 的应用程序，@angular/serviceworker 5.1.0 @angular/cli 1.6.0SW 的实现正是由 book

我将尝试描述发生了什么:

考虑一个正在运行服务工作线程的应用程序。软件缓存来自 ngsw.json 的数据。

现在，我将使用新的 budle hash 部署一个新的 ng build --prod 文件。

当前正在运行的应用程序的 ServiceWorker 将加载旧的缓存文件，除非明确要求通过 SwUpdate 服务进行更新。没关系。

但事情是这样的。打开新选项卡并加载应用程序的新实例后，它仍会加载旧文件。在网络日志中，没有获取新的 ngsw.json。

两个选项卡是否使用相同的 ServiceWorker？

ServiceWorker 如何知道何时检查新的 ngsw.json？

最奇怪的事情: 有时按 F5 后 ServiceWorker 仍在加载旧文件。有时它会加载新文件。有时它会尝试使用旧哈希获取文件并失败 (404)!

到目前为止我还没有弄清楚任何模式。

浏览器缓存是否可能导致问题？我尝试将服务器响应 header 添加到 no-cache 和 expire: 0 但没有区别。

Answer 1

在回答这个问题时，最新版本的 ngsw (@angular/service-worker) 是 8.2.13。

Do both tabs use the same ServiceWorker?

是的，两个选项卡都激活同一个服务 worker 。这样做是因为数据完整性，如果您让一个 service worker 在不同的选项卡上以不同的方式处理另一个 service worker，这将成为维护的噩梦。

How does the ServiceWorker know when to check for new ngsw.json?

当您调用生产构建时，ngsw.json 会更新，正如您所确定的那样:ng build --prod。 Service Worker 不会将对 ngsw.json 的更新视为对 Service Worker 的更新。因此，它可以更新 Service Worker 的缓存，而无需创建新版本的 Service Worker，只需简单刷新即可，无需关闭浏览器选项卡。

如果更新了 service worker，应该安装一个新的 service worker 但它不会激活，直到所有关联的浏览器客户端(选项卡)都被安装已关闭，这样可以安全更新。

Sometimes upon hitting F5 the ServiceWorker still loading old files. Sometimes it loads the new files. Sometimes it tries to fetch files with old hash and fails (404)!

对于服务 worker ，刷新按钮的行为不正常。如果您正在进行硬重新加载，您将绕过 Service Worker 并请求新数据。此操作不一定会更新服务 worker 的缓存。因此，您可能会发现下一次刷新会加载旧数据，这些数据是从与旧 Service Worker 关联的缓存中检索到的。

Is it possible browser caching is causing problems?

要手动使 service worker 的缓存无效，请进入 DevTools > Application(选项卡)> Cache storage 并删除其内容。