Mozilla wants to hear from developers like you. http://www.surveygizmo.com/s3/2737536/440b74c45e94?a=mdn

Travaux hors-ligne

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Créer des applications web ouvertes fonctionnant de manière hors-ligne est un problème important à résoudre : les utilisateurs peuvent se retrouver déconnectés lors de leurs déplacements. De plus, avoir des fichiers disponibles localement permettra à votre application d'exécuter moins de requêtes vers le serveur et elle sera par conséquent plus fluide.

Cet article fournit des recommandations pour concevoir des applications hors-ligne aussi rapidement et facilement que possible, à travers des FAQs, des exemples et d'autres références en bas de page pour ceux ayant besoin d'informations détaillées sur le fonctionnement des technologies concernées telles que IndexedDB, localStorage, AppCache, XHR et les autres.

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', 'http://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/gold@2x.png
js/main.js
js/lib/require.js

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

Note: Si vous utilisez des templates JavaScript comme mustache, soyez sûr d'inclure vos templates dans le manifeste AppCache ou pré-compilez-les dans vos fichiers JavaScript construits.

Important: Dans votre manifeste AppCache vous ne pouvez pas spécifier de ressources situées sur un domaine différent  (même par redirection). Chrome vous laisse le faire tant que vous utilisez SSL, mais cela enfreint les spécifications, et d'autres navigateurs ne le font pas. Gardez ceci en tête si, par exemple, vous servez du contenu d'un CDN avec une origine différente.

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

Note: Pour plus d'information, lire comment utiliser localForage.

Note: L'API Device Storage est un option disponible sur Firefox OS pour stocker des données plus volumineuses, mais IndexedDB (localForage) devrait fonctionner aussi. L'application de référence Podcasts utilise IndexedDB pour stocker les épisodes dans son model d'épisode.

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:

Exemples

Didacticiels

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

Référence

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Gibus, JeffD, jbeuh, Ilphrin, maattt, slebourdon, Antoine, Caudralys
 Dernière mise à jour par : Gibus,