在 Safari 上发布新版本后，我的 PWA Web 应用程序一直显示旧版本（但在 chrome 上运行良好）？答案

【问题标题】：My PWA web app keep showing old version after a new release on Safari (but works fine on chrome)?在 Safari 上发布新版本后，我的 PWA Web 应用程序一直显示旧版本（但在 chrome 上运行良好）？
【发布时间】：2018-07-20 05:00:32
【问题描述】：

我将 PWA 和 service worker 添加到我现有的基于 Angular 5 的 Web 应用程序中。第一次发布时一切看起来都很好。但是，当我尝试发布更新时，发生了一些奇怪的事情。

在使用 Chrome 的 PC 上，我没有问题。每次发布后，我都会收到提醒，要求我更新新版本，这很棒。

但是，iOS 上缺少此警报，这可能没问题，因为据我了解，iOS 尚不支持自动更新。如果我在 iOS 上使用 Chrome，我可以在手动刷新后获取新版本（有时需要刷新几次）。但是，Safari 浏览器通常不会显示新版本。如果我不断刷新页面，新版本最终会出现，但在我关闭并重新打开后它会再次下降。在我玩游戏时，获得新版本的唯一方法是先手动清除 Safari 缓存。这是普通用户无法接受的。

我了解 iOS 对 PWA 的支持有限，但这是否是我们在 iOS 上所能获得的最大支持？如果没有自动更新，iOS 用户如何知道新版本并进行更新呢？

【问题讨论】：

我通过为每次更新使用新文件名并在新版本可用时取消并重新注册服务工作者来解决此问题。检查来自服务器的值后手动调用该函数。也没有找到其他解决方案，很高兴为 safari 提供更清洁的解决方案。
@AgashThamo。我有同样的问题，但不确定你的意思是 un 和从应用程序中重新注册服务人员，你介意分享一个代码示例吗？谢谢！
@Stephen 抱歉，我无权访问任何显示此内容的具体代码。但我的意思是，您的服务人员可以检查您的 ngsw.json 中是否有新文件，如果有新文件但您的文件仍然是旧文件，您可以销毁 SW developer.mozilla.org/en-US/docs/Web/API/… 基本上删除所有缓存并填充并注册一个新的服务人员。它对我有用，但我认为这个问题无论如何都可以用新的 angular 版本 6 解决（Chrome 有一些类似的问题）。
@Stephen 我刚刚注意到，Safari 上的 iOS 尚不支持 unregister() 函数。我得看看我是怎么做到的，希望我能在我的回购中找到一个例子。
您使用了webp 图像文件吗？这使我无法在 iOS 中看到新的更新。

标签： ios safari service-worker pwa

【解决方案1】：

我找到并发布了答案here，但要重新迭代：

经过数周又数周的搜索，我终于找到了解决方案：

我在服务器上添加了对版本字符串的检查，并将其返回给应用程序。
我在 localtstorage (IndexedDB) 中查找它，如果找不到，我添加它。如果找到了，我会比较版本，如果服务器上有更新的版本，我会弹出一个对话框。
关闭此对话框（我的按钮标记为“更新”）运行window.location.reload(true)，然后将新版本字符串存储在本地存储中

瞧！我的应用更新了！我不敢相信它归结为这么简单，我在任何地方都找不到解决方案。希望这会有所帮助。

2019 年 9 月更新：

上述技术存在一些问题，特别是它绕过了 PWA 服务工作者机制，并且有时重新加载不会立即加载新内容（因为当前的 SW 不会释放页面）。我现在有一个似乎适用于所有平台的新解决方案：

forceSWupdate () {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function (registrations) {
      for (let registration of registrations) {
        registration.update()
      }
    })
  }
}

在我的 serviceworker 内部，如果有更新，我现在会弹出对话框，然后从那里执行我的location.reload(true)。这总是会导致我的应用立即刷新（重要的警告是，我在注册中添加了 skipWaiting 和 clientsClaim 指令）。

这在每个平台上都一样，我可以以编程方式检查更新或等待服务人员自行完成（尽管它检查的时间因平台、设备和其他未知因素而有很大差异。通常不会超过 24 小时。）

【讨论】：

关于实际问题的任何信息？资源链接？
实际的问题是Apple并不完全支持PWA规范。如果是这样，这将是不必要的（就像在 Android 上一样）
很好的解决方法，让用户提前了解更新。
谢谢。有用。我提供了一个使用此方法的开源项目供参考：github.com/MrMYHuang/cbetar2 此 PWA 支持应用启动时自动更新或手动更新！它们适用于 macOS 10.15 + Edge Chrome、Android 9 + Chrome、iOS 13.6 + Safari、Windows 10 + Edge Chrome。请检查这些文件，src/serviceWorker.ts、src/Globals.tsx、src/index.tsx、src/App.tsx 和 src/pages/SettingsPage.tsx。

【解决方案2】：

在尝试了许多解决方案后，打电话给registration.update 并没有让我满意。只有这个对我有用：

const forceReload = () =>
  navigator.serviceWorker
    .getRegistrations()
    .then((registrations) =>
      Promise.all(registrations.map((r) => r.unregister())),
    )
    .then(() => window.location.reload())

策略：

在新部署的应用中写入版本号（即：x.x.x）
收听在 webSocket 上提供的版本号
不匹配时致电forceReload

这样，任何连接或未连接的用户都可以使用最新版本。

希望对某人有所帮助。

【讨论】：

【解决方案3】：

我也遇到了同样的问题，我花了好几天的时间研究它，并阅读了 Service Worker 的工作方式和注册新更改的方式。您必须使用 https://base_web_app_url/ngsw/state 调试您的服务工作者。如果这返回正常状态，那么您的服务工作人员正在正常工作，并将在新更改可用时加载它们。有时，我们必须关闭应用并重新打开它，以便 Service Worker 可以释放旧页面。

如果 ngsw/state 不正常，那么它可能会抱怨哈希不匹配，这就是我的应用程序中的情况。有一个后期构建脚本正在为 styles.css 生成新的哈希，这就是哈希不匹配错误的原因，导致 SW 无法加载新的更改。

【讨论】：