PWA 何时以及如何更新自身？

Posted 2023-02-16

【中文标题】PWA 何时以及如何更新自身？

【英文标题】：When and how does a PWA update itself?

【发布时间】：2018-09-19 05:39:02

【问题描述】：

据我所知，一旦您在 PWA 网站上单击“添加到主屏幕”，浏览器就会使用提供的清单文件和源生成一个 .apk，然后像普通应用一样安装它。

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

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

【问题讨论】：

相关：***.com/questions/47801297/…

【参考方案1】：

无缓存场景（无 Service Worker）：您的 PWA 应用只有在您使用 Service Worker 时才会被缓存。 Manifest.json 将帮助您将 Web 应用程序添加到带有图标的主屏幕，并在没有地址栏的情况下打开。如果您没有 service worker 或者您的浏览器不支持它，那么每次都会重新加载网页。没有缓存。

Cache-On 场景（使用 Service Worker）：假设您已配置 Service Worker，Service Worker 可以通过延迟加载或预取配置为缓存的文件进行缓存（您可以包含或排除缓存从 html、CSS、图像到 JSON/XML API 响应的任何内容）。

在初始缓存之后，Service Worker 将使用缓存来根据您从下面实现的cache approach 为您的应用程序网络请求提供服务。

缓存回退到网络 网络回退到缓存 先缓存后网络

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

如果您选择网络优先的方法，您可以避免在初始加载时显示旧内容，但会失去缓存带来的显着性能优势。

【讨论】：

抱歉劫持了这个帖子，因为@Anand 在这方面做得很好。我正在使用预缓存方法。在笔记本电脑 Chrome 上，当我关闭选项卡并重新打开时，新的服务人员出现了。但在 android Chrome 中，它不会在标签关闭/打开时立即更新。如何在 Chrome Android 上强制更新？

安装的 PWA 会遵守我为某些资源定义的 cache-control 标头吗？

PWA 缓存基于服务工作者，而不是传统的浏览器缓存元数据。查找服务工作者选项，以了解您尝试在 pwa 中对缓存执行的操作。

如果你有一个 PWA，其中一个特定的 js 文件故意不被 service worker 缓存，当你对它进行更改时，它是否更有可能在 ios 中实际更新？我希望能够将更新发布到 js 文件，并确信 iOS 用户在下次打开 Web 应用程序时能够可靠地获取更新。

是的。如果你不缓存它，那么浏览器会做一个常规的 http 调用——而不是通过 service worker 代理。您甚至可以在打开应用程序时检查该 JS 文件并检查更新，如果有更新则刷新应用程序。但是该过程需要后端调用所需的时间，并且您必须在该应用程序加载期间与用户互动 - 就像使用初始屏幕一样。

【参考方案2】：

只有两个事件……

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

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

当检测到更改时，新版本通常只会在下一次 PWA 加载时激活。因此，总而言之，两次重新加载对于看到变化是必要的。

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

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

有关服务工作者行为的更多详细信息，请访问Google Web Fundamentals。

【讨论】：

您好，感谢您的回答！是的，确实，这是一个需要牢记的重要补充。

关于 service-worker.js 的 max-age 设置为较长的​​持续时间：现代浏览器会将 sw.js 的 1d、1w 或 1y 缓存持续时间视为 1 天。这样你就不能永远砖网站。 ***.com/questions/38843970/…