使用perisistant存储创建HTML5离线应用程序

时间:2015-05-13 08:03:09

标签: javascript html5 cross-platform cross-device

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

根据我的研究,我必须使用Manifest file下载资源并使用File API

现在我发现Chrome devTools最适合这个目的。

您有其他想法如何创建此类应用程序?重要的是它应该是跨平台

2 个答案:

答案 0 :(得分:0)

你看过NW.js了吗?

它是构建html应用程序的紧凑框架,适用于linux / win / OSX。

答案 1 :(得分:0)

以下是我使用此类应用的一些经验:

  • 要创建跨平台的HTML5移动应用,您可以使用Apache Cordova。有很多可以访问你的设备的cordova,例如可以读取连接类型(wifi /蜂窝)或在线状态的网络插件。因此,这肯定是比传统网站更好的解决方案。

  • 为了在手机上本地管理您的应用程序上的数据,您可以使用单页面的Javascript MVC-Framework。 EmberJS与Ember-Data一起具有管理模型和模型关系的强大功能。有一个localStorage适配器,允许您使用HTML5 localStorage而无需任何其他配置。 (甚至还有一个符合您要求的余烬同步项目,但由于它处于alpha阶段,您可能不希望在生产中使用它)

  • 如上所述,HTML5的localStorage可能就是您想用来在用户手机上保存数据的内容。但是,如果您的数据对于localStorage来说太大(〜> 5MB),您可以依赖cordova的SQLite插件。您根本不需要自己使用File-API。

  • 正如您所指出的,chrome dev-tools是调试应用程序的好方法。他们为cordova网络视图工作无懈可击。此外,Safari还具有iOS设备的远程调试功能。但最好的是:您可以在浏览器中编写和调试大多数应用程序,因为它是基于HTML / JS / CSS的。在过去的版本中,Ember极大地改进了它的错误处理能力,并且在很多情况下,谷歌Chrome的扩展版ember-inspector也有很多帮助。

一般来说,因为有时候科尔多瓦会感到痛苦,所以在这里你可以以非常高效和高效的方式使用它。 Ember和Ember-Data也是如此。试一试吧。祝你好运!