Question

是否可以在浏览器中在中构建应用程序？申请表示：

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

应用程序以典型的基于Web的模式运行

应用程序将必要的数据存储在离线存储中，以便在离线模式下使用（2）

应用程序同步/推送数据（在离线模式下捕获）从离线模式恢复到在线模式时返回服务器

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

应用程序仍会运行（javascript？）

应用程序将向用户
显示数据（离线存储）
应用程序可以接受来自用户的输入（以及存储/附加在离线存储中）

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

由于

Answer 1

是的，这是可能的。

您需要使用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来存储和加载数据。

Answer 2

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

注意：由于Mark Pilgrim的原始Dive Into HTML5链接似乎已经失效。

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

Answer 3

杰克阿奇博尔德写了“离线食谱”。现代（2014年12月9日）和ServiceWorker的好方法：

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

Answer 4

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

Another demo.

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

Answer 5

2018年的答案是利用服务工作者，并构建一个渐进式Web应用程序： https://developers.google.com/web/progressive-web-apps/

Answer 6

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

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

Answer 7

Javascript为您提供网站离线模式选项，并调用 UpUp Javascript Framework 。这是一个小小的脚本，可确保您的网站始终为您的用户提供服务，即使他们在飞机上或在海底的2万个联盟中也是如此。

<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.css 和 offline.css 。让我们确保它们在离线时缓存并可供我们的用户使用

Answer 8

查看Google Gears，http://code.google.com/apis/gears/。虽然他们已经逐步取消HTML5。但是，似乎HTML5推出的内容是Google Gears。

可以在（HTML5）浏览器中使用离线模式应用吗？

8 个答案: