HTML5 Le cache d’Application ( AppCache)

L’une des réelles révolutions apportées par l’HTML5, est la possibilité de créer des applications Web hors connexion en créant un fichier manifest cache. Vous saurez le faire après avoir lu ce tutoriel !
Avec HTML5, il est facile de faire une version hors connexion d'une application web, en créant un fichier manifest  cache.

Qu’est ce que le cache d'Application ?

HTML5 cours tutorial

HTML5 introduit le cache d'application, qui signifie qu'une application Web est mise en cache et accessible sans connexion internet.

Le cache d'application donne trois avantages à applications :

Navigation en mode hors connexion - les utilisateurs peuvent utiliser l'application même s’ils sont hors ligne

Vitesse - les ressources mises en cache se chargent plus rapidement

Charge du serveur réduite- le navigateur téléchargera seulement les ressources mises à jour ou modifiée depuis le serveur


Appui de navigateur

Internet Explorer Firefox Opera Safari

Le cache de l'application est pris en charge dans tous les principaux navigateurs, sauf Internet Explorer.


HTML5 Exemple manifest de Cache

L'exemple suivant montre un document HTML avec un cache manifest (pour la navigation hors ligne) :

Exemple

Sélectionner le code

  <!DOCTYPE HTML>
  <html manifest="demo.appcache">
  <head>

    <title>HTML5  demo</title>

    <meta charset="UTF-8" />

  </head>
  <body>
  <div> Ici le contenu de votre page</div>
  </body>
  
  </html>
 

Dans l’exemple nous avons le squelette d’une page Web, mai avec un attribut manifest qui est ajouté à la balise <html>.

Cet attribut déclare un fichier manifest qui dans notre exemple est nommé "demo.appcache".


Basics manifest de cache

Pour activer le cache d'application, incluez l'attribut manifest dans le document dans la balise <html> :

<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>

Toutes les pages qui ont reçu l'attribut manifest  vont être mis en cache  lorsque l'utilisateur les visite. Si l'attribut manifest n'est pas spécifié, la page ne sera pas mise en cache (sauf si la page est spécifiée directement dans le fichier manifest).

L’application cache repose principalement sur l’utilisation d’un fichier “manifest” à ajouter aux pages de votre site.


Le fichier manifest

Le fichier manifest est un fichier texte simple qui indique au navigateur ce qu’il faut mettre en cache (et ce qu'il ne faut jamais mettre en cache).

Ce fichier, commence obligatoirement par la ligne “CACHE MANIFEST”, qui est le titre d’une première section du fichier.

Le fichier manifest comporte trois sections :

CACHE MANIFEST –Section obligatoire, les fichiers répertoriés sous cet en-tête vont être mis en cache après leur téléchargement pour la première fois

NETWORK –Section facultative, les fichiers répertoriés dans cette rubrique nécessitent une connexion au serveur et ne doivent jamais être mise en cache

FALLBACK – Section facultative, les fichiers répertoriés sous cet en-tête spécifie une page de secours si une page n'est pas accessible

CACHE MANIFEST

La première section est CACHE manifest  :

CACHE MANIFEST /theme.css /logo.gif /main.js

Le fichier manifest ci-dessus répertorie trois ressources : un fichier CSS, une image GIF et un fichier JavaScript. Lors du chargement du fichier manifest, le navigateur va télécharger les trois fichiers depuis le répertoire racine du site web. Ensuite, chaque fois que l'utilisateur n'est pas connecté à Internet, les ressources seront toujours disponibles.

RÉSEAU NETWORK:

La section réseau (NETWORK) ci-dessous spécifie que le fichier « login.php» ne doit jamais être mis en cache et ne sera pas disponible en mode hors connexion :

NETWORK: login.php

Un astérisque peut être utilisé pour indiquer que toutes les autres ressources/fichiers qui ne sont pas indiqués dans la section CACHE MANIFEST et n’ont pas l’attribut manifest dans la balise <html> nécessite une connexion Internet :

NETWORK: *

SECOURS FALLBACK :

La section de secours ci-dessous spécifie que « offline.html » sera servi à la place de tous les fichiers du catalogue de /html/, dans le cas où la connexion internet ne peut être établie :

FALLBACK: /html/ /offline.html

Remarque : La première URI est la ressource principale, la second est le secours.

L'extension de fichier recommandée pour les fichiers manifest est: « .appcache », mais vous pouvez utiliser d’autre extention( par exemple .manifet)

Un fichier manifest doit être servi avec le type MIME correct, qui est "text/cache-manifest".

Qui  doit être configuré sur le serveur web. Dans la grande majorité des cas vous utiliserez un fichier .htaccess.

Créez donc un fichier .htaccess dans le répertoire de votre application et y ajoutez simplement la ligne :

Sélectionner le code

  AddType text/cache-manifest appcache
 

Dans cette ligne, on déclare que tous les fichiers se terminant par l’extension “appcache” ont pour MIME-type “text/cache-manifest”.


Mise à jour du Cache

Une fois qu'une application est mise en cache, il reste en mémoire cache jusqu'à ce qu'une des actions suivantes se produit :

L'utilisateur efface le cache du navigateur

Le fichier manifest est modifié (voir l'astuce ci-dessous)

Mise à jour par programme le cache d'application

Exemple de fichier  manifest de Cache complet :

Sélectionner le code

  CACHE MANIFEST
  # 2011-02-21 v1.0.0
  /theme.css
  /logo.gif
  /main.js
  
  NETWORK:
  login.asp
  
  FALLBACK:
  /html/ /offline.html
 

Astuce : Les lignes commençant par un « # » sont des lignes de commentaires, mais peuvent également servir à une autre fin. Le cache de l'application est uniquement mis à jour lorsque son fichier manifest est modifiée. Si vous modifiez une image ou modifiez une fonction JavaScript, ces modifications ne seront pas remises en mémoire cache. La mise à jour de la date et la version dans une ligne de commentaire est une façon de montrer au navigateur qu’il doit remettre en cache vos fichiers.


Notes sur le Cache de l'Application

Soyez prudent avec ce que vous mettez en cache.

Une fois qu'un fichier est mis en cache, le navigateur continuera d'afficher la version mise en cache, même si vous modifiez le fichier sur le serveur. Afin de s'assurer que le navigateur actualise le cache, vous devez modifier le fichier manifest.

Remarque : Les navigateurs peuvent avoir des limites de différentes tailles pour les données en mémoire cache (certains navigateurs ont une limite de 5 Mo par site).
Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant