Offlinegegevenssynchronisatie toevoegen aan uw Apache Cordova-app

In deze zelfstudie wordt de offlinesynchronisatiefunctie van Azure Mobile Apps voor de Apache Cordova-quickstart-app besproken. 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 back-end.

Voordat u aan deze zelfstudie begint, moet u de zelfstudie voor apache Cordova-quickstart hebben voltooid, waaronder het maken van een geschikte back-endservice.

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

De app bijwerken ter ondersteuning van offlinesynchronisatie

Bij onlinebewerking krijgt u getTable() een verwijzing naar de onlinetabel. Bij het implementeren van offlinemogelijkheden krijgt u getSyncTable() een verwijzing naar het offline-SQlite-archief. Het SQlite-archief wordt geleverd door de Apache Cordova-invoegtoepassingcordova-sqlite-storage.

In het bestand www/js/index.js:

1. Werk de initializeStore() methode bij om de lokale SQlite-database te initialiseren:

   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. Werk de setup() methode bij om de offlineversie van de tabel te gebruiken:

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

3. Vervang de syncLocalTable() methode waarmee de gegevens in het offlinearchief worden gesynchroniseerd met de online winkel:

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

De app bouwen

Voer de volgende opdrachten uit om de Android-app te bouwen:

cordova clean android
cordova build android

U kunt de app uitvoeren:

cordova run android

Testen in Visual Studio Code

U kunt het foutopsporingsprogramma in Visual Studio Code gebruiken als u de cordova Tools-extensie hebt geïnstalleerd. Klik op het foutopsporingsprogramma en maak een launch.json bestand. Wanneer u hierom wordt gevraagd, selecteert u Cordova en selecteert u vervolgens de configuraties (zoals Android uitvoeren op emulator). Zodra u een startconfiguratie hebt gemaakt, kunt u de app uitvoeren in het foutopsporingsprogramma. Het wordt gestart op uw emulator naar keuze. U kunt nu echter de foutopsporingsuitvoer zien in uw foutopsporingsconsole.

De app testen

In deze sectie test u het gedrag met WiFi en schakelt u wi-fi uit om een offlinescenario te maken.

Items in de takenlijst worden opgeslagen in een SQLite-database op het apparaat. Wanneer u de gegevens vernieuwt, worden de wijzigingen verzonden naar de service (push). De app vraagt vervolgens nieuwe items aan (pull). In de zelfstudie wordt het vernieuwen geselecteerd door op een pictogram te drukken of door 'pull to refresh' te gebruiken.

1. Plaats het apparaat of de simulator in de vliegtuigmodus.
2. Voeg enkele Takenitems toe of markeer sommige items als voltooid.
3. Sluit het apparaat of de simulator (of sluit de app geforceerd) en start de app opnieuw.
4. Controleer of uw wijzigingen zijn opgeslagen op het apparaat.
5. Bekijk de inhoud van de Azure TodoItem-tabel . Gebruik een SQL-hulpprogramma zoals SQL Server Management Studio of een REST-client zoals Fiddler of Postman. Controleer of de nieuwe items niet zijn gesynchroniseerd met de server
6. Schakel Wi-Fi in op het apparaat of de simulator.
7. Vernieuw de gegevens door 'ophalen om te vernieuwen' of door op het vernieuwingspictogram te drukken.
8. Controleer de todoItem-tabelgegevens opnieuw. De nieuwe en gewijzigde items moeten nu worden weergegeven.

Volgende stappen

Ga door met het implementeren van verificatie.