javascript - 构建具有离线 asat 功能的网络应用程序

Question

自从被要求为某人开发网络应用程序以来，我一直在思考整个项目。前端需要的主要内容之一是离线操作的能力。起初，离线维护应用程序似乎很容易:

1. 数据库中的重要信息可以复制到 indexedDB 中。
2. 存储 API 可用于存储信息花絮。
3. 应用程序缓存可以处理离线存储 Assets 。

在我做了一些研究之前，我的想法似乎很可靠。应用程序缓存已被弃用。显然，它有一些问题，并没有我想象的那么好。现在似乎几乎不可能构建离线应用程序。通过研究和思考，我考虑了一些解决方案，但它们都存在一些缺陷。

1. 我读到的一篇文章考虑使用 localStorage 来存储 Assets 。这似乎没问题，我猜，因为应用程序将是单页的，但 CSS、JavaScript 库和图像等 Assets 会很大，虽然我可以压缩它们，但将它们作为字符串存储在 localStorage 中似乎有点老套。

2. MDN 将我指向 Service workers .这些看起来不错，但也过于复杂，而且它们的浏览器支持对我来说不起作用。

3. 我考虑过使用文件 API 而不是 localStorage 来处理 Assets 。问题是文件 API 似乎只适用于用户交互，例如文件上传或拖放，这不是我需要的。我只需要在幕后使用 JavaScript 写入文件。然而，即使那样，我也希望性能受到影响，尤其是对于磁盘速度较慢的用户。

正如您从我的解决方案中看到的那样，主要因素之一是速度。我想像这样的过程可以使用 WebWorkers 与主应用程序隔离，但即便如此，将文件存储在 localStorage 中的感觉也不是很好。

我不认为这些解决方案中的任何一个是可行的，但我不能太确定。我应该如何为离线应用程序存储 Assets ？理想情况下，我想要移动支持，但截至目前，我正在寻找一种解决方案:

• 不会严重性能下降

和

• 语义看起来不错，没有使用任何黑客或不良做法。

我有哪些可用的解决方案？我的上述任何解决方案都不错吗？

Answer 1

Application Cache 几周前才刚刚被 Firefox 弃用，但对我来说，这似乎是一个相当轻率的举动，因为他们还没有完成替换!参见 https://www.fxsitecompat.com/en-US/docs/2015/application-cache-api-has-been-deprecated/和 https://bugzilla.mozilla.org/show_bug.cgi?id=1204581 (特别是:“我们还没有发布 service worker，我们在没有 service worker 的情况下实现 Cache API 对于替换 appcache 还不是很有用。”)

我认为 AppCache 从浏览器中移除至少还需要几年时间，正如您所发现的，现在它是您实现跨浏览器兼容性的唯一真正选择。随着 Service Workers 变得更加成熟，可能会开发一个包装器来简化从 AppCache 到 SW 等价物的过渡。 (听起来可能，至少:Is Service Worker intended to replace or coexist with Appcache?)

这引出了我的下一点:对于离线数据库的东西，我推荐 LocalForage，Mozilla 的各种离线存储选项的包装器。它将在用户浏览器上选择最佳可用选项，从而为您省去做出决定的麻烦。我刚刚在一个项目中使用过它，使用起来非常简单。 https://mozilla.github.io/localForage/

在速度方面，您可能会感到惊喜。即使使用 LocalStorage(它是同步的，因此会在运行时阻止执行)，您可能永远不会注意到实际使用中的任何延迟。