Travaux hors-ligne

Flux hors-ligne

Le diagramme suivant illustre le fonctionnement classique d'une application hors-ligne. L'application est d'abord téléchargée/installée et ensuite démarrée — via le navigateur dans le cas d'une application web en ligne, ou installée et lancée dans le cas d'une application installable (ex: sur Firefox OS). À partir de là, la logique serait de stocker l'ensemble des données initiales de l'application sur l'appareil, après quoi l'application pourra être utilisée : elle stocke ses données hors-ligne et les synchronise périodiquement avec celles du serveur.

Pour ses futures exécutions, l'application essayera de détecter si elle est en ligne ou non. Si c'est le cas , elle se synchronisera avec le serveur et téléchargera de nouvelles données. Dans le cas contraire, elle continuera d'utiliser ses données actuelles hors-ligne.

Recommandations

Ce qui suit est un regroupement de recommandations et de bonnes pratiques pour rapidement mettre en place et exécuter des applications web utilisables hors-ligne.

Détecter la disponibilité du réseau

Il y a quelques APIs disponibles pour détecter l'accès de l'utilisateur au réseau. Elles sont particulièrement utiles en permettant de passer les requêtes HTTP si aucune connexion au réseau n'est détectée. Vous pouvez aussi afficher moins de messages d'erreur. Par exemple : si vous codez un client Twitter, un message comme ”Les nouveaux tweets ne peuvent être chargés hors-ligne” est plus compréhensible que “Impossible d'établir une connexion HTTP.”

Essayez de ne pas charger de données depuis des API sauf quand c'est nécessaire, et gardez ces données en cache pour éviter de les charger à nouveau. En pré-chargeant certaines données, vous aiderez l'utilisateur à profiter de certaines parties de votre application en mode hors-ligne.

navigatorOnline.onLine est conçu pour détecter le mode hors-ligne, mais il n'est pas très sûr. Il existe de nombreux autres mécanismes de détection de mode hors-ligne, mais nous recommandons d'utiliser une librairie appropriée comme offline.js.

Si vous utilisez XMLHttpRequest (AJAX) pour mettre à jour les données de façon dynamique, vous pouvez vérifier la réponse pour déterminer si la connexion à été coupée durant l'utilisation de l'application. Si votre application possède les privilèges de systemXHR, vous pouvez vérifier que la connexion à un site est coupée durant une connexion active (iOS le fait avec Apple.com).

// We'll assume we aren't online.
var online = false;

// Assume we're a packaged app with systemXHR permissions.
// https://developer.mozilla.org/docs/Web/Apps/App_permissions
var request = new window.XMLHttpRequest({mozSystem: true});
request.open('HEAD', 'https://www.mozilla.org/robots.txt', true);
request.timeout = 5750;

request.addEventListener('load', function(event) {
   console.log('We seem to be online!', event);
   online = true;
});

var offlineAlert = function(event) {
   console.log('We are likely offline:', event);
}

request.addEventListener('error', offlineAlert);
request.addEventListener('timeout', offlineAlert);

request.send(null);

La première fois que votre application est chargée/installée, elle devrait enregistrer ses besoins et les données en local, comme indiqué ci-dessous. Aux chargements ultérieurs, elle devrait progressivement avoir une meilleure approche, puisque l'application est hors-ligne et travaille avec les données disponibles hors-ligne. Si elle est connectée, elle devrait mettre à jour les nouvelles ressources et données disponibles.

Stocker des ressources hors-ligne

Si vous distribuez votre application en tant qu'application empaquetée sur une plateforme de distribution d'application (par exemple une application Firefox OS, distribuée via le Marketplace Firefox), alors ce sera fait naturellement. Une fois l'application installée sur l'appareil, les ressources de l'application (assets) seront sauvegardées localement (voir Packaged apps).

Si votre application est hébergée et vous voulez la rendre disponible en tant qu'application web ouverte, comme celle installée sur Firefox OS, vous aurez besoin d'utiliser App Cache, qui suffit pour la plupart des cas, mais possède ses inconvénients à prendre en compte. Le manifeste AppCache va typiquement lister tout le CSS, les polices de caractère, le JavaScript, et les images que vous utilisez. Vous pouvez utilisez des outils pour générer votre manifeste ou le créer vous-même. Ceci est un exemple de format, provenant du manifeste de Face Value.

CACHE MANIFEST
# v 0.1 / 12

CACHE:
css/app.css
img/coins/[email protected]
js/main.js
js/lib/require.js

NETWORK:
*
https://*
https://*

Stocker des données hors-ligne

Pour démarrer rapidement avec des données hors-ligne nous vous recommendons d'utiliser localForage, une bibliothèque simple qui vous évite les différences de support entre les navigateurs web pour les technologies de stockage de données hors-ligne. Elle fournit un stockage de données asynchrone via IndexedDB pour les navigateurs qui le supportent. Il utilise ensuite WebSQL pour les navigateurs qui le supportent (comme Safari), et Storage pour les navigateurs avec seulement un support plus basique. (plus d'information concernant le support de localForage)

localForage utilise une syntaxe proche de localStorage pour récupérer et envoyer les données:

localforage.getItem('key', function(value) {
        alert('My value is: ' + value);
    });
}
localforage.setItem('key', 'value', doSomethingElse);

Sauvegarder un état

Durant l'utilisation d'une application, vous devriez vous assurer que son état est sauvegardé de façon périodique pour les données hors-ligne, et sauvegarder l'état localement lorsque l'utilisateur ferme l'application.

Synchroniser coté serveur

Votre application devrait aussi sauvegarder ses données vers le serveur de façon périodique. Si votre application est hors-ligne vous devriez réfléchir à une solution de file d'attente pour gérer une absence de connexion et lancer une mise à jour une fois que le réseau est de nouveau disponible. Nous travaillons sur une solution simple pour faire cela.

Solutions tierces pouvant aider:

• PouchDB
• Firebase

Exemples

• eLibri: Une bibliothèque performante et une application de lecture d'eBook, écrite par Marco Castellucio, vainqueur du IndexedDB Mozilla DevDerby
• To-do Notifications (voir l' exemple en live): L'application de référence pour les exemples de IndexedDB.

Didacticiels

Si vous voulez en savoir plus sur comment localForage et les autres fonctionnent, ces didacticiels devraient vous aider:

• Utiliser IndexedDB
• localStorage
• AppCache
• Utiliser XMLHTTPRequest

Référence

• Référence IndexedDB
• Device Storage
• XMLHTTPRequest