HTML5 : Gestion du Offline

Une des nouveautés apportées par HTML5 est le support du mode Offline. Ainsi, vous allez pouvoir utiliser un site sans être connecté à Internet, en ayant préalablement visité ce site bien entendu.

Manifest

La gestion du offline se fait via l’utilisation d’un fichier Manifest. Ce fichier va décrire les fichiers à garder en mémoire pour une utilisation ultérieure en mode offline.

Ce fichier est composé de 3 parties :

  • CACHE : la liste des fichiers à mettre en cache
  • OFFLINE : la liste des fichiers à mettre en cache pour une utilisation en mode déconnecté
  • NETWORK : les fichiers à ne charger qu’en mode connecté.

Déclaration du manifest

La déclaration du fichier se fait dans la balise html de votre page. Dans le cas de mon article sur l’utilisation de Knockout, j’avais développé une page permettant le support du mode offline. Voici la déclaration du fichier manifest de la page (volley.manifest)

<html manifest="volley.manifest">

Voici le fichier manifest (j’ai mis des fichiers pour les parties OFFLINE et NETWORK pour exemple). (l’utilisation du # permet de mettre une ligne en commentaire)

CACHE MANIFEST

# v0.1.0.3

CACHE:
volley.html
include/style.css
include/ics.css
include/volley.svg
include/knockout-2.0.0.js
include/jquery-1.7.1.min.js

FALLBACK:
#liste des fichiers à ne charger qu'en mode offline
include/offline.js

NETWORK:
#liste des fichiers à ne charger qu'en mode connecté
include/network.js

On peut noter la présence d’un numéro de version du fichier manifest. En effet, lors de la modification d’un des fichiers du cache, seulement une modification du fichier manifest permettra la mise à jour du fichier modifié. Une des pratiques consiste à mettre un numéro de version que l’on incrémentera à chaque mise à jour afin que les fichiers soit remis à jour dans le cache navigateur.

Détection via JavaScript

Il est également possible de détecter l’état de la connexion en JavaScript. Ainsi on pourra détecter une déconnexion/perte de réseau et adapter le comportement. Cela peut se révéler pratique notamment en contexte mobile.

La détection se fait via une propriété onLine sur l’objet navigator. Des événements online et offline (la documentation sur le MDN) sont également émis à chaque connexion/déconnexion. Attention toutefois, sur un ordinateur, cet événement n’est émis que si on passe on mode « Travailler hors connexion ». Il existe des techniques permettant la détection dans ce cas précis. Pour en savoir plus, je vous invite à lire l’article Application hors-ligne HTML5 – le JavaScript

Ressources

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *