Freigeben über

Aktivieren der Offlinesynchronisierung für Ihre mobile Cordova-App

  • Artikel

Übersicht

In diesem Tutorial wird das Offlinesynchronisierungsfeature von Azure Mobile Apps für Cordova vor 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 Tutorial basiert auf der Cordova-Schnellstart-Projektmappe für Mobile Apps, die Sie im Rahmen des Tutorials Apache Cordova-Schnellstartprojekterstellen. In diesem Tutorial erweitern Sie die Schnellstart-Projektmappe mit Offlinefeatures von Azure Mobile Apps. Außerdem gehen wir speziell auf den offlinespezifischen Code in der App ein.

Weitere Informationen zur Offlinesynchronisierungsfunktion finden Sie im Thema Offlinedatensynchronisierung in Azure Mobile Apps. Details zur API-Verwendung finden Sie in der API-Dokumentation.

Hinzufügen der Offlinesynchronisierung zur Schnellstart-Projektmappe

Der Code für die Offlinesynchronisierung muss der App hinzugefügt werden. Für die Offlinesynchronisierung wird das Plug-In „cordova-sqlite-storage“ benötigt. Dieses wird Ihrer App automatisch hinzugefügt, wenn das Azure Mobile Apps-Plug-In in das Projekt eingeschlossen wird. Im Schnellstartprojekt sind beide Plug-Ins enthalten.

  1. Öffnen Sie im Projektmappen-Explorer von Visual Studio die Projektdatei „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

    durch diesen 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');

    durch diesen 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();

    Der obigen Codeergänzungen initialisieren den lokalen Speicher und definieren eine lokale Tabelle mit Spaltenwerten, die auch in Ihrem 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 wird für die Konfliktauflösung verwendet.

    Einen Verweis auf den Synchronisierungskontext erhalten Sie durch Aufrufen von getSyncContext. Der Synchronisierungskontext hilft dabei, Tabellenbeziehungen durch das Nachverfolgen und Übertragen von Änderungen in allen Tabellen beizubehalten, die eine Clientanwendung geändert hat, wenn .push() aufgerufen wird.

  3. Legen Sie die Anwendungs-URL auf die Mobile App-Anwendungs-URL fest.

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

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

    durch diesen 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 obige Code initialisiert den Synchronisierungskontext und ruft dann „getSyncTable“ (anstelle von „getTable“) auf, um einen Verweis auf die lokale Tabelle abzurufen.

    Diese Klasse verwendet für alle Tabellenvorgänge vom Typ Erstellen, Lesen, Aktualisieren und Löschen (Create/Read/Update/Delete, CRUD) die lokale Datenbank.

    In diesem Beispiel wird bei Synchronisierungskonflikten eine einfache Fehlerbehandlung durchgeführt. In einer echten Anwendung werden verschiedene Fehler wie Netzwerkbedingungen, Serverkonflikte und andere Probleme behandelt. Codebeispiele finden Sie im Beispiel zur Offlinesynchronisierung.

  5. Fügen Sie im nächsten Schritt die folgende Funktion hinzu, um die eigentliche Synchronisierung durchzufü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'));
 }

    Änderungen werden an das Mobile App-Back-End übertragen, wenn Sie syncContext.push() aufrufen. Beispielsweise können Sie syncBackend in einem an eine Synchronisierungsschaltfläche gebundenen Schaltflächen-Ereignishandler aufrufen.

Aspekte der Offlinesynchronisierung

Im vorliegenden Beispiel wird die push-Methode von syncContext nur beim Start der App in der Rückruffunktion für die Anmeldung aufgerufen. In einer echten Anwendung kann die Synchronisierungsfunktion auch manuell oder bei einer Änderung des Netzwerkzustands ausgelöst werden.

Bei einem Pullvorgang für eine Tabelle mit ausstehenden lokalen Updates, die durch den Kontext verfolgt werden, löst dieser Pullvorgang automatisch einen Pushvorgang aus. Beim Aktualisieren, Hinzufügen und Abschließen von Elementen in diesem Beispiel können Sie den expliziten push-Aufruf weglassen, da er ggf. redundant ist.

Im bereitgestellten Code werden alle Datensätze in der todoItem-Remotetabelle abgefragt, es ist aber auch möglich, Datensätze durch Übergeben einer Abfrage-ID und Abfrage an pushzu filtern. Weitere Informationen finden Sie unter Offlinedatensynchronisierung in Azure Mobile Apps im Abschnitt Offlinedatensynchronisierung in Azure Mobile Apps.

(Optional) Deaktivieren der Authentifizierung

Falls Sie die Offlinesynchronisierung ohne Authentifizierung testen möchten, kommentieren Sie die Rückruffunktion für die Anmeldung aus, aber lassen Sie den Code innerhalb der Rückruffunktion unkommentiert. Nach dem Auskommentieren der Anmeldezeilen sieht der Code wie folgt aus:

  // 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

Nach dem Aktivieren der Offlinesynchronisierung können Sie die Clientanwendung mindestens einmal auf jeder Plattform ausführen, um die lokale Speicherdatenbank aufzufüllen. Weiter unten simulieren Sie ein Offlineszenario und ändern die Daten im lokalen Speicher, während die App offline ist.

(Optional) Testen des Synchronisierungsverhaltens

In diesem Abschnitt ändern Sie das Clientprojekt, um ein Offlineszenario mit einer ungültigen Anwendungs-URL für Ihr Back-End zu simulieren. Beim Hinzufügen oder Ändern von Datenelementen werden diese Änderungen im lokalen Speicher gespeichert, aber erst mit dem Back-End-Datenspeicher synchronisiert, wenn die Verbindung wiederhergestellt wurde.

  1. Öffnen Sie in der Projektmappen-Explorer die index.js Projektdatei, und ändern Sie die Anwendungs-URL, um auf eine ungültige URL zu verweisen, z. B. den folgenden Code:

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

  2. Aktualisieren Sie in „index.html“ das <meta>-CSP-Element mit der gleichen 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 Sie die Client-App, und führen Sie sie aus. In der Konsole wird nach der Anmeldung jedes Mal eine Ausnahme protokolliert, wenn die App versucht, eine Synchronisierung mit dem Back-End durchzuführen. Neu hinzugefügte Elemente sind nur im lokalen Speicher vorhanden, bis sie per Push an das mobile Back-End übertragen werden. Die Client-App verhält sich so, als wäre sie mit dem Back-End verbunden.

  4. Schließen Sie die App und starten Sie sie erneut, um zu überprüfen, ob die neuen Elemente dauerhaft im lokalen Speicher gespeichert wurden.

  5. (Optional) Verwenden Sie Visual Studio zum Anzeigen der Azure SQL-Datenbanktabelle, um festzustellen, ob sich die Daten in der Back-End-Datenbank nicht geändert haben.

    Öffnen Sie den Server-Explorerin Visual Studio. Navigieren Sie zu Ihrer Datenbank in Azure-SQL-Datenbanken>. Klicken Sie mit der rechten Maustaste auf Ihre Datenbank, und wählen Sie In SQL Server-Objekt-Explorer öffnenaus. Jetzt können nach Ihrer SQL-Datenbanktabelle und seinen Inhalten suchen.

(Optional) Testen der Verbindungswiederherstellung mit Ihrem mobilen Back-End

In diesem Abschnitt stellen Sie erneut eine Verbindung zwischen der App und dem mobilen Back-End her, um zu simulieren, dass die App wieder online ist. Wenn Sie sich anmelden, werden die Daten mit Ihrem mobilen Back-End synchronisiert.

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

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

  3. Erstellen Sie die Client-App erneut, und führen Sie sie aus. Nach der Anmeldung versucht die App, eine Synchronisierung mit dem mobilen App-Back-End durchzuführen. Vergewissern Sie sich, dass in der Debugkonsole keine Ausnahmen protokolliert werden.

  4. (Optional) Zeigen Sie die aktualisierten Daten mithilfe von SQL Server-Objekt-Explorer oder einem REST-Tool 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 von der Verbindung getrennt war.

Zusätzliche Ressourcen

Nächste Schritte