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

Question

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

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));

      });

  });

然而，该帖子建议使用这个增强版本：

  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 操作所必需的。
• 确保更改的文件获得不同的哈希值，我见过它们没有被重命名的情况，因此您会得到旧代码。
• 结合一种安慰版本号的方法，直到您对操作感到满意为止。

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