Share via

Offlinesynchronisatie inschakelen voor uw mobiele Cordova-app

  • Artikel

Overzicht

In deze zelfstudie maakt u kennis met de offlinesynchronisatiefunctie van Azure Mobile Apps voor Cordova. Met offlinesynchronisatie kunnen eindgebruikers communiceren met een mobiele app( gegevens weergeven, toevoegen of wijzigen), zelfs wanneer er geen netwerkverbinding is. Wijzigingen worden opgeslagen in een lokale database. Zodra het apparaat weer online is, worden deze wijzigingen gesynchroniseerd met de externe service.

Deze zelfstudie is gebaseerd op de quickstart-oplossing Cordova voor Mobile Apps die u maakt wanneer u de zelfstudie met Apache Cordova snel aan de slag gaat. In deze zelfstudie werkt u de quickstart-oplossing bij om offlinefuncties van Azure Mobile Apps toe te voegen. We markeren ook de offlinespecifieke code in de app.

Zie het onderwerp Offline Data Sync in Azure Mobile Apps voor meer informatie over de functie offlinesynchronisatie. Zie de API-documentatie voor meer informatie over API-gebruik.

Offlinesynchronisatie toevoegen aan de quickstart-oplossing

De offlinesynchronisatiecode moet worden toegevoegd aan de app. Voor offlinesynchronisatie is de cordova-sqlite-storage-invoegtoepassing vereist, die automatisch wordt toegevoegd aan uw app wanneer de invoegtoepassing Azure Mobile Apps is opgenomen in het project. Het Quickstart-project bevat beide invoegtoepassingen.

  1. Open index.js in het Solution Explorer van Visual Studio en vervang de volgende code

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

    te vervangen door deze 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. Vervang vervolgens de volgende code:

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

    te vervangen door deze 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();

    De voorgaande codetoevoegingen initialiseren het lokale archief en definiëren een lokale tabel die overeenkomt met de kolomwaarden die worden gebruikt in uw Azure-back-end. (U hoeft niet alle kolomwaarden in deze code op te nemen.) Het version veld wordt onderhouden door de mobiele back-end en wordt gebruikt voor conflictoplossing.

    U krijgt een verwijzing naar de synchronisatiecontext door getSyncContext aan te roepen. De synchronisatiecontext helpt tabelrelaties te behouden door wijzigingen in alle tabellen bij te houden en te pushen die een client-app heeft gewijzigd wanneer .push() deze wordt aangeroepen.

  3. Werk de toepassings-URL bij naar de URL van uw mobiele app-toepassing.

  4. Vervang vervolgens deze code:

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

    te vervangen door deze 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);

    De voorgaande code initialiseert de synchronisatiecontext en roept vervolgens getSyncTable (in plaats van getTable) aan om een verwijzing naar de lokale tabel op te halen.

    Deze code maakt gebruik van de lokale database voor alle CRUD-tabelbewerkingen (create, read, update en delete).

    In dit voorbeeld wordt eenvoudige foutafhandeling uitgevoerd bij synchronisatieconflicten. Een echte toepassing verwerkt de verschillende fouten, zoals netwerkvoorwaarden, serverconflicten en andere. Zie het voorbeeld van offlinesynchronisatie voor codevoorbeelden.

  5. Voeg vervolgens deze functie toe om de werkelijke synchronisatie uit te voeren.

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

    U bepaalt wanneer u wijzigingen naar de back-end van de mobiele app wilt pushen door syncContext.push()aan te roepen. U kunt bijvoorbeeld syncBackend aanroepen in een knopgebeurtenishandler die is gekoppeld aan een synchronisatieknop.

Overwegingen voor offlinesynchronisatie

In het voorbeeld wordt de pushmethode van syncContext alleen aangeroepen bij het opstarten van de app in de callback-functie voor aanmelding. In een echte toepassing kunt u deze synchronisatiefunctionaliteit ook handmatig activeren of wanneer de netwerkstatus verandert.

Wanneer een pull wordt uitgevoerd op basis van een tabel die lokale updates in behandeling heeft die zijn bijgehouden door de context, activeert die pull-bewerking automatisch een push. Wanneer u items in dit voorbeeld vernieuwt, toevoegt en voltooit, kunt u de expliciete push-aanroep weglaten, omdat deze mogelijk overbodig is.

In de opgegeven code worden alle records in de externe todoItem-tabel opgevraagd, maar het is ook mogelijk om records te filteren door een query-id en query door te geven om te pushen. Zie de sectie Incrementele synchronisatie in Offline Data Sync in Azure Mobile Apps voor meer informatie.

(Optioneel) Verificatie uitschakelen

Als u geen verificatie wilt instellen voordat u offlinesynchronisatie test, markeert u de callback-functie voor aanmelding, maar laat u de code in de callback-functie ongewijzigd. Nadat u opmerkingen hebt gemaakt bij de aanmeldingslijnen, volgt de 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);

De app wordt nu gesynchroniseerd met de Azure-back-end wanneer u de app uitvoert.

De client-app uitvoeren

Als offlinesynchronisatie nu is ingeschakeld, kunt u de clienttoepassing ten minste één keer uitvoeren op elk platform om de lokale archiefdatabase te vullen. Simuleer later een offlinescenario en wijzig de gegevens in de lokale store terwijl de app offline is.

(Optioneel) Het synchronisatiegedrag testen

In deze sectie wijzigt u het clientproject om een offlinescenario te simuleren met behulp van een ongeldige toepassings-URL voor uw back-end. Wanneer u gegevensitems toevoegt of wijzigt, worden deze wijzigingen bewaard in het lokale archief, maar worden deze niet gesynchroniseerd met het back-endgegevensarchief totdat de verbinding opnieuw tot stand is gebracht.

  1. Open in de Solution Explorer het index.js projectbestand en wijzig de toepassings-URL zodat deze verwijst naar een ongeldige URL, zoals de volgende code:

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

  2. Werk in index.html het CSP-element <meta> bij met dezelfde ongeldige URL.

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

  3. Bouw de client-app en voer deze uit en merk op dat er een uitzondering wordt geregistreerd in de console wanneer de app na aanmelding probeert te synchroniseren met de back-end. Alle nieuwe items die u toevoegt, bestaan alleen in het lokale archief totdat ze naar de mobiele back-end worden gepusht. De client-app gedraagt zich alsof deze is verbonden met de back-end.

  4. Sluit de app en start deze opnieuw om te controleren of de nieuwe items die u hebt gemaakt, behouden blijven in de lokale store.

  5. (Optioneel) Gebruik Visual Studio om uw Azure SQL Database-tabel weer te geven om te zien dat de gegevens in de back-enddatabase niet zijn gewijzigd.

    Open Server Explorer in Visual Studio. Navigeer naar uw database in Azure-SQL>Databases. Klik met de rechtermuisknop op uw database en selecteer Openen in SQL Server Objectverkenner. U kunt nu bladeren naar uw SQL-databasetabel en de inhoud ervan.

(Optioneel) De opnieuw verbinding met uw mobiele back-end testen

In deze sectie maakt u opnieuw verbinding met de app met de mobiele back-end, waarmee de app wordt gesimuleerd naar een onlinestatus. Wanneer u zich aanmeldt, worden gegevens gesynchroniseerd met uw mobiele back-end.

  1. Open index.js opnieuw en herstel de TOEPASSINGs-URL.

  2. Open index.html opnieuw en corrigeer de toepassings-URL in het CSP-element <meta> .

  3. Bouw de client-app opnieuw en voer deze uit. De app probeert te synchroniseren met de back-end van de mobiele app na aanmelding. Controleer of er geen uitzonderingen zijn vastgelegd in de foutopsporingsconsole.

  4. (Optioneel) Bekijk de bijgewerkte gegevens met behulp van SQL Server Objectverkenner of een REST-hulpprogramma zoals Fiddler. U ziet dat de gegevens zijn gesynchroniseerd tussen de back-enddatabase en het lokale archief.

    U ziet dat de gegevens zijn gesynchroniseerd tussen de database en het lokale archief en de items bevat die u hebt toegevoegd terwijl de verbinding met uw app is verbroken.

Aanvullende resources

Volgende stappen