Html （HTML5）浏览器中的离线模式应用程序可能吗？

Offline mode app in a (HTML5) browser possible?

提问by ohho

Is it possible to build an application insidein browser? An application means:

是否有可能建立一个应用程序中的浏览器？申请意味着：

1 Where there is connection(online mode) between the browser and an remote application server:

1浏览器和远程应用服务器之间存在连接（在线模式）的地方：

• the application runs in typical web-based mode
• the application stores necessarydata in offline storage, to be used in offline mode (2)
• the application sync/push data (captured during offline mode) back to the server when it is resumed from offline mode back to online mode

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

2 Where there is no connection(offline mode) between the browser and an remote application server:

2 当浏览器和远程应用服务器之间没有连接（离线模式）时：

• the application will still run (javascript?)
• the application will present data (which is stored offline) to user
• the application can accept input from user (and store/append in offline storage)

• 应用程序仍将运行（javascript？）
• 应用程序将向用户呈现数据（离线存储）
• 应用程序可以接受来自用户的输入（并在离线存储中存储/附加）

Is this possible? If the answer is a yes, is there any (Ruby/Python/PHP) framework being built?

这可能吗？如果答案是肯定的，是否正在构建任何（Ruby/Python/PHP）框架？

Thanks

谢谢

采纳答案by wump

Yes, that is possible.

是的，这是可能的。

• You need to write the application in Javascript, and detect somehow whether the browser is in offline mode (simplest is to poll a server once in a while). (Edit: see comments for a better way to detect offline mode)

• Make sure that your application consists of only static HTML, Js and CSS files (or set the caching policy manually in your script so that your browser will remember them in offline mode). Updates to the page are done through JS DOM manipulation, not through the server (a framework such as ExtJS http://www.extjs.comwill help you here)

• For storage, use a module such as PersistJS ( http://github.com/jeremydurham/persist-js), which uses the local storage of the browser to keep track of data. When connection is restored, synchronize with the server.

• You need to pre-cache images and other assets used, otherwse they will be unavailable in offline mode if you didn't use them before.

• Again: the bulk of your app needs to be in javascript, a PHP/Ruby/Python framework will help you little if the server is unreachable. The server is probably kept as simple as possible, a REST-like AJAX API to store and load data.

• 您需要用 Javascript 编写应用程序，并以某种方式检测浏览器是否处于离线模式（最简单的方法是不时轮询服务器）。（编辑：有关检测离线模式的更好方法，请参阅评论）

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

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

• 您需要预先缓存图像和其他使用过的资产，否则如果您以前没有使用过它们，它们将在离线模式下不可用。

• 再次重申：您的大部分应用程序需要使用 javascript，如果服务器无法访问，PHP/Ruby/Python 框架对您的帮助很小。服务器可能会保持尽可能简单，使用类似 REST 的 AJAX API 来存储和加载数据。

回答by hasseg

The "Let's Take This Offline" chapterin Mark Pilgrim's (online) book Dive Into HTML5is a very nice overview of writing offline web apps with HTML5 technologies.

Mark Pilgrim 的（在线）书籍Dive Into HTML5 中的“Let's Take This Offline”一章很好地概述了使用 HTML5 技术编写离线 Web 应用程序。

Note: Since Mark Pilgrim's original Dive Into HTML5 link seems to be down.

注意：由于 Mark Pilgrim 的原始 Dive Into HTML5 链接似乎已关闭。

Copies can now be found hereamong other places.

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

回答by Johann Echavarria

Jake Archibald wrote "The offline cookbook". A modern (9 December 2014) and nice approach with ServiceWorker:

Hyman·阿奇博尔德 (Jake Archibald) 撰写了“离线食谱”。ServiceWorker 的现代（2014 年 12 月 9 日）和不错的方法：

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

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

回答by Joe Zack

The answer in 2018 is to leverage the service worker, and to build a Progressive Web App: https://developers.google.com/web/progressive-web-apps/

2018 年的答案是利用 Service Worker，并构建一个 Progressive Web App：https: //developers.google.com/web/progressive-web-apps/

回答by Nickolay

Here's a hacks.mozilla.org article with a demo: http://hacks.mozilla.org/2010/01/offline-web-applications/

这是带有演示的 hacks.mozilla.org 文章：http://hacks.mozilla.org/2010/01/offline-web-applications/

Another demo.

另一个演示。

More detailed documentation: https://developer.mozilla.org/en/HTML/HTML5#Web_application_features

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

回答by Jiew Meng

i was looking for this also, i found out abt HTML5 Offline Web Apps. havent tried it tho

我也在寻找这个，我发现了 abt HTML5 Offline Web Apps。还没试过

Users of typical online Web applications are only able to use the applications while they have a connection to the Internet. When they go offline, they can no longer check their e-mail, browse their calendar appointments, or prepare presentations with their online tools. Meanwhile, native applications provide those features: e-mail clients cache folders locally, calendars store their events locally, presentation packages store their data files locally.

典型的在线 Web 应用程序的用户只能在连接到 Internet 时使用这些应用程序。当他们离线时，他们无法再查看电子邮件、浏览日历约会或使用在线工具准备演示文稿。同时，本机应用程序提供了这些功能：电子邮件客户端在本地缓存文件夹，日历在本地存储其事件，演示包在本地存储其数据文件。

回答by sean

Have a look at Google Gears, http://code.google.com/apis/gears/. Although they have been phased out in favour of HTML5. However, it seems that what is being pushed as HTML5 is Google Gears.

查看 Google Gears，http://code.google.com/apis/gears/。尽管它们已被 HTML5 淘汰。然而，似乎作为 HTML5 被推动的是 Google Gears。