我一直在努力在 iOS 上尝试一些在 Android 上很容易工作的东西:让我的 PWA 在有新版本时自动更新。我完全不确定这在 iOS 上是否可行。我已经使用 vue.js 和 Quasar 构建了我的应用程序,一切都在 Android 上开箱即用。这是目前在 iOS 版本上的(丑陋的,可怕的)方式:
- 我可以检查我自己的服务器的版本并将其与存储在我的应用程序(在 indexedDB 中)中的当前版本进行比较,并发出有新版本的通知。到目前为止,一切都很好。
- 除了让用户手动清除 SAFARI 缓存 (!!) 之外,我无法弄清楚如何以编程方式从应用程序中清除 PWA 缓存或以其他方式强制上传。
所以在这一点上我想我的问题是:
- 有没有人能够在 iOS(11.3 或更高版本)上获得 PWA 以在新版本可用时自动更新?
- 有没有办法从我的 PWA 中清除(safari)应用程序缓存?
显然,通知用户为了更新他们必须在应用程序之外执行几个步骤才能刷新它是一种非常糟糕的用户体验,但似乎这就是 iOS 目前所处的位置,除非我遗漏了什么。有没有人在任何地方做过这项工作?
原文由 Stephen 发布,翻译遵循 CC BY-SA 4.0 许可协议
经过数周又数周的搜索,我终于找到了解决方案:
我在服务器上添加了一个版本字符串检查,并将其返回给上面提到的应用程序。
我在 localtstorage (IndexedDB) 中查找它,如果找不到,我会添加它。如果我确实找到了它,我会比较版本,如果服务器上有更新的版本,我会弹出一个对话框。
关闭此对话框(我的按钮标记为“更新”)运行
window.location.reload(true)
然后将新版本字符串存储在本地存储中瞧!我的应用程序已更新!我简直不敢相信它归结为如此简单的事情,我无法在任何地方找到解决方案。希望这可以帮助别人!
2019 年 9 月更新:
上面的技术有一些问题,特别是它绕过了 PWA service worker 机制,有时重新加载不会立即加载新内容(因为当前的 SW 不会释放页面)。我现在有了一个似乎适用于所有平台的新解决方案:
在我的 serviceworker 中,如果有更新,我现在会弹出对话框,然后从那里执行我的
location.reload(true)
。这总是会导致我的应用程序立即刷新(重要的警告是我在注册时添加了skipWaiting
和clientsClaim
指令)。这在每个平台上都一样,我可以以编程方式检查更新或等待 service worker 自己完成(尽管它检查的时间因平台、设备和其他不可知因素而有很大差异。通常不超过 24虽然小时。)