如何制作离线AngularJS / Cordova应用程序？

Question

我有一个AngularJS应用程序（嵌入在Cordova应用程序中）。 要获取和设置数据，它使用REST API（在Django后端服务器上运行）。

即使网络出现故障，我也需要该应用程序继续为多项功能工作。 例如，我期待这种行为：

在线模式

• 客户在应用中执行某些操作
• 将POST请求（用于创建数据）发送到API
• 客户得到了＃34;感谢您做xxx＆＃34;

后退离线模式

• 客户在应用上购物
• 客户得到了＆＃34; xxx现在无法完成，但会尽快完成＆＃34;
• 由于我们已离线，因此无法将任何内容发送到服务器。那该怎么办？有没有办法将API请求放入队列中，当我们回到在线模式时会执行这些请求？

你在技术上如何设计这个？似乎离线模式有很多不同的技术，这对我来说有点混乱。欢迎任何指导。

非常感谢。

Answer 1

我想使用这样的应用程序，这会让我感到愚蠢。但是有

您可以使用此插件检查网络状态。

https://github.com/apache/cordova-plugin-network-information/blob/master/doc/index.md

每个请求都需要在发送HTTP POST和将POST数据保存到本地存储之间进行切换。

然后你只需要为以下事件创建回调：

document.addEventListener("offline", onOffline, false);
function onOffline() {
    // Turn on saving to local storage
}

document.addEventListener("online", onOnline, false);
function onOnline() {
    // Read local storage, send all requests
}

Answer 2

我不确定评论中的压力是不是要做到这一点。我们正在开发的应用程序中具有此功能。

基本上，我们将iOS应用程序打包为Cordova包装的Web容器，并在应用程序中运行本地代理服务器。它将所有数据通过它传递给Web服务。如果请求失败，它会向应用程序返回一个标识符，以便您可以确定与服务器的连接已关闭，然后应用程序将请求保存到localStorage。这样，UI可以适应处于“离线模式”。稍后，一旦恢复与服务器的连接，您就可以通过代理从应用程序推送数据。该应用程序直接连接到代理而不是Web服务。

据我所知，虽然没有一个简单的库来解决这种情况，但你必须知道这些请求将如何影响在线应用程序（如果系统中的内容不同步）用户运行缓存直到以后的请求？）

但绝对可以做到这一点。