Angular Service Worker 间歇性地服务旧版本的应用程序

Question

我有一个 Angular 应用程序（7.2.2 版）使用 Angular Service Worker（7.2.12 版）。

Service Worker 间歇性地服务于旧版本的应用程序。刷新时显示新版本，但如果用户关闭并重新打开浏览器选项卡，它将恢复到旧版本，直到下一页重新加载。 ‘/ngsw/state’页面在显示旧版本时也没有报错

我未能始终如一地重现该问题。部分原因是我不确定原因。我经常几周都没有让 service worker 提供旧版本的代码。

我尝试过的一些看起来很有希望的潜在解决方案包括：

正在将 angular 和 service worker 更新到最新版本（当时）。
从 ngsw-config.json 中删除缓存以防止哈希不匹配。
在多个代码位置添加更新检查。
定期检查更新。
有可用更新时强制重新加载 – 这种情况有时会发生，但有时需要手动重新加载才能获得新版本。

Answer 1

您可能想在此处查看详细信息。简而言之，请注意 service worker 的注销过程很慢并且是在后台完成的。为了在开发阶段快速往返，您可能需要手动注销然后重新加载。

在以下位置查看信息： https://love2dev.com/blog/how-to-uninstall-a-service-worker/

原始 GIST 指出我们应该在启动之前清理我们的 service worker：

  self.addEventListener("activate", function(e) {

    self.registration.unregister()
      .then(function() {

        return self.clients.matchAll();

      })
      .then(function(clients) {

        clients.forEach(client => client.navigate(client.url));

      });

  });

然而 post 建议使用此增强版：

  self.addEventListener("activate", function(e) {

    self.registration.unregister()
      .then(function() {

        return self.clients.matchAll();

      })
      .then(function(clients) {

        clients.forEach(client => {

          if (client.url && "navigate" in client){

            client.navigate(client.url))

      }

  });

});

我也会确保：

检查开发构建是否潜入构建周期，我已经看到开发人员认为某些东西是在 PROD 模式下构建的，但事实并非如此
确保您使用的是 HTTPS，在本地使用 NGROK。这似乎是获得良好 PWA/SW 操作所必需的。
确保更改的文件获得不同的哈希值，我曾见过未重命名文件的情况，因此您得到的是旧代码。
结合一种安慰版本号的方法，直到您对操作感到满意为止。

我希望其中的一些建议能帮助您朝着正确的方向前进。

Angular Service Worker 间歇性地服务旧版本的应用程序

Angular Service Worker intermittently serving old version of application

angular

angular-service-worker