Workbox/create react应用程序PWA何时更新为新的静态资产



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

我注意到,在两个不同的用例中,PWA的更新有不同的行为。我想谈谈我所注意到的,我希望有人能解释为什么

我应该说,我们为客户优化,并尽快更新:

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

桌面Chrome使用情况

每次我们发布时,任何访问该应用程序的人都会看到"可用应用程序的新版本"提示,并进行升级。此版本通常由通过我们公司内部网访问该应用程序的工作人员使用。

Android添加到主屏幕PWA

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

在这种情况下,我们从未见过"新版本的应用程序可用"。相反,在某个时刻,应用程序会更新,我们会看到新的内容。

问题

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

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

我想知道Cloudflare是否是这里的原因?还是静态资产缓存策略?还是两者兼而有之?还是别的什么?

如果有人能给我一些启示,我很想学习!

我已经有一段时间没有研究create-react-app代码库了。通常,我们建议使用此方法来检测何时安装了新的服务工作者并处于waiting状态。它使用workbox-window来简化服务工作者和客户端页面之间的一些通信,比如告诉服务工作者调用skipWaiting(),这样新的服务工作者就有机会激活,然后重新加载页面。

在Android主屏幕上添加网络应用程序并不会导致服务人员的更新检查行为与桌面Chrome不同。在这两种情况下,由于"service worker Lifecycle"指南本节中概述的原因,都会对更新的service worker进行检查。

如果你注意到环境之间的差异,那么是的,听起来CDN缓存可以解释这一点。特别是,如果你的service-worker.js(或它的名称)是通过CDN提供的,你需要确保每次部署时,CDN都会清除文件的旧副本,并用你最新版本的版本替换它。如果你不这样做,它将解释你所看到的行为。

最新更新