构建具有离线 asat 功能的网络应用程序
Building web-apps with offline asset capablilities
自从被要求为某人开发网络应用程序以来，我一直在思考整个项目。前端需要的主要内容之一是离线操作的能力。起初看起来离线维护应用程序很容易：
- 数据库中的重要信息可以复制到 indexedDB 中。
- 存储 API 可用于存储信息花絮。
- 应用程序缓存可以离线处理资产存储。
在我做了一些研究之前，我的想法似乎很可靠。应用程序缓存已被弃用。显然，它有一些问题，并没有我想象的那么好。现在似乎几乎不可能构建离线应用程序。通过研究和思考，我考虑了一些解决方案，但它们都存在一些缺陷。
我读过一篇文章考虑使用 localStorage 来存储资产。我猜这似乎没问题，因为应用程序将是单页的，但是 CSS、JavaScript 库和图像等资产会很大，虽然我可以压缩它们，但似乎有点老套将它们作为字符串存储在 localStorage 中。
MDN 将我指向 Service workers。这些看起来不错，但也过于复杂，它们的浏览器支持对我来说不起作用。
我考虑过使用文件 API 而不是 localStorage 来处理资产。问题是 File API 似乎只适用于用户交互，例如文件上传或拖放，这不是我需要的。我只需要在幕后使用 JavaScript 写入文件。但是，即使那样，我也希望性能受到影响，尤其是对于磁盘速度较慢的用户。
正如您从我的解决方案中看到的那样，主要因素之一是速度。我想像这样的程序可以使用 WebWorkers 与主应用程序隔离，但即使这样，将文件存储在 localStorage 中的感觉也不是很好。
我不认为这些解决方案中的任何一个是可行的，但我不能太确定。我应该如何为离线应用程序存储资产？理想情况下，我想要移动支持，但截至目前，我正在寻找一种解决方案：
- 不会严重性能下降
和
- 语义看起来不错，没有使用任何黑客或不良做法。
我有哪些可用的解决方案？我的上述任何解决方案都不错吗？
Application Cache 几周前才被 Firefox 弃用，但对我来说，这似乎是他们的一个相当草率的举动，因为他们还没有完成替换！参见 https://www.fxsitecompat.com/en-US/docs/2015/application-cache-api-has-been-deprecated/ and https://bugzilla.mozilla.org/show_bug.cgi?id=1204581（特别是："We have not shipped service workers yet, and our implementation of Cache API without service workers is not quite useful for replacing appcache yet."）
我认为 AppCache 从浏览器中删除至少还需要几年时间，正如您所发现的，现在它是您实现跨浏览器兼容性的唯一真正选择。随着 Service Workers 变得更加成熟，可能会开发一个包装器来简化从 AppCache 到 SW 等价物的过渡。 （听起来可能，至少：）
这引出了我的下一点：对于离线数据库的东西，我推荐 LocalForage，Mozilla 的各种离线存储选项的包装器。它将在用户浏览器上选择最佳可用选项，从而为您省去做出决定的麻烦。我刚刚在一个项目中使用过它，使用起来非常简单。 https://mozilla.github.io/localForage/
在速度方面，您可能会感到惊喜。即使使用 LocalStorage（它是同步的，因此会在 运行 时阻止执行），您可能永远不会注意到实际使用中的任何延迟。
自从被要求为某人开发网络应用程序以来，我一直在思考整个项目。前端需要的主要内容之一是离线操作的能力。起初看起来离线维护应用程序很容易：
- 数据库中的重要信息可以复制到 indexedDB 中。
- 存储 API 可用于存储信息花絮。
- 应用程序缓存可以离线处理资产存储。
在我做了一些研究之前，我的想法似乎很可靠。应用程序缓存已被弃用。显然，它有一些问题，并没有我想象的那么好。现在似乎几乎不可能构建离线应用程序。通过研究和思考，我考虑了一些解决方案，但它们都存在一些缺陷。
我读过一篇文章考虑使用 localStorage 来存储资产。我猜这似乎没问题，因为应用程序将是单页的，但是 CSS、JavaScript 库和图像等资产会很大，虽然我可以压缩它们，但似乎有点老套将它们作为字符串存储在 localStorage 中。
MDN 将我指向 Service workers。这些看起来不错，但也过于复杂，它们的浏览器支持对我来说不起作用。
我考虑过使用文件 API 而不是 localStorage 来处理资产。问题是 File API 似乎只适用于用户交互，例如文件上传或拖放，这不是我需要的。我只需要在幕后使用 JavaScript 写入文件。但是，即使那样，我也希望性能受到影响，尤其是对于磁盘速度较慢的用户。
正如您从我的解决方案中看到的那样，主要因素之一是速度。我想像这样的程序可以使用 WebWorkers 与主应用程序隔离，但即使这样，将文件存储在 localStorage 中的感觉也不是很好。
我不认为这些解决方案中的任何一个是可行的，但我不能太确定。我应该如何为离线应用程序存储资产？理想情况下，我想要移动支持，但截至目前，我正在寻找一种解决方案：
- 不会严重性能下降
和
- 语义看起来不错，没有使用任何黑客或不良做法。
我有哪些可用的解决方案？我的上述任何解决方案都不错吗？
Application Cache 几周前才被 Firefox 弃用，但对我来说，这似乎是他们的一个相当草率的举动，因为他们还没有完成替换！参见 https://www.fxsitecompat.com/en-US/docs/2015/application-cache-api-has-been-deprecated/ and https://bugzilla.mozilla.org/show_bug.cgi?id=1204581（特别是："We have not shipped service workers yet, and our implementation of Cache API without service workers is not quite useful for replacing appcache yet."）
我认为 AppCache 从浏览器中删除至少还需要几年时间，正如您所发现的，现在它是您实现跨浏览器兼容性的唯一真正选择。随着 Service Workers 变得更加成熟，可能会开发一个包装器来简化从 AppCache 到 SW 等价物的过渡。 （听起来可能，至少：
这引出了我的下一点：对于离线数据库的东西，我推荐 LocalForage，Mozilla 的各种离线存储选项的包装器。它将在用户浏览器上选择最佳可用选项，从而为您省去做出决定的麻烦。我刚刚在一个项目中使用过它，使用起来非常简单。 https://mozilla.github.io/localForage/
在速度方面，您可能会感到惊喜。即使使用 LocalStorage（它是同步的，因此会在 运行 时阻止执行），您可能永远不会注意到实际使用中的任何延迟。