使 Web 应用离线可用的策略？

Question

我们目前正在构建一个Web应用程序（Django，Ember），我们发现大多数潜在客户需要偶尔离线访问该应用程序。

我们需要的不仅是“呈现”应用程序以便用户可以导航，在清单中缓存内容等（我想最终也需要），而是必须让用户尽可能地像在线一样操作。 显然会有一些功能不可用，但应保证基本使用可用。

话虽如此，我很想听听之前遇到过这种情况的人的想法。以下是我认为需要做的：

1. 要么不断检查是否联网/离线，要么让用户指定何时进入离线模式（类似智能手机上的飞行模式）。

2. 所有数据都应转储到IndexedDB，并从那一刻起，我们将使用IndexedDB与任何与数据相关的操作。

3. 当用户重新联网时，同步过程必须尝试将数据从离线用户转储到在线数据库中。尽管这可能看起来很危险，但我不希望有很多用户同时离线，而其他在线用户正在使用该应用程序，因此我希望这个同步过程不会变成真正的噩梦，并且我不期望发生竞争条件。

当然，还有创建桌面独立应用程序的选项...但我会尽量避免这种情况...

谢谢！

- AlejandroVK

---

为了帮助解决问题＃1，您可以为“offline”和“online”事件添加事件处理程序。当设备离线和重新联机时，这些事件会被触发。 - Jed Fox

你在服务器上使用哪个数据库？ - Louis Barranqueiro

@LouisBarranqueiro 使用PostgreSQL和redis进行缓存。 - AlejandroVK

对于任何回到这里的人，我发现了这个很有用的资源网站https://github.com/pazguille/offline-first，甚至不知道有一种叫做ServiceWorkers的东西... - AlejandroVK

Answer 1

1. 要检查用户是否离线或在线，您可以使用navigator.onLine，但是该属性并不支持所有浏览器。如果您针对其中一些浏览器，则需要使用AJAX调用等其他解决方案。

2. 关于同步，您可以在服务器上使用可用的解决方案，例如CouchDB（NoSQL），并在javascript前端中使用PouchDB（indexedDB），这将简化同步过程。如果不符合您的期望，则实现自己的解决方案，将indexedDB与服务器数据库（MySQL、Postgres、MongoDB等）进行同步，当然，您仍然可以在前端使用pouchDB。

3. 关于性能，我认为它会大大取决于：

   • 托管您的Web应用程序的服务器数量
   • 主数据库副本的数量
   • 服务器配置（CPU和RAM）

- Louis Barranqueiro

---

谢谢您的回复，我已经阅读了很多资料，看起来ServiceWorker-IndexedDB（PouchDB）和CouchDB似乎是正确的选择。我的唯一担忧是如何将CouchDB（noSQL）与我的PostgreSQL服务器数据库同步... - AlejandroVK

PouchDB 是你的意思吗？因为 CouchDB 是服务器上的数据库。 - Louis Barranqueiro

哦，你想使用PouchDB与CouchDB并将CouchDB与PostgreSQL同步。为什么不直接使用PouchDB和PostgreSQL呢？ - Louis Barranqueiro

不确定是否可以完成，我在离线优先的世界中是一个完全的新手:D - AlejandroVK

可以做到，但你必须实现适配器。这是很多工作量的。当然，最快的方法是使用PouchDb和CouchDB。请查看此链接：如何在具有PostgreSQL数据库的Web应用程序中实现完全离线功能。 - Louis Barranqueiro