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

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

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

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

更新应用以支持脱机同步

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

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

1. 更新 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);
   }
   

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

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

3. 替换 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 Tools 扩展，则可以在 Visual Studio Code 中使用调试器。 单击调试器，然后创建 launch.json 文件。 出现提示时，选择“Cordova”，然后选择配置（如“在仿真器上运行 Android”）。 创建启动配置后，可以在调试器中运行应用。 它会在所选的仿真器中启动。 但是，现在能够在调试控制台中查看调试输出。

测试应用程序

在此部分中，会在启用 WiFi 的情况下测试行为，然后关闭 WiFi 以创建脱机方案。

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

1. 将设备或模拟器置于飞行模式中。
2. 添加一些 Todo 项或将一些项标记为“完成”。
3. 退出设备或模拟器（或强制关闭应用），并重新启动应用。
4. 验证更改是否已在设备上保存。
5. 查看 Azure TodoItem 表的内容。 使用 SQL 工具（如 SQL Server Management Studio）或 REST 客户端（如 Fiddler 或 Postman）。 验证新项是否未同步到服务器
6. 在设备或模拟器中打开 WiFi。
7. 通过“下拉以刷新”或按刷新图标来刷新数据。
8. 再次查看 TodoItem 表数据。 新的和更改的项现在应会出现。

后续步骤

继续实现身份验证。