PWA何时以及如何更新？

Question

据我所知,一旦你在PWA的网站上点击"添加到主屏幕",浏览器就会使用提供的清单文件和源生成一个.apk,并像普通应用程序一样安装它.

我注意到,当我更新网站时,该应用程序还会显示更新的内容,这表明该应用程序只是访问该网站的包装器.我还注意到网站的更新没有立即显示,我认为这是由于内部缓存.

我的问题是,我的假设是否正确？或者更一般地说,PWA何时以及如何更新并且有没有办法在客户端计算机上强制更新？

Answer 1

无缓存方案(无服务工作者):只有在使用Service worker时才会缓存PWA应用程序.Manifest.json将帮助您将网络应用程序添加到主屏幕,并带有图标并打开,不带地址栏.如果您没有服务人员或浏览器不支持,则每次都会重新加载网页.没有缓存.

缓存场景(使用服务工作者):假设您已配置服务工作者,服务工作者可以通过延迟加载或预取为缓存配置的文件进行缓存(您可以包含或排除从html,CSS,图像到JSON /的任何缓存) XML API响应).

在初始缓存之后,服务工作者将使用缓存来根据您从下面实现的缓存方法来提供应用程序网络请求.

• 缓存回退到网络
• 网络回退到缓存
• 然后缓存网络

大多数应用程序由于性能优势选择预缓存,并在加载时查找新文件,如果发现任何更改将在下一个会话中加载或提示用户刷新.使用此解决方案,每个文件将为服务工作者缓存的每个文件都有一个长哈希字符串.在加载每个应用程序时,将获取来自服务器的哈希代码以匹配并找到需要更新的文件,并且将在单独的服务工作线程中更新相同的文件.您可以在网络选项卡中注意到这一点 - > chrome developer tools中的服务工作者响应.

如果选择网络拳头方法,则可以避免在初始加载时显示旧内容,但缓存带来的显着性能优势.

Answer 2

只有两个事件...

本质上，只有两个事件会自动触发 PWA 更新：

1. 链接的变化manifest.json；例如更改的图标文件或更改的scope或start_url。
2. 控制中的一个字符更改service-worker.js。因此，如果您将版本号存储const在此文件中的 a中并对其进行更改，则会触发 PWA 的更新。

当检测到更改时，新版本通常只会在下一次 PWA 加载时激活。因此，总而言之，需要两次重新加载才能看到更改。

最终如何处理更新最终由service-worker.js. 可以根据 PWA 资产的规模和波动性定义不同的更新策略。也可以立即激活新服务。

但是，有一个重要的警告。确保由您的资产服务器文件设置的浏览器缓存到期指令设置.htaccess为非常短的持续时间（例如hours）或什至没有。如果不这样做，将导致在浏览器中所看到的并不是天的任何变化来的manifest.json，也不是service-worker.js。

有关 Service Worker 行为的更多详细信息，请访问Google Web Fundamentals。