將離線資料同步新增至 Apache Cordova 應用程式

發行項
05/05/2021

注意

此產品已淘汰。如需使用 .NET 8 或更新版本的專案取代專案，請參閱 Community Toolkit Datasync 連結庫。

本教學課程涵蓋適用於 Apache Cordova 的 Azure Mobile Apps 快速入門應用程式的離線同步處理功能。離線同步處理可讓使用者與行動應用程式互動—檢視、新增或修改數據，即使沒有網路連線也一點也不然。變更會儲存在本機資料庫中。裝置重新上線后，這些變更會與遠端後端同步。

開始本教學課程之前，您應該已完成 Apache Cordova 快速入門教學課程，其中包括建立適當的後端服務。

若要深入瞭解離線同步功能，請參閱在 Azure Mobile Apps 中離線數據同步主題。

更新應用程式以支援離線同步處理

在在線作業中，您可以使用 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 Tools 擴充功能，則可以在 Visual Studio Code 中使用調試程式。按兩下調試程式，然後建立 launch.json 檔案。出現提示時，選取 [Cordova]，然後選取組態（例如 在模擬器上執行 Android]。建立啟動組態之後，您就可以在調試程式中執行應用程式。它會在您選擇的模擬器上啟動。不過，您現在可以在偵錯控制台中看到偵錯輸出。

測試應用程式

在本節中，使用WiFi開啟測試行為，然後關閉WiFi以建立離線案例。

Todo 清單中的專案會儲存在裝置上的 SQLite 資料庫中。當您重新整理數據時，變更會傳送至服務（push）。然後，應用程式會要求任何新專案（提取）。在本教學課程中，按下圖示或使用「提取重新整理」來選取重新整理。

將裝置或模擬器置於 飛機模式。
新增一些Todo專案，或將某些項目標示為完成。
結束裝置或模擬器（或強制關閉應用程式），然後重新啟動應用程式。
確認您的變更已保存在裝置上。
檢視 Azure TodoItem 數據表的內容。使用 SQL 工具，例如 SQL Server Management Studio或 REST 用戶端，例如 Curl。確認新專案 尚未同步至伺服器
在裝置或模擬器中開啟WiFi。
藉由「提取以重新整理」或按重新整理圖示來重新整理數據。
再次檢閱 TodoItem 數據表數據。新的和已變更的項目現在應該會出現。

後續步驟

繼續執行驗證。

共用方式為