Offlinegegevenssynchronisatie toevoegen aan uw Apache Cordova-app

Artikel
05/05/2021

Notitie

Dit product is buiten gebruik gesteld. Zie de Community Toolkit Datasync-bibliotheekvoor een vervanging voor projecten met .NET 8 of hoger.

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 deze zelfstudie start, moet u de Zelfstudie voor Apache Cordova-quickstarthebben voltooid, waaronder het maken van een geschikte back-endservice.

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

De app bijwerken ter ondersteuning van offlinesynchronisatie

In onlinebewerking gebruikt u getTable() om een verwijzing naar de onlinetabel op te halen. Wanneer u offlinemogelijkheden implementeert, gebruikt u getSyncTable() om een verwijzing naar het offline-SQlite-archief op te halen. Het SQlite-archief wordt geleverd door de invoegtoepassing Apache Cordova cordova-sqlite-storage.

Notitie

Offlinesynchronisatie is alleen beschikbaar voor Android en iOS. Het werkt niet binnen de specificatie van het browserplatform.

In het bestand www/js/index.js:

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

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

Vervang de syncLocalTable() methode waarmee de gegevens in de offlineopslag 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 vervolgens een launch.json-bestand. Wanneer u hierom wordt gevraagd, selecteert u Cordovaen 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.

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

Volgende stappen

Ga door met het implementeren van verificatie.

Delen via