QuotaExceededError：已超出配额 - 渐进式 Web 应用离线模式 [关闭]

Question

我正在构建一个渐进式网络应用程序，我也想在离线模式下运行。这意味着我正在使用服务工作者（工作箱）缓存所有 JavaScript、CSS、字体等，并将应用程序需要的任何内容保存在 localStorage 中，以免它崩溃。例如，如果用户想在没有活动的 Internet 连接时发送消息/上传图像，我将其存储在 localStorage 中，以便他可以在 Internet 连接恢复在线时重新发送，而无需再次上传。

当前的功能是当设备没有互联网连接时，我将上传的文件保存在本地存储中，这样当您重新在线时，您无需再次上传，只需点击“重新发送”按钮即可重新发送现有的上传文件（图像或视频）并将其发送到服务器。

当我在 Mac 上的 Chrome 上本地运行时一切正常，当我在 iPhone 上尝试时出现问题，我收到此错误：

Unhandled Promise Rejection: QuotaExceededError: The quota has been exceeded.

它也不适用于 Android 设备。我怎样才能绕过这个错误，仍然保持在离线模式下运行应用程序的功能？

这不是 Safari 中的隐身模式。

let files = localStorage.files ? JSON.parse(localStorage.files) : [];
files.push(file);
localStorage.files = JSON.stringify(files);

Answer 1

我相信同样的配额不适用于 IndexDb 本地数据库。因此，值得将您的代码转换为使用 IndexDb 而不是使用 LocalStorage。不过，要找出 IOS 中存在哪些限制并不容易——也许其他贡献者会比我有更清楚的信息。

Answer 2

localStorage 不是您应该缓存 HTML、JS、CSS 等资产的地方。您应该改用 service worker 缓存。你可以在那里缓存更多。大多数浏览器使用基于可用磁盘空间的滑动比例。 iOS 将您限制为 50MB，这比任何 PWA 真正需要的都要多。 对于数据和媒体文件，我使用 IndexedDB，这有助于绕过 Apple 的 50MB 限制。 不久前，我写了一篇关于 Service Worker 缓存限制的文章。 https://love2dev.com/blog/what-is-the-service-worker-cache-storage-limit/ 我应该注意，我曾经在服务人员之前使用 localStorage 进行缓存，并构建了一些非常大的 Web 应用程序，并且从来没有遇到过 localStorage 配额的问题。 Localstorage 在 service worker 中不可用，因为它不是异步的（Promises）。 如果您尝试缓存超过 5MB 的 JS、CSS 和 HTML，您可能需要检查您的架构 b/c，我可以保证您有很多正在缓存的代码没有被使用，并且会减慢您的 UX 速度。