我的PWA网络应用程序在Safari上发布新版本后仍然显示旧版本(但在Chrome上工作正常)？

Question

我在现有的基于Angular 5的网络应用程序中添加了PWA和服务工作者.在第一次发布时,一切看起来都很好.但是,当我尝试发布更新时,会发生一些奇怪的事情.

在使用Chrome的PC上,我没有问题.每次发布后,我都会收到警报,要求我更新新版本,这很棒.

但是,iOS上缺少此警报,这可能没问题,因为iOS不支持自动更新,但据我所知.如果我在iOS上使用Chrome,我可以在手动刷新后获得新版本(有时需要刷新一些内容).但是,Safari浏览器通常不会显示新版本.如果我不断刷新页面,最终会出现新版本,但是在我关闭并重新打开它之后会再次出现.在我玩的时候,我到达新版本的唯一方法是先手动清除Safari缓存.这对普通用户来说是不可接受的.

我知道iOS对PWA的支持有限,但这是我们在iOS上获得的最多的东西吗？如果没有自动更新,iOS用户如何知道新版本并更新它？

Answer 1

我在此处找到并发布了答案，但要重申：

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

1. 我在服务器上添加了对versionstring的检查，并将其返回给应用程序。

2. 我在localtstorage（IndexedDB）中寻找它，如果找不到，则添加它。如果找到它，则比较版本，如果服务器上有较新的版本，则会抛出一个对话框。

3. 退出此对话框（我的按钮标记为“更新”）window.location.reload(true)，然后将新的版本字符串存储在localstorage中

瞧！我的应用程序已更新！我不敢相信它可以归结为如此简单，在任何地方都找不到解决方案。希望这可以帮助。

2019年9月更新：

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

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

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

这适用于每个平台，并且我可以以编程方式检查更新或等待服务人员自己执行更新（尽管它的检查时间因平台，设备和其他未知因素而有很大差异。通常不超过24个小时）。

Answer 2

在尝试了许多解决方案后，打电话registration.update对我来说并不合适。只有这个对我有用：

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

策略：

• 在新部署的应用程序中写入版本号（即：xxx）
• 侦听 webSocket 上提供的版本号
• forceReload当它们不匹配时调用

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

希望它会帮助某人。