Aktivera offlinesynkronisering för din Cordova-mobilapp

Artikel
06/25/2019

Översikt

Den här självstudien introducerar funktionen för offlinesynkronisering i Azure Mobile Apps for Cordova. Med offlinesynkronisering kan slutanvändarna interagera med en mobilapp – visa, lägga till eller ändra data – även om det inte finns någon nätverksanslutning. Ändringar lagras i en lokal databas. När enheten är online igen synkroniseras dessa ändringar med fjärrtjänsten.

Den här självstudien baseras på cordova-snabbstartslösningen för Mobile Apps som du skapar när du slutför självstudien Apache Cordova snabbstart. I den här självstudien uppdaterar du snabbstartslösningen för att lägga till offlinefunktioner i Azure Mobile Apps. Vi markerar även den offlinespecifika koden i appen.

Mer information om funktionen för offlinesynkronisering finns i avsnittet offlinedatasynkronisering i Azure Mobile Apps. Mer information om API-användning finns i API-dokumentationen.

Lägga till offlinesynkronisering i snabbstartslösningen

Offlinesynkroniseringskoden måste läggas till i appen. Offlinesynkronisering kräver plugin-programmet cordova-sqlite-storage, som automatiskt läggs till i din app när Azure Mobile Apps-plugin-programmet ingår i projektet. Snabbstartsprojektet innehåller båda dessa plugin-program.

Öppna index.js i Visual Studios Solution Explorer och ersätt följande kod

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

med den här koden:

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

Ersätt sedan följande kod:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
```
med den här koden:
```
 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 föregående kodtilläggen initierar det lokala arkivet och definierar en lokal tabell som matchar kolumnvärdena som används i azure-serverdelen. (Du behöver inte inkludera alla kolumnvärden i den här koden.) Fältet version underhålls av den mobila serverdelen och används för konfliktlösning.

Du får en referens till synkroniseringskontexten genom att anropa getSyncContext. Synkroniseringskontexten hjälper till att bevara tabellrelationer genom att spåra och skicka ändringar i alla tabeller som en klientapp har ändrat när .push() den anropas.
Uppdatera program-URL:en till mobilappens program-URL.

Ersätt sedan den här koden:

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

med den här koden:

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

Koden ovan initierar synkroniseringskontexten och anropar sedan getSyncTable (i stället för getTable) för att hämta en referens till den lokala tabellen.

Den här koden använder den lokala databasen för alla crud-tabellåtgärder (create, read, update och delete).

Det här exemplet utför enkel felhantering vid synkroniseringskonflikter. Ett riktigt program skulle hantera de olika felen, till exempel nätverksförhållanden, serverkonflikter och andra. Kodexempel finns i exemplet på offlinesynkronisering.

Lägg sedan till den här funktionen för att utföra den faktiska synkroniseringen.

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

Du bestämmer när du ska skicka ändringar till mobilappens serverdel genom att anropa syncContext.push(). Du kan till exempel anropa syncBackend i en knapphändelsehanterare som är kopplad till en synkroniseringsknapp.

Överväganden vid offlinesynkronisering

I exemplet anropas push-metodenför syncContext endast vid appstart i återanropsfunktionen för inloggning. I ett verkligt program kan du också utlösa synkroniseringsfunktionen manuellt eller när nätverkstillståndet ändras.

När en hämtning körs mot en tabell som har väntande lokala uppdateringar som spåras av kontexten utlöser pull-åtgärden automatiskt en push-överföring. När du uppdaterar, lägger till och slutför objekt i det här exemplet kan du utelämna det explicita push-anropet eftersom det kan vara redundant.

I den angivna koden efterfrågas alla poster i tabellen remote todoItem, men det går också att filtrera poster genom att skicka ett fråge-ID och en fråga att skicka. Mer information finns i avsnittet Inkrementell synkronisering i offlinedatasynkronisering i Azure Mobile Apps.

(Valfritt) Inaktivera autentisering

Om du inte vill konfigurera autentisering innan du testar offlinesynkronisering kommenterar du ut återanropsfunktionen för inloggning, men lämnar koden i återanropsfunktionen okommenterad. När du har kommenterat ut inloggningsraderna följer koden:

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

Nu synkroniseras appen med Azure-serverdelen när du kör appen.

Kör klientappen

När offlinesynkronisering nu är aktiverat kan du köra klientprogrammet minst en gång på varje plattform för att fylla i den lokala lagringsdatabasen. Senare simulerar du ett offlinescenario och ändrar data i det lokala arkivet medan appen är offline.

(Valfritt) Testa synkroniseringsbeteendet

I det här avsnittet ändrar du klientprojektet för att simulera ett offlinescenario med hjälp av en ogiltig program-URL för serverdelen. När du lägger till eller ändrar dataobjekt lagras dessa ändringar i det lokala arkivet, men synkroniseras inte till serverdelsdatalagret förrän anslutningen har återupprättats.

I Solution Explorer öppnar du projektfilen index.js och ändrar program-URL:en så att den pekar på en ogiltig URL, till exempel följande kod:
```
 client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');
```

I index.html uppdaterar du CSP-elementet <meta> med samma ogiltiga URL.

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

Skapa och kör klientappen och observera att ett undantag loggas i konsolen när appen försöker synkronisera med serverdelen efter inloggningen. Alla nya objekt som du lägger till finns bara i det lokala arkivet tills de skickas till den mobila serverdelen. Klientappen fungerar som om den är ansluten till serverdelen.
Stäng appen och starta om den för att kontrollera att de nya objekten som du skapade sparas i det lokala arkivet.
(Valfritt) Använd Visual Studio för att visa tabellen Azure SQL Database för att se att data i serverdelsdatabasen inte har ändrats.

Öppna ServerUtforskaren i Visual Studio. Gå till databasen i Azure-SQL>Databases. Högerklicka på databasen och välj Öppna i SQL Server Object Explorer. Nu kan du bläddra till sql-databastabellen och dess innehåll.

(Valfritt) Testa återanslutningen till din mobila serverdel

I det här avsnittet ska du återansluta appen till den mobila serverdelen, som simulerar att appen kommer tillbaka till ett onlinetillstånd. När du loggar in synkroniseras data till din mobila serverdel.

Öppna index.js igen och återställ programmets URL.
Öppna index.html igen och korrigera program-URL:en i CSP-elementet <meta> .
Återskapa och kör klientappen. Appen försöker synkronisera med mobilappens serverdel efter inloggningen. Kontrollera att inga undantag loggas i felsökningskonsolen.
(Valfritt) Visa uppdaterade data med antingen SQL Server Object Explorer eller ett REST-verktyg som Fiddler. Observera att data har synkroniserats mellan serverdelsdatabasen och det lokala arkivet.

Observera att data har synkroniserats mellan databasen och det lokala arkivet och innehåller de objekt som du lade till när appen kopplades från.

Ytterligare resurser

Nästa steg

Granska mer avancerade funktioner för offlinesynkronisering, till exempel konfliktlösning i offlinesynkroniseringsexemplet
Granska api-referensen för offlinesynkronisering i API-dokumentationen.

Dela via

Aktivera offlinesynkronisering för din Cordova-mobilapp

Översikt

Lägga till offlinesynkronisering i snabbstartslösningen

Överväganden vid offlinesynkronisering

(Valfritt) Inaktivera autentisering

Kör klientappen

(Valfritt) Testa synkroniseringsbeteendet

(Valfritt) Testa återanslutningen till din mobila serverdel

Ytterligare resurser

Nästa steg

Ytterligare resurser