Workbox / create-react-app PWA何时更新为新的静态资产？

Question

我有一个用create-react-app制成的PWA。 PWA的代码库会定期更新，我们每天都会发布该应用程序的新版本。

我注意到在两个不同的用例中，有关更新PWA的不同行为。我想谈一谈我注意到的内容，并希望具有工作箱专业知识的人可以解释原因😊

我应该说，我们为此优化了客户，以便尽快更新：

create-react-app

台式机Chrome使用情况

[我们每次发布时，随后访问该应用程序的任何人都会看到“可用的新版本的应用程序”提示，并可以进行升级。该版本通常供工作人员通过我们公司的Intranet访问该应用使用。

Android已添加到主屏幕PWA

另一个用例是在Android手机上安装的同一应用。可在Cloudflare背后的Internet上访问此版本。

在这种情况下，我们还没有看到“可用的新版本的应用”。相反，在某些时候该应用程序会更新，我们会看到新内容。

问题

所以问题是：是什么触发了“添加到主屏幕”上下文中PWA的更新？我不确定，但我提供了一些间接证据：

在此情况下，更新似乎会在7天内发生。有趣的是，静态资产（JS / CSS / HTML）在我们的应用程序中缓存了7天。

我想知道Cloudflare是否是这里的原因？还是静态资产缓存策略？或两者？还是其他？

[如果有人可以阐明一点，我很想学习！

Answer 1

自从我看过

          if ('serviceWorker' in navigator) {
            navigator.serviceWorker.addEventListener('controllerchange', function () {
              if (confirm('New version of app available; update now?')) window.location.reload();
            });
          }  

代码库以来已经有一段时间了。通常，我们建议您使用create-react-app来检测是否有新的服务工作程序已安装且处于this recipe状态。它使用waiting简化了服务工作者和客户端页面之间的某些通信，例如告诉服务工作者调用workbox-window，以便新的服务工作者有机会活动，然后在页面重新加载后重新加载做。

没有将Web应用程序添加到Android主屏幕的特定操作，该操作会导致服务人员的更新检查行为与桌面Chrome有所不同。在这两种情况下，都会出于“服务工作者生命周期”指南的skipWaiting()中概述的原因而对更新的服务工作者进行检查。

如果您注意到环境之间的差异，那么是的，听起来CDN缓存可以解释它。特别是，如果您的this section（或称为它的任何内容）是通过CDN提供的，则需要确保CDN清除了文件的旧副本，并将其替换为最新版本的版本部署时间。如果您不这样做，它将解释您所看到的行为。