Applications Web Hors-ligne

Offline.js

On peut utiliser offline.js pour gérer le fait que l'application n'a plus de connexion.

On peut aussi utiliser offline-simulate-ui.min.js pour simuler le fait d'être hors-ligne. On a seulement besoin d'ajouter ce script à la page pour qu'un checkbox s'affiche automatiquement. Celui-ci sert pour activer le mode offline.

Application Cache

Offline Apps

Fichier Manifest

<!DOCTYPE html>
<html manifest="/manifest">
...

L'extension habituelle est .appcache, mais ce n'est pas requis. Sous Safari, il est peut-être préférable d'avoir un fichier avec l'extension .manifest comme cache.manifest¹⁾.

Le fichier doit être servi avec le type de contenu text/cache-manifest.

Un fichier manifest ressemble à ceci :

CACHE MANIFEST

# version 1

CACHE:
/
/content/bootstrap.min.css
/scripts/modernizr-2.6.2.js
/scripts/jquery-1.10.2.min.js

NETWORK:
/api

FALLBACK:
/blog /offline/index.html

C'est seulement en changeant le fichier manifest que la cache de l'application se mettra à jour. C'est pourquoi on met la version, quand on change la version (ou tout autre partie du fichier manifest), la cache d'application se met à jour. Modifier un fichier tout autre ne met pas à jour la cache.

Trucs

Sous Chrome on peut explorer le contenu de l'Application Cache en mettant chrome://appcache-internals/ dans la barre d'adresse.

¹⁾

Important: The manifest filename should end in .manifest