(HTML5)浏览器中的离线模式应用程序可能吗?

是否有可能在浏览器内部build立一个应用程序? 申请意味着:

1在浏览器和远程应用程序服务器之间存在连接 (在线模式)的情况下:

  • 该应用程序以典型的基于Web的模式运行
  • 应用程序将必要的数据存储在离线存储中,以用于离线模式(2)
  • 当从离线模式恢复到在线模式时,应用程序同步/推送数据(在离线模式下捕获)返回到服务器

2浏览器与远程应用程序服务器之间没有连接 (脱机模式)的情况:

  • 应用程序仍然会运行(JavaScript?)
  • 应用程序将向用户呈现数据(离线存储)
  • 应用程序可以接受来自用户的input(并存储/附加到离线存储)

这可能吗? 如果答案是肯定的,是否有任何(Ruby / Python / PHP)框架正在构build?

谢谢

是的,这是可能的。

  • 您需要使用Javascript编写应用程序,并以某种方式检测浏览器是否处于脱机模式(最简单的是轮询一次服务器)。 (编辑:查看评论以获得更好的检测离线模式的方法)

  • 确保您的应用程序仅包含静态HTML,Js和CSS文件(或者在脚本中手动设置caching策略,以便浏览器在离线模式下记住它们)。 页面更新是通过JS DOM操作完成的,而不是通过服务器(一个框架,如ExtJS http://www.extjs.com将帮助你在这里);

  • 对于存储,使用PersistJS( http://github.com/jeremydurham/persist-js )这样的模块,它使用浏览器的本地存储来跟踪数据。 连接恢复时,与服务器同步。

  • 您需要预先caching使用的图像和其他资产,否则,如果您以前没有使用它们,它们将在脱机模式下不可用。

  • 再一次:你的应用程序的大部分需要在JavaScript中,如果服务器无法访问,PHP / Ruby / Python框架将帮助你很less。 服务器可能保持尽可能简单,一个类似REST的AJAX API来存储和加载数据。

Mark Pilgrim的在线书“ Dive Into HTML5 ”中的“Let's Take This Offline”一章是使用HTML5技术编写脱机Web应用程序的非常好的概述。

注意:由于Mark Pilgrim的原创Dive Into HTML5链接似乎已经停止。

现在可以在这里find其他地方的副本。

杰克·阿奇博尔德写下了“脱机食谱”。 现代(2014年12月9日)和ServiceWorker很好的方法:

http://jakearchibald.com/2014/offline-cookbook/

下面是一个带有演示的hacks.mozilla.org文章: http ://hacks.mozilla.org/2010/01/offline-web-applications/

另一个演示。

更详细的文档: https : //developer.mozilla.org/en/HTML/HTML5#Web_application_features

Javascript给你一个网站离线模式的选项,并调用UpUp Javascript框架 。 一个小小的脚本,确保您的网站始终在您的用户,即使他们在飞机上或20,000海里联赛。

<html> <head> <meta charset="UTF-8"> <title>Lonely Globe Advisor</title> </head> <body> <h1>Top Hotels in Rome</h1> <ol> <li>Villa Domus - Via Piacenza 9, Rome, Italy</li> <li>Hotel Trivelli - Piazza Barberini 11, Rome, Italy</li> </ol> <script src="/upup.min.js"></script> <script> UpUp.start({ 'content-url': 'offline.html', 'assets': ['css/bootstrap.min.css', 'css/offline.css'] }); </script> </body> </html> 

现在,我们的用户在脱机时看到的内容是offline.html的内容。 这只是一个简单的HTML文件,与我们网站上的任何其他页面没有什么不同。

我们的offline.html文件包含两个css文件: bootstrap.min.cssoffline.css 。 让我们确保这些caching,并提供给我们的用户,当他们离线

查看Google Gears http://code.google.com/apis/gears/ 。 虽然他们已经被淘汰,转而支持HTML5。 但是,似乎HTML5推出的是Google Gears。

我也在寻找这个,我发现了HTML HTML5离线Web应用程序 。 没有尝试过寿

典型的在线Web应用程序的用户只能在与Internet连接的情况下使用这些应用程序。 当他们离线时,他们不能再检查他们的电子邮件,浏览他们的日历约会,或者使用他们的在线工具准备演示文稿。 同时,本机应用程序提供以下function:电子邮件客户端本地caching文件夹,日历本地存储事件,演示文件包在本地存储其数据文件。