Hinzufügen der Offlinedatensynchronisierung zu Ihrer Apache Cordova-App

Artikel
05/05/2021

Anmerkung

Dieses Produkt wird eingestellt. Eine Ersetzung für Projekte mit .NET 8 oder höher finden Sie in der Community Toolkit Datasync-Bibliothek.

In diesem Lernprogramm wird das Offlinesynchronisierungsfeature von Azure Mobile Apps für die Apache Cordova-Schnellstart-App behandelt. Die Offlinesynchronisierung ermöglicht Endbenutzern die Interaktion mit einer mobilen App – Anzeigen, Hinzufügen oder Ändern von Daten – auch wenn keine Netzwerkverbindung vorhanden ist. Änderungen werden in einer lokalen Datenbank gespeichert. Sobald das Gerät wieder online ist, werden diese Änderungen mit dem Remote-Back-End synchronisiert.

Bevor Sie dieses Lernprogramm starten, sollten Sie das Apache Cordova Quickstart Tutorialabgeschlossen haben, das das Erstellen eines geeigneten Back-End-Diensts umfasst.

Weitere Informationen zum Offlinesynchronisierungsfeature finden Sie im Thema Offlinedatensynchronisierung in Azure Mobile Apps.

Aktualisieren der App zur Unterstützung der Offlinesynchronisierung

Im Onlinevorgang verwenden Sie getTable(), um einen Verweis auf die Onlinetabelle abzurufen. Bei der Implementierung von Offlinefunktionen verwenden Sie getSyncTable(), um einen Verweis auf den Offline-SQlite-Speicher abzurufen. Der SQlite Store wird vom Apache Cordova cordova-sqlite-storage Pluginbereitgestellt.

Anmerkung

Die Offlinesynchronisierung ist nur für Android und iOS verfügbar. Es funktioniert nicht innerhalb der Spezifikation der Browserplattform.

In der datei www/js/index.js:

Aktualisieren Sie die initializeStore()-Methode, um die lokale SQlite-Datenbank zu initialisieren:

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);
}

Aktualisieren Sie die setup()-Methode, um die Offlineversion der Tabelle zu verwenden:

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

Ersetzen Sie die syncLocalTable()-Methode, die die Daten im Offlinespeicher mit dem Onlinespeicher synchronisiert:

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

Erstellen der App

Führen Sie die folgenden Befehle aus, um die Android-App zu erstellen:

cordova clean android
cordova build android

Sie können die App ausführen:

cordova run android

Testen in Visual Studio Code

Sie können den Debugger in Visual Studio Code verwenden, wenn die Cordova Tools Erweiterung installiert sind. Klicken Sie auf den Debugger, und erstellen Sie dann eine launch.json Datei. Wenn Sie dazu aufgefordert werden, wählen Sie Cordovaaus, und wählen Sie dann die Konfigurationen aus (z. B. Android auf Emulator ausführen). Nachdem Sie eine Startkonfiguration erstellt haben, können Sie die App im Debugger ausführen. Er wird auf Dem Emulator der Wahl gestartet. Sie können jedoch nun die Debugausgabe in der Debugkonsole sehen.

Testen der App

Testen Sie in diesem Abschnitt das Verhalten mit wlan, und deaktivieren Sie dann WLAN, um ein Offlineszenario zu erstellen.

Elemente in der Aufgabenliste werden in einer SQLite-Datenbank auf dem Gerät gespeichert. Wenn Sie die Daten aktualisieren, werden die Änderungen an den Dienst (Push) gesendet. Die App fordert dann alle neuen Elemente an (Pull). Im Lernprogramm wird die Aktualisierung durch Drücken eines Symbols oder mithilfe von "Zum Aktualisieren ziehen" ausgewählt.

Platzieren Sie das Gerät oder den Simulator im Flugzeugmodus.
Fügen Sie einige Todo-Elemente hinzu, oder markieren Sie einige Elemente als abgeschlossen.
Beenden Sie das Gerät oder den Simulator (oder schließen Sie die App), und starten Sie die App neu.
Stellen Sie sicher, dass Ihre Änderungen auf dem Gerät beibehalten wurden.
Zeigen Sie den Inhalt der Azure TodoItem- Tabelle an. Verwenden Sie ein SQL-Tool wie SQL Server Management Studiooder einen REST-Client wie Curl. Stellen Sie sicher, dass die neuen Elemente nicht mit dem Server synchronisiert wurden
Aktivieren Sie WLAN auf dem Gerät oder Simulator.
Aktualisieren Sie die Daten, entweder durch "Aktualisieren durch Ziehen" oder durch Drücken des Aktualisierungssymbols.
Überprüfen Sie die TodoItem- Tabellendaten erneut. Die neuen und geänderten Elemente sollten jetzt angezeigt werden.

Nächste Schritte

Fahren Sie fort, um Authentifizierungzu implementieren.

Freigeben über