Ajouter la synchronisation des données hors connexion à votre application Apache Cordova

Article
05/05/2021

Note

Ce produit est mis hors service. Pour un remplacement des projets utilisant .NET 8 ou version ultérieure, consultez la bibliothèque Datasync Community Toolkit.

Ce tutoriel décrit la fonctionnalité de synchronisation hors connexion d’Azure Mobile Apps pour l’application de démarrage rapide Apache Cordova. La synchronisation hors connexion permet aux utilisateurs finaux d’interagir avec une application mobile (affichage, ajout ou modification de données), même s’il n’existe aucune connexion réseau. Les modifications sont stockées dans une base de données locale. Une fois que l’appareil est de nouveau en ligne, ces modifications sont synchronisées avec le back-end distant.

Avant de commencer ce tutoriel, vous devez avoir terminé le didacticiel de démarrage rapide Apache Cordova, qui inclut la création d’un service principal approprié.

Pour en savoir plus sur la fonctionnalité de synchronisation hors connexion, consultez la rubrique Offline Data Sync dans Azure Mobile Apps.

Mettre à jour l’application pour prendre en charge la synchronisation hors connexion

En ligne, vous utilisez getTable() pour obtenir une référence à la table en ligne. Lors de l’implémentation de fonctionnalités hors connexion, vous utilisez getSyncTable() pour obtenir une référence au magasin SQlite hors connexion. Le magasin SQlite est fourni par le plug-in Apache Cordova cordova-sqlite-storage.

Note

La synchronisation hors connexion est disponible uniquement pour Android et iOS. Elle ne fonctionnera pas dans la spécification de la plateforme de navigateur.

Dans le fichier www/js/index.js :

Mettez à jour la méthode initializeStore() pour initialiser la base de données 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);
}

Mettez à jour la méthode setup() pour utiliser la version hors connexion de la table :

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

Remplacez la méthode syncLocalTable() qui synchronisera les données dans le magasin hors connexion par le magasin en ligne :

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

Générer l’application

Exécutez les commandes suivantes pour générer l’application Android :

cordova clean android
cordova build android

Vous pouvez exécuter l’application :

cordova run android

Tester dans Visual Studio Code

Vous pouvez utiliser le débogueur dans Visual Studio Code si vous avez installé l’extension Cordova Tools . Cliquez sur le débogueur, puis créez un fichier launch.json. Lorsque vous y êtes invité, sélectionnez Cordova, puis sélectionnez les configurations (par exemple, Exécuter Android sur l’émulateur). Une fois que vous avez créé une configuration de lancement, vous pouvez exécuter l’application dans le débogueur. Il s’ouvre sur votre émulateur de choix. Toutefois, vous pourrez maintenant voir la sortie de débogage dans votre console de débogage.

Tester l’application

Dans cette section, testez le comportement avec wi-fi activé, puis désactivez le Wi-Fi pour créer un scénario hors connexion.

Les éléments de la liste de tâches sont stockés dans une base de données SQLite sur l’appareil. Lorsque vous actualisez les données, les modifications sont envoyées au service (push). L’application demande ensuite les nouveaux éléments (pull). Dans le tutoriel, l’actualisation est sélectionnée en appuyant sur une icône ou en utilisant « pull to refresh ».

Placez l’appareil ou le simulateur en mode avion .
Ajoutez des éléments Todo ou marquez certains éléments comme étant terminés.
Quittez l’appareil ou le simulateur (ou fermez l’application de force) et redémarrez l’application.
Vérifiez que vos modifications ont été conservées sur l’appareil.
Affichez le contenu de la table TodoItem d’Azure . Utilisez un outil SQL tel que SQL Server Management Studioou un client REST tel Curl. Vérifiez que les nouveaux éléments n’ont pas été synchronisés avec le serveur
Activez le Wi-Fi dans l’appareil ou le simulateur.
Actualisez les données, soit par « extraction pour actualiser » soit en appuyant sur l’icône d’actualisation.
Passez à nouveau en revue les données de table TodoItem. Les éléments nouveaux et modifiés doivent maintenant apparaître.

Étapes suivantes

Continuez à implémenter d’authentification .

Partager via