Aggiungere la sincronizzazione dei dati offline all'app Apache Cordova

Articolo
05/05/2021

Nota

Questo prodotto viene ritirato. Per una sostituzione dei progetti che usano .NET 8 o versione successiva, vedere la libreria datasync di Community Toolkit.

Questa esercitazione illustra la funzionalità di sincronizzazione offline di App per dispositivi mobili di Azure per l'app di avvio rapido di Apache Cordova. La sincronizzazione offline consente agli utenti finali di interagire con un'app per dispositivi mobili, visualizzando, aggiungendo o modificando i dati, anche quando non è presente alcuna connessione di rete. Le modifiche vengono archiviate in un database locale. Una volta che il dispositivo è di nuovo online, queste modifiche vengono sincronizzate con il back-end remoto.

Prima di iniziare questa esercitazione, è necessario aver completato l'esercitazione introduttiva Apache Cordova, che include la creazione di un servizio back-end appropriato.

Per altre informazioni sulla funzionalità di sincronizzazione offline, vedere l'argomento Sincronizzazione dati offline in App per dispositivi mobili di Azure.

Aggiornare l'app per supportare la sincronizzazione offline

Nell'operazione online si usa getTable() per ottenere un riferimento alla tabella online. Quando si implementano funzionalità offline, si usa getSyncTable() per ottenere un riferimento all'archivio SQlite offline. L'archivio SQlite viene fornito dal plug-in Apache Cordova cordova-sqlite-storage.

Nota

La sincronizzazione offline è disponibile solo per Android e iOS. Non funzionerà nella specifica della piattaforma del browser.

Nel file www/js/index.js:

Aggiornare il metodo initializeStore() per inizializzare il database SQlite locale:

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

Aggiornare il metodo setup() per usare la versione offline della tabella:

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

Sostituire il metodo syncLocalTable() che sincronizza i dati nell'archivio offline con l'archivio online:

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

Compilare l'app

Eseguire i comandi seguenti per compilare l'app Android:

cordova clean android
cordova build android

È possibile eseguire l'app:

cordova run android

Test in Visual Studio Code

È possibile usare il debugger in Visual Studio Code se è installata l'estensione Cordova Tools. Fare clic sul debugger e quindi creare un file launch.json. Quando richiesto, selezionare Cordova, quindi selezionare le configurazioni, ad esempio Esegui Android nell'emulatore). Dopo aver creato una configurazione di avvio, è possibile eseguire l'app nel debugger. Verrà avviato nell'emulatore preferito. Tuttavia, sarà ora possibile visualizzare l'output di debug nella console di debug.

Testare l'app

In questa sezione testare il comportamento con WiFi attivato e quindi disattivare Il WiFi per creare uno scenario offline.

Gli elementi nell'elenco todo vengono archiviati in un database SQLite nel dispositivo. Quando si aggiornano i dati, le modifiche vengono inviate al servizio (push). L'app richiede quindi tutti i nuovi elementi (pull). Nell'esercitazione l'aggiornamento viene selezionato premendo un'icona o usando "pull per aggiornare".

Posizionare il dispositivo o il simulatore in modalità aereo .
Aggiungere alcuni elementi Todo o contrassegnare alcuni elementi come completi.
Chiudere il dispositivo o il simulatore (o chiudere forzatamente l'app) e riavviare l'app.
Verificare che le modifiche siano state mantenute nel dispositivo.
Visualizzare il contenuto della tabella di TodoItem di Azure . Usare uno strumento SQL, ad esempio SQL Server Management Studioo un client REST, ad esempio Curl. Verificare che i nuovi elementi non sincronizzati con il server
Attivare wi-fi nel dispositivo o nel simulatore.
Aggiornare i dati, "trascinando l'aggiornamento" o premendo l'icona di aggiornamento.
Esaminare di nuovo i dati della tabella todoItem . Verranno visualizzati gli elementi nuovi e modificati.

Passaggi successivi

Continuare a implementare l'autenticazione .

Condividi tramite