将脱机数据同步添加到 Apache Cordova 应用

项目
05/05/2021

注意

此产品已停用。有关使用 .NET 8 或更高版本的项目的替换，请参阅 Community Toolkit Datasync 库。

本教程介绍适用于 Apache Cordova 的 Azure 移动应用的脱机同步功能快速入门应用。脱机同步允许最终用户与移动应用交互（查看、添加或修改数据），即使没有网络连接也是如此。更改存储在本地数据库中。设备重新联机后，这些更改会与远程后端同步。

在开始本教程之前，应已完成 Apache Cordova 快速入门教程，其中包括创建合适的后端服务。

若要了解有关脱机同步功能的详细信息，请参阅主题 Azure 移动应用中的脱机数据同步。

更新应用以支持脱机同步

在联机操作中，使用 getTable() 获取对联机表的引用。实现脱机功能时，可以使用 getSyncTable() 来获取对脱机 SQlite 存储的引用。 SQlite 存储由 Apache Cordova cordova-sqlite-storage 插件提供。

注意

脱机同步仅适用于 Android 和 iOS。它在浏览器平台规范中不起作用。

在 www/js/index.js 文件中：

更新 initializeStore() 方法以初始化本地 SQlite 数据库：

function initializeStore() {
    store = new WindowsAzure.MobileServiceSqliteStore();

    var tableDefinition = {
        name: 'todoitem',
        columnDefinitions: {
            id: 'string',
            deleted: 'boolean',
            version: 'string',
            Text: 'string',
            Complete: 'boolean'
        }
    };

    return store
        .defineTable(tableDefinition)
        .then(initializeSyncContext);
}

function initializeSyncContext() {
    syncContext = client.getSyncContext();
    syncContext.pushHandler = {
        onConflict: function (pushError) {
            return pushError.cancelAndDiscard();
        },
        onError: function (pushError) {
            return pushError.cancelAndDiscard();
        }
    };
    return syncContext.initialize(store);
}

更新 setup() 方法以使用表的脱机版本：

function setup() {
    todoTable = client.getSyncTable('todoitem');
    refreshDisplay();
    addItemEl.addEventListener('submit', addItemHandler);
    refreshButtonEl.addEventListener('click', refreshDisplay);
}

替换将脱机存储中的数据与在线商店同步的 syncLocalTable() 方法：

function syncLocalTable() {
    return syncContext.push().then(function () {
        return syncContext.pull(new WindowsAzure.Query('todoitem'));
    });
}

生成应用

运行以下命令以生成 Android 应用：

cordova clean android
cordova build android

可以运行应用：

cordova run android

在 Visual Studio Code 中测试

如果安装了 Cordova 工具扩展，则可以在 Visual Studio Code 中使用调试器。单击调试器，然后创建 launch.json 文件。出现提示时，选择 Cordova，然后选择配置（例如 在模拟器上运行 Android）。创建启动配置后，可以在调试器中运行应用。它将在所选模拟器上启动。但是，现在可以在调试控制台中看到调试输出。

测试应用

在本部分中，使用 WiFi 打开测试行为，然后关闭 WiFi 以创建脱机方案。

待办事项列表中的项存储在设备上的 SQLite 数据库中。刷新数据时，更改将发送到服务（推送）。然后，应用请求任何新项（拉取）。在本教程中，通过按图标或使用“拉取刷新”来选择刷新。

将设备或模拟器置于 飞行模式。
添加一些待办事项，或将某些项标记为已完成。
退出设备或模拟器（或强行关闭应用）并重启应用。
验证更改是否已保留在设备上。
查看 Azure TodoItem 表的内容。使用 SQL 工具（例如 SQL Server Management Studio）或 REST 客户端（如 curl）。验证新项尚未同步到服务器
在设备或模拟器中打开 WiFi。
通过“拉取刷新”或按刷新图标刷新数据。
再次查看 TodoItem 表数据。现在应显示新的和已更改的项。

后续步骤

继续实现身份验证。

通过