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

【问题标题】：Offline mode app in a (HTML5) browser possible?（HTML5）浏览器中的离线模式应用程序可能吗？
【发布时间】：2011-02-16 16:42:33
【问题描述】：

是否可以在浏览器中inside 构建应用程序？申请意味着：

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

2 浏览器与远程应用服务器之间无连接（离线模式）：

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

谢谢

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

Jake Archibald 撰写了“离线食谱”。 ServiceWorker 的现代（2014 年 12 月 9 日）和不错的方法：

【讨论】：

【解决方案3】：

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

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

现在可以在here 等其他地方找到副本。

【讨论】：

任何寻找 Mark Pilgrim 的“Dive Into HTML5”的人都应该看看diveintohtml5.info 和diveintohtml5.info/offline.html

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

看看 Google Gears，http://code.google.com/apis/gears/。尽管它们已被逐步淘汰以支持 HTML5。但是，似乎作为 HTML5 被推送的是 Google Gears。

【讨论】：

【解决方案6】：

是的，这是可能的。

您需要用 Javascript 编写应用程序，并以某种方式检测浏览器是否处于离线模式（最简单的方法是不时轮询服务器）。（编辑：查看 cmets 了解检测离线模式的更好方法）
确保您的应用程序仅包含静态 HTML、Js 和 CSS 文件（或在脚本中手动设置缓存策略，以便您的浏览器在离线模式下记住它们）。页面的更新是通过 JS DOM 操作完成的，而不是通过服务器（ExtJS http://www.extjs.com 等框架将在此处为您提供帮助）
对于存储，使用诸如 PersistJS (http://github.com/jeremydurham/persist-js) 之类的模块，它使用浏览器的本地存储来跟踪数据。恢复连接后，与服务器同步。
您需要预先缓存使用的图像和其他资产，否则如果您之前没有使用它们，它们将在离线模式下不可用。
再次重申：您的应用程序的大部分内容需要使用 javascript，如果服务器无法访问，PHP/Ruby/Python 框架对您的帮助很小。服务器可能会尽可能简单，使用类似 REST 的 AJAX API 来存储和加载数据。

【讨论】：

你可以使用navigator.onLine来测试浏览器是否在线
navigator.onLine 在许多浏览器中没有给出准确的值。例如，请参阅code.google.com/p/chromium/issues/detail?id=7469。
@kpozin WebKit 中的问题已修复，现在所有主流浏览器都支持它
在 Firefox navigator.onLine 中只有在用户将浏览器设置为离线模式时才返回 false，即使它没有连接developer.mozilla.org/en-US/docs/DOM/window.navigator.onLine
@CaptainkurO 您现在链接的页面显示：“从 Firefox 41 开始，在 OS X 和 Windows 上，值将遵循实际的网络连接。”所以显然它现在已经在 Firefox 中修复了。