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

Ce tutoriel traite de 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 l'appareil de nouveau en ligne, ces modifications sont synchronisées avec le serveur principal distant.

Avant de commencer ce tutoriel, vous devez avoir suivi le Tutoriel de démarrage rapide Apache Cordova, qui comprend la création d’un service back-end approprié.

Pour en savoir plus sur la fonctionnalité de synchronisation hors connexion, consultez la rubrique Synchronisation des données hors connexion dans Azure Mobile Apps.

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

Dans l’opération en ligne, vous utilisez getTable() pour obtenir une référence à la table en ligne. Quand vous implémentez des 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 cordova-sqlite-storage d’Apache Cordova.

Remarque

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

Dans le fichier www/js/index.js :

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

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

3. Remplacez la méthode syncLocalTable() qui va synchroniser les données dans le magasin hors connexion avec le magasin en ligne :

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

Création de 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 l’extension Cordova Tools est installée. Cliquez sur le débogueur, puis créez un fichier launch.json. Quand 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. Elle est lancée sur l’émulateur de votre choix. Cependant, vous pouvez maintenant voir la sortie du débogage dans votre console de débogage.

Test de l'application

Dans cette section, vous testez le comportement de l’application avec le Wi-Fi activé, puis vous désactivez le Wi-Fi pour créer un scénario hors connexion.

Les éléments de la liste todo sont stockés dans une base de données SQLite sur l’appareil. Quand vous actualisez les données, les modifications sont envoyées au service (push). L’application demande ensuite tous les nouveaux éléments (extraction). Dans le tutoriel, l’actualisation est sélectionnée en appuyant sur une icône ou en utilisant l’option « Extraire pour actualiser ».

1. Mettez l’appareil ou le simulateur en Mode avion.
2. Ajoutez des éléments Todo ou marquez quelques éléments comme étant terminés.
3. Quittez l’appareil ou le simulateur (ou forcez la fermeture de l’application) et redémarrez l’application.
4. Vérifiez que vos modifications ont bien été enregistrées sur l’appareil.
5. Affichez le contenu de la table Azure TodoItem . Utilisez un outil SQL, comme SQL Server Management Studio, ou un client REST, comme Fiddler ou Postman. Vérifiez que les nouveaux éléments n’ont pas été synchronisés avec le serveur.
6. Activez le Wi-Fi sur le simulateur ou l’appareil.
7. Actualisez les données, via « Extraire pour actualiser » ou en appuyant sur l’icône d’actualisation.
8. Réexaminez les données de la table TodoItem. Les éléments nouveaux et modifiés doivent maintenant apparaître.

Étapes suivantes

Continuez pour implémenter l’authentification.