Lägga till datasynkronisering offline i Apache Cordova-appen

Artikel
05/05/2021

Not

Den här produkten har dragits tillbaka. En ersättning för projekt som använder .NET 8 eller senare finns i Community Toolkit Datasync-biblioteket.

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, vilket innefattar att skapa en lämplig serverdelstjänst.

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

Uppdatera appen för att stödja offlinesynkronisering

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

Not

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

I filen www/js/index.js:

Uppdatera metoden initializeStore() 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);
}

Uppdatera metoden setup() för att använda offlineversionen av tabellen:

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

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

Skapa 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 Cordovaoch väljer 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".

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

Nästa steg

Fortsätt att implementera autentisering.

Dela via