Lägga till datasynkronisering offline i Apache Cordova-appen

Den här självstudien beskriver funktionen för offlinesynkronisering i Azure Mobile Apps för Apache Cordova-snabbstartsappen. 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ärrserverdelen.

Innan du påbörjar den här självstudien bör du ha slutfört Apache Cordova-snabbstartsguiden, som innefattar att skapa en lämplig serverdelstjänst.

Mer information om funktionen för offlinesynkronisering finns i avsnittet Offline datasynkronisering i Azure Mobile Apps.

Uppdatera appen för att stödja offlinesynkronisering

I onlineåtgärden använder getTable() du för att hämta en referens till onlinetabellen. När du implementerar offlinefunktioner använder getSyncTable() du för att hämta en referens till det offline-SQlite-arkivet. SQlite Store tillhandahålls av Apache Cordova-plugin-programmetcordova-sqlite-storage.

Kommentar

Offlinesynkronisering är endast tillgängligt för Android och iOS. Det fungerar inte i webbläsarens plattformsspecifikation.

I filen www/js/index.js:

1. initializeStore() Uppdatera metoden för att initiera den lokala SQlite-databasen:

   function initializeStore() {
       store = new WindowsAzure.MobileServiceSqliteStore();
   
       var tableDefinition = {
           name: 'todoitem',
           columnDefinitions: {
               id: 'string',
               deleted: 'boolean',
               version: 'string',
               Text: 'string',
               Complete: 'boolean'
           }
       };
   
       return store
           .defineTable(tableDefinition)
           .then(initializeSyncContext);
   }
   
   function initializeSyncContext() {
       syncContext = client.getSyncContext();
       syncContext.pushHandler = {
           onConflict: function (pushError) {
               return pushError.cancelAndDiscard();
           },
           onError: function (pushError) {
               return pushError.cancelAndDiscard();
           }
       };
       return syncContext.initialize(store);
   }
   

2. setup() Uppdatera metoden så att den använder offlineversionen av tabellen:

   function setup() {
       todoTable = client.getSyncTable('todoitem');
       refreshDisplay();
       addItemEl.addEventListener('submit', addItemHandler);
       refreshButtonEl.addEventListener('click', refreshDisplay);
   }
   

3. Ersätt metoden syncLocalTable() som synkroniserar data i offlinearkivet med onlinebutiken:

   function syncLocalTable() {
       return syncContext.push().then(function () {
           return syncContext.pull(new WindowsAzure.Query('todoitem'));
       });
   }
   

Bygga appen

Kör följande kommandon för att skapa Android-appen:

cordova clean android
cordova build android

Du kan köra appen:

cordova run android

Testa i Visual Studio Code

Du kan använda felsökningsprogrammet i Visual Studio Code om du har Cordova Tools-tillägget installerat. Klicka på felsökningsprogrammet och skapa sedan en launch.json fil. När du uppmanas till det väljer du Cordova och sedan konfigurationerna (till exempel Kör Android på emulatorn). När du har skapat en startkonfiguration kan du köra appen i felsökningsprogrammet. Den startas på valfri emulator. Nu kan du dock se felsökningsutdata i felsökningskonsolen.

Testa appen

I det här avsnittet testar du beteendet med WiFi på och inaktiverar sedan WiFi för att skapa ett offlinescenario.

Objekt i att göra-listan lagras i en SQLite-databas på enheten. När du uppdaterar data skickas ändringarna till tjänsten (push). Appen begär sedan nya objekt (pull). I självstudien väljs uppdateringen genom att trycka på en ikon eller genom att använda "pull to refresh".

1. Placera enheten eller simulatorn i flygplansläge.
2. Lägg till några Todo-objekt eller markera vissa objekt som slutförda.
3. Avsluta enheten eller simulatorn (eller stäng appen med två två skäl) och starta om appen.
4. Kontrollera att ändringarna har sparats på enheten.
5. Visa innehållet i Azure TodoItem-tabellen . Använd ett SQL-verktyg som SQL Server Management Studio eller en REST-klient som Fiddler eller Postman. Kontrollera att de nya objekten inte har synkroniserats till servern
6. Aktivera WiFi i enheten eller simulatorn.
7. Uppdatera data, antingen genom att "hämta för att uppdatera" eller genom att trycka på uppdateringsikonen.
8. Granska TodoItem-tabelldata igen. De nya och ändrade objekten bör nu visas.

Nästa steg

Fortsätt för att implementera autentisering.