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

Question

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

我注意到在两个不同的用例中，我们的 PWA 更新有不同的行为。我想谈谈我所注意到的，我希望有 workbox 专业知识的人可以解释原因

我应该说我们优化了客户端尽快更新：

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

桌面Chrome使用

每次我们发布时，访问该应用程序的任何人随后都会看到 "New version of app available" 提示并开始升级。此版本通常供通过我们公司的内部网访问该应用程序的工作人员使用。

Android 添加到主屏幕 PWAs

另一个用例是 Android 手机上安装的相同应用程序。此版本在 Cloudflare 后面的互联网上访问。

我们从未在这种情况下看到 "New version of app available"。相反，在某个时候应用会更新，我们会看到新内容。

问题

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

这方面的更新似乎会在 7 天内发生。有趣的是，静态资产 (JS / CSS / HTML) 在我们的应用程序中缓存了 7 天。

我想知道 Cloudflare 是否是一个原因？还是静态资产缓存策略？或两者？还是别的？

如果有人可以阐明我很乐意学习！

Answer 1

我已经有一段时间没看过 create-react-app 代码库了。通常，我们建议使用 this recipe 来检测何时安装了新的 service worker 并处于 waiting 状态。它使用 workbox-window 来简化 service worker 和客户端页面之间的一些通信——比如告诉 service worker 调用 skipWaiting() 以便新的 service worker 有机会激活，然后重新加载页面一旦出现。

将 Web 应用程序添加到 Android 主屏幕并不会导致 Service Worker 更新检查行为与桌面 Chrome 不同。在这两种情况下，都会根据 "Service Worker Lifecycle" 指南的 this section 中概述的原因检查更新的 service worker。

如果您注意到环境之间的差异，那么是的，听起来 CDN 缓存可以解释它。特别是，如果您的 service-worker.js（或它的名称）是通过 CDN 提供的，您需要确保 CDN 清除它的旧文件副本并将其替换为您最近构建的版本以及每次部署。如果您不这样做，它会解释您所看到的行为。

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

When do Workbox / create-react-app PWAs update to new static assets?

create-react-app

progressive-web-apps

cloudflare

workbox

桌面Chrome使用

Android 添加到主屏幕 PWAs

问题