构建具有离线资产功能的 Web 应用程序

Question

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

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

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

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

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

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

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

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

• 不会严重降低性能

和

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

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

Answer 1

几周前，Firefox 才刚刚弃用应用程序缓存，但在我看来，这似乎是一个相当轻率的举动，因为他们还没有完成替换！参见https://www.fxsitecompat.com/en-US/docs/2015/application-cache-api-has-been-deprecated/ 和https://bugzilla.mozilla.org/show_bug.cgi?id=1204581（特别是：“我们还没有交付服务工作者，我们在没有服务工作者的情况下实现的缓存 API 对于替换 appcache 还不是很有用。”） p>

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

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

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