克服 iOS PWA 缓存的 50 MiB 限制答案

【问题标题】：Overcoming the 50 MiB limitation on PWA cache for iOS克服 iOS PWA 缓存的 50 MiB 限制
【发布时间】：2018-10-10 03:44:33
【问题描述】：

我们正在为 iOS 设备构建一个渐进式网络应用程序，并且我们知道 Safari 网络浏览器施加的 50 MiB 缓存限制。当我们知道如果我们包含所有静态资源、视频和图片等，我们的应用程序的服务工作者可能需要缓存超过 50 MiB 的数据时，我们如何处理这个限制。我们的第一选择是即使在缓存之后也保持应用程序离线运行已满，如果不可能，至少在用户离线工作时防止应用程序崩溃。

如果你能给出一个我们也可以在其他 PWA 中实现的通用答案会很好。

【问题讨论】：

你不应该这样做。存在限制是有原因的：节省蜂窝数据的使用量。 50MB 对于 Web 应用程序来说已经很多了；尝试通过压缩 JS 和 CSS 来优化您的网站文件，并使用网络优化版本的图像和视频。
是的，你是对的，但如果离线保存数据是一项功能需求呢？假设我正在构建一个 PWA 版本的 YouTube 应用程序，它可以让用户离线保存视频以供以后观看。
你有没有想过解决这个问题？我的离线应用程序需要 50MB 以上的空间，它还缓存视频/图片，在 Android 平板电脑上完美运行，但在 Ipad 上需要同样的空间......有什么办法解决这个问题？
我认为这是 Apple/Google 阻止您使用 PWA 为所欲为的方式之一。或许您应该考虑使用原生应用程序包装您的网络应用程序并让您访问设备上的一些真实存储空间。
我正在使用媒体（视频、音频、照片）开发多个 PWA，在某些情况下我们需要缓存超过 50MB。所以使用 IDB 是正确的选择。您需要将媒体文件视为数据而不是页面。以与 JSON 形成 API 相同的方式对其进行分类。另外不要忘记将 TTL/无效规则应用于您缓存的所有内容。这样你就可以控制疼痛失效，而不是操作系统。

标签： ios mobile-safari service-worker progressive-web-apps cacheapi

【解决方案1】：

至少从 iOS 13 开始，IndexedDB 和 cacheStorage 都应该有 1GB 的统一配额。请参阅以下 WebKit 更改：https://bugs.webkit.org/show_bug.cgi?id=198133#c15

【讨论】：

【解决方案2】：

如今，您可以使用 IndexedDB 在 Safari 移动设备上存储超过 50 MB：https://love2dev.com/blog/what-is-the-service-worker-cache-storage-limit/

如果可用磁盘空间大小超过 1 GB，则默认限制为 500 MB；否则它是可用磁盘空间的一半。

使用此工具亲自查看：https://demo.agektmr.com/storage/

【讨论】：

感谢您参考我的文章！我打算指出使用 IDB。