Freigeben über

Aktivieren der Offlinesynchronisierung für Ihre mobile Cordova-App

Überblick

In diesem Lernprogramm wird das Offlinesynchronisierungsfeature von Azure Mobile Apps für Cordova vorgestellt. 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 Remotedienst synchronisiert.

Dieses Lernprogramm basiert auf der Cordova-Schnellstartlösung für mobile Apps, die Sie erstellen, wenn Sie das Lernprogramm Apache Cordova schnell starten. In diesem Lernprogramm aktualisieren Sie die Schnellstartlösung, um Offlinefeatures von Azure Mobile Apps hinzuzufügen. Außerdem heben wir den offlinespezifischen Code in der App hervor.

Weitere Informationen zum Offlinesynchronisierungsfeature finden Sie im Thema Offlinedatensynchronisierung in Azure Mobile Apps. Ausführliche Informationen zur API-Verwendung finden Sie in der API-Dokumentation.

Hinzufügen der Offlinesynchronisierung zur Schnellstartlösung

Der Offlinesynchronisierungscode muss der App hinzugefügt werden. Für die Offlinesynchronisierung ist das cordova-sqlite-storage-Plug-In erforderlich, das Ihrer App automatisch hinzugefügt wird, wenn das Azure Mobile Apps-Plug-In im Projekt enthalten ist. Das Schnellstartprojekt enthält beide Plug-Ins.

  1. Öffnen Sie im Projektmappen-Explorer von Visual Studio index.js, und ersetzen Sie den folgenden Code.

     var client,            // Connection to the Azure Mobile App backend
    todoItemTable;      // Reference to a table endpoint on backend

    mit diesem Code:

     var client,            // Connection to the Azure Mobile App backend
    todoItemTable,      // Reference to a table endpoint on backend
    syncContext;        // Reference to offline data sync context

  2. Ersetzen Sie als Nächstes den folgenden Code:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');

    mit diesem Code:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
 var store = new WindowsAzure.MobileServiceSqliteStore('store.db');

 store.defineTable({
   name: 'todoitem',
   columnDefinitions: {
       id: 'string',
       text: 'string',
       complete: 'boolean',
       version: 'string'
   }
 });

 // Get the sync context from the client
 syncContext = client.getSyncContext();

    Die vorherigen Codezufügungen initialisieren den lokalen Speicher und definieren eine lokale Tabelle, die den spaltenwerten entspricht, die in Ihrem Azure-Back-End verwendet werden. (Sie müssen nicht alle Spaltenwerte in diesen Code einschließen.) Das version Feld wird vom mobilen Back-End verwaltet und für die Konfliktauflösung verwendet.

    Sie erhalten einen Verweis auf den Synchronisierungskontext, indem Sie getSyncContext aufrufen. Der Synchronisierungskontext trägt dazu bei, Tabellenbeziehungen beizubehalten, indem Änderungen in allen Tabellen nachverfolgt und pusht werden, die eine Client-App geändert hat, wenn .push() sie aufgerufen wird.

  3. Aktualisieren Sie die Anwendungs-URL auf Ihre URL der Mobilen App-Anwendung.

  4. Ersetzen Sie als Nächstes diesen Code:

     todoItemTable = client.getTable('todoitem'); // todoitem is the table name

    mit diesem Code:

     // Initialize the sync context with the store
 syncContext.initialize(store).then(function () {

 // Get the local table reference.
 todoItemTable = client.getSyncTable('todoitem');

 syncContext.pushHandler = {
     onConflict: function (pushError) {
         // Handle the conflict.
         console.log("Sync conflict! " + pushError.getError().message);
         // Update failed, revert to server's copy.
         pushError.cancelAndDiscard();
       },
       onError: function (pushError) {
           // Handle the error
           // In the simulated offline state, you get "Sync error! Unexpected connection failure."
           console.log("Sync error! " + pushError.getError().message);
       }
 };

 // Call a function to perform the actual sync
 syncBackend();

 // Refresh the todoItems
 refreshDisplay();

 // Wire up the UI Event Handler for the Add Item
 $('#add-item').submit(addItemHandler);
 $('#refresh').on('click', refreshDisplay);

    Der vorangehende Code initialisiert den Synchronisierungskontext und ruft dann getSyncTable (anstelle von getTable) auf, um einen Verweis auf die lokale Tabelle abzurufen.

    Dieser Code verwendet die lokale Datenbank für alle CruD-Tabellenvorgänge (Create, Read, Update, Delete).

    In diesem Beispiel wird eine einfache Fehlerbehandlung bei Synchronisierungskonflikten ausgeführt. Eine echte Anwendung würde die verschiedenen Fehler wie Netzwerkbedingungen, Serverkonflikte und andere behandeln. Codebeispiele finden Sie im Offlinesynchronisierungsbeispiel.

  5. Fügen Sie als Nächstes diese Funktion hinzu, um die tatsächliche Synchronisierung auszuführen.

     function syncBackend() {

   // Sync local store to Azure table when app loads, or when login complete.
   syncContext.push().then(function () {
       // Push completed

   });

   // Pull items from the Azure table after syncing to Azure.
   syncContext.pull(new WindowsAzure.Query('todoitem'));
 }

    Sie entscheiden, wann Änderungen an das Back-End der mobilen App übertragen werden sollen, indem Sie syncContext.push()aufrufen. Sie können beispielsweise syncBackend in einem Schaltflächenereignishandler aufrufen, der an eine Synchronisierungsschaltfläche gebunden ist.

Überlegungen zur Offlinesynchronisierung

Im Beispiel wird die Pushmethode von syncContext nur beim Starten der App in der Rückruffunktion für die Anmeldung aufgerufen. In einer realen Anwendung können Sie diese Synchronisierungsfunktion auch manuell auslösen oder wenn sich der Netzwerkstatus ändert.

Wenn ein Pull für eine Tabelle ausgeführt wird, die über ausstehende lokale Updates verfügt, die vom Kontext nachverfolgt werden, löst dieser Pullvorgang automatisch einen Push aus. Beim Aktualisieren, Hinzufügen und Abschließen von Elementen in diesem Beispiel können Sie den expliziten Pushaufruf weglassen, da er möglicherweise redundant ist.

Im bereitgestellten Code werden alle Datensätze in der Remote-todoItem-Tabelle abgefragt, aber es ist auch möglich, Datensätze zu filtern, indem sie eine Abfrage-ID und Abfrage an Push übergeben. Weitere Informationen finden Sie im Abschnitt "Inkrementelle Synchronisierung in Offlinedatensynchronisierung in Azure Mobile Apps".

(Optional) Authentifizierung deaktivieren

Wenn Sie die Authentifizierung nicht einrichten möchten, bevor Sie die Offlinesynchronisierung testen, kommentieren Sie die Rückruffunktion für die Anmeldung aus, lassen Sie den Code jedoch in der Rückruffunktion unkommentiert. Nach dem Kommentieren der Anmeldezeilen folgt der Code:

  // Login to the service.
  // client.login('twitter')
  //    .then(function () {
    syncContext.initialize(store).then(function () {
      // Leave the rest of the code in this callback function  uncommented.
            ...
    });
  // }, handleError);

Die App wird nun mit dem Azure-Back-End synchronisiert, wenn Sie die App ausführen.

Ausführen der Client-App

Wenn die Offlinesynchronisierung jetzt aktiviert ist, können Sie die Clientanwendung mindestens einmal auf jeder Plattform ausführen, um die lokale Speicherdatenbank aufzufüllen. Simulieren Sie später ein Offlineszenario, und ändern Sie die Daten im lokalen Store, während die App offline ist.

(Optional) Testen des Synchronisierungsverhaltens

In diesem Abschnitt ändern Sie das Clientprojekt so, dass ein Offlineszenario mithilfe einer ungültigen Anwendungs-URL für Ihr Back-End simuliert wird. Wenn Sie Datenelemente hinzufügen oder ändern, werden diese Änderungen im lokalen Speicher gespeichert, aber nicht mit dem Back-End-Datenspeicher synchronisiert, bis die Verbindung erneut hergestellt wird.

  1. Öffnen Sie im Projektmappen-Explorer die index.js Projektdatei, und ändern Sie die Anwendungs-URL so, dass sie auf eine ungültige URL verweist, z. B. den folgenden Code:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');

  2. Aktualisieren Sie in index.htmldas CSP-Element <meta> mit derselben ungültigen URL.

     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://yourmobileapp.azurewebsites.net-fail; style-src 'self'; media-src *">

  3. Erstellen und ausführen Sie die Client-App, und beachten Sie, dass eine Ausnahme in der Konsole protokolliert wird, wenn die App nach der Anmeldung versucht, mit dem Back-End zu synchronisieren. Alle neuen Elemente, die Sie hinzufügen, sind nur im lokalen Speicher vorhanden, bis sie an das mobile Back-End übertragen werden. Die Client-App verhält sich so, als ob sie mit dem Back-End verbunden ist.

  4. Schließen Sie die App, und starten Sie sie neu, um zu überprüfen, ob die von Ihnen erstellten neuen Elemente im lokalen Store beibehalten werden.

  5. (Optional) Verwenden Sie Visual Studio, um Ihre Azure SQL-Datenbanktabelle anzuzeigen, um zu sehen, dass sich die Daten in der Back-End-Datenbank nicht geändert haben.

    Öffnen Sie in Visual Studio den Server-Explorer. Navigieren Sie zu Ihrer Datenbank innerhalb der Azure->SQL-Datenbanken. Klicken Sie mit der rechten Maustaste auf Ihre Datenbank, und wählen Sie im SQL Server-Objekt-Explorer "Öffnen" aus. Jetzt können Sie zu Ihrer SQL-Datenbanktabelle und ihrem Inhalt navigieren.

(Optional) Testen der erneuten Verbindung mit Ihrem mobilen Back-End

In diesem Abschnitt verbinden Sie die App wieder mit dem mobilen Backend, wodurch simuliert wird, dass die App in einen Online-Status zurückkehrt. Wenn Sie sich anmelden, werden Die Daten mit Ihrem mobilen Back-End synchronisiert.

  1. Öffnen Sie index.js erneut, und stellen Sie die Anwendungs-URL wieder her.

  2. Öffnen Sie index.html erneut, und korrigieren Sie die Anwendungs-URL im CSP-Element <meta> .

  3. Erstellen Sie die Client-App neu, und führen Sie sie aus. Die App versucht, nach der Anmeldung mit dem Back-End der mobilen App zu synchronisieren. Stellen Sie sicher, dass in der Debugkonsole keine Ausnahmen protokolliert werden.

  4. (Optional) Zeigen Sie die aktualisierten Daten mithilfe des SQL Server-Objekt-Explorers oder eines REST-Tools wie Fiddler an. Beachten Sie, dass die Daten zwischen der Back-End-Datenbank und dem lokalen Speicher synchronisiert wurden.

    Beachten Sie, dass die Daten zwischen der Datenbank und dem lokalen Speicher synchronisiert wurden und die Elemente enthalten, die Sie hinzugefügt haben, während Ihre App getrennt war.

Weitere Ressourcen

Nächste Schritte

  • Last updated on