Delen via

Offlinesynchronisatie inschakelen voor uw mobiele Cordova-app

  • Artikel

Overzicht

In deze zelfstudie wordt de offlinesynchronisatiefunctie van Azure Mobile Apps voor Cordova geïntroduceerd. Met offlinesynchronisatie kunnen eindgebruikers communiceren met een mobiele app, zoals het weergeven, toevoegen of wijzigen van gegevens, zelfs als 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 Cordova-quickstart-oplossing voor Mobile Apps die u maakt wanneer u de Apache Cordova quick start-zelfstudie hebt voltooid. In deze zelfstudie werkt u de quickstart-oplossing bij om offlinefuncties van Azure Mobile Apps toe te voegen. We duiden ook de offline-specifieke code in de app aan.

Zie het onderwerp Offline Data Sync in Azure Mobile Appsvoor meer informatie over de functie voor 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. Offlinesynchronisatie vereist de cordova-sqlite-storage-invoegtoepassing, die automatisch wordt toegevoegd aan uw app wanneer de Azure Mobile Apps-invoegtoepassing is opgenomen in het project. Het Quickstart project bevat beide plug-ins.

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

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

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

    met 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 in uw Azure-back-end worden gebruikt. (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() 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

    met 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 voor synchronisatieconflicten. Een echte toepassing verwerkt de verschillende fouten, zoals netwerkomstandigheden, 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 wordt gewijzigd.

Wanneer een pull wordt uitgevoerd tegen een tabel die lokale updates in behandeling heeft die door de context worden bijgehouden, wordt automatisch een push geactiveerd. 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 naar push. Zie de sectie Incrementele synchronisatie in Offline Data Sync in Azure Mobile Appsvoor meer informatie.

(Optioneel) Verificatie uitschakelen

Als u geen verificatie wilt instellen voordat u offlinesynchronisatie test, markeert u de callback-functie als commentaar voor aanmelding, maar laat u de code in de callback-functie ongewijzigd. Na het uitcommentariëren van de aanmeldingsregels 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. Later simuleert u een offlinescenario en wijzigt u 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 ze pas gesynchroniseerd met het back-endgegevensarchief als de verbinding opnieuw tot stand is gebracht.

  1. Open in 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.htmlhet <meta>-element van de CSP 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 en voer de client-app uit en u ziet dat er een uitzondering wordt geregistreerd in de console wanneer de app na aanmelding probeert te synchroniseren met de back-end. 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 de database en selecteer Openen in SQL Server Object Explorer. U kunt nu naar uw SQL-databasetabel en de inhoud ervan bladeren.

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

In dit onderdeel herstelt u de verbinding van de app met de mobiele back-end, waardoor wordt gesimuleerd dat de app weer online komt. Wanneer u zich aanmeldt, worden gegevens gesynchroniseerd met uw mobiele back-end.

  1. Open index.js opnieuw en herstel de applicatie-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 console voor foutopsporing.

  4. (Optioneel) Bekijk de bijgewerkte gegevens met behulp van SQL Server Object Explorer 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 bronnen

Volgende stappen