使用持久存储创建HTML5离线应用

Question

我必须创建HTML5应用程序，该应用程序可以在您连接互联网时下载内容。 之后，您可以松开连接并继续进行操作。 当可用的连接可用时，应将所有数据与服务器同步。 它应该在重新启动程序/浏览器时保留数据。 我认为Slack和Visual Studio Code是用这种方式编写的。

根据我的研究，我必须使用清单文件下载资源并使用File API

目前，我发现Chrome devTools最适合此目的。

您还有其他想法如何创建这样的应用程序吗？ 重要的是它应该是跨平台的 。

Answer 1

您是否看过NW.js ？

它是构建html应用程序的紧凑框架，可在linux / win / OSX上运行。

Answer 2

这是我使用这类应用程序的一些经验：

• 要创建跨平台的HTML5移动应用程序，可以使用Apache Cordova 。 Cordova的许多插件都可以访问您的设备，例如可以读取连接类型（WiFi /蜂窝）或在线状态的网络插件。 因此，与经典网站相比，这无疑是一个更好的解决方案。

• 为了在电话上本地管理应用程序上的数据，您可以使用单页Javascript MVC-Framework。 EmberJS与Ember-Data一起具有管理模型和模型关系的强大功能。 有一个localStorage适配器，可让您无需任何其他配置即可使用HTML5 localStorage。 （甚至有一个符合您要求的余烬同步项目，但是由于它处于Alpha阶段，您可能不想在生产中使用它）

• 就像我上面说的，HTML5的localStorage可能是您想要用来将数据保留在用户手机上的东西。 但是，如果您的数据对于localStorage而言太大（〜> 5MB），则可以依靠cordova的SQLite插件。 您完全不需要自己使用File-API。

• 正如您所指出的，chrome开发工具是调试应用程序的好方法。 它们可以完美地实现Cordova网络视图。 此外，Safari还为iOS设备提供了远程调试功能。 但是最好的办法是：由于它是基于HTML / JS / CSS的，因此您可以在浏览器中编写和调试大多数应用程序。 在过去的版本中，Ember大大改进了它的错误处理能力，并且使用Google chrome的扩展Ember-inspector在许多情况下也有很大帮助。

通常，由于cordova有时会很痛苦，因此您可以以一种非常有效和高效的方式使用它。 Ember和Ember-Data也是如此。 试一试。 祝好运！