Cache d'application HTML5

En utilisant le cache d'application, vous pouvez facilement créer une version hors ligne de l'application web en créant un fichier manifeste de cache

Qu'est-ce que le cache d'application ?

HTML5 a introduit le cache d'application (Application Cache), ce qui signifie que les applications web peuvent être mises en cache et peuvent être accédées sans connexion Internet

Les avantages de la cache de l'application pour l'application sont les suivants :

  1. Navigation hors ligne - Les utilisateurs peuvent les utiliser lorsque l'application est hors ligne
  2. Vitesse - Les ressources en cache se chargent plus rapidement
  3. Réduction de la charge du serveur - Le navigateur ne téléchargera que les ressources mises à jour ou modifiées du serveur

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge pleinement le cache d'application.

API
Cache d'application 4.0 10.0 3.5 4.0 11.5

Exemple de Manifest HTML Cache

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

Exemple

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Contenu du document ...
</body>
</html>

Essayez-le vous-même

Base Cache Manifest

Pour activer le cache d'application, incluez l'attribut manifest dans l'étiquette <html> du document :

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

Chaque page spécifiant un manifest sera mise en cache lors de l'accès de l'utilisateur. Si l'attribut manifest n'est pas spécifié, la page ne sera pas mise en cache (sauf si la page est directement spécifiée dans le fichier manifest).

L'extension de fichier recommandée pour le fichier manifest est : ".appcache".

Attention :Le fichier manifest doit être configuré avec le bon MIME-type, à savoir "text/cache-manifest". Il doit être configuré sur le serveur web.

Manifest fichier

Le fichier manifest est un fichier texte simple qui informe le navigateur des contenus mis en cache (et des contenus non mis en cache).

Le fichier manifest a trois parties :

  • CACHE MANIFEST - Les fichiers énumérés sous ce titre seront mis en cache après le premier téléchargement
  • NETWORK - Les fichiers énumérés sous ce titre nécessitent une connexion au serveur et ne seront pas mis en cache
  • FALLBACK - Les fichiers énumérés sous ce titre définissent les pages de redirection lorsque la page ne peut pas être accédée (par exemple, la page 404)

CACHE MANIFEST

La première ligne, CACHE MANIFEST, est obligatoire :

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

Le fichier manifest au-dessus énumère trois ressources : un fichier CSS, une image GIF et un fichier JavaScript. Une fois que le fichier manifest est chargé, le navigateur télécharge ces trois fichiers à partir du répertoire racine du site. Ensuite, peu importe quand l'utilisateur se déconnecte de l'Internet, ces ressources restent disponibles.

NETWORK

La section NETWORK de ce fichier spécifie que le fichier "login.php" ne sera jamais mis en cache et ne sera pas disponible hors ligne :

NETWORK:
login.asp

Vous pouvez utiliser l'astérisque (*) pour indiquer que tous les autres ressources/fichiers nécessitent une connexion Internet :

NETWORK:
*
FALLBACK

La partie FALLBACK suivante spécifie que si une connexion Internet ne peut pas être établie, "offline.html" doit remplacer tous les fichiers du répertoire /html/ :

FALLBACK:
/html/ /offline.html

Remarque :Le premier URI est la ressource, le second est le substitut.

Mise à jour du cache

Une fois l'application en cache, elle restera en cache jusqu'à ce que l'une des situations suivantes se produise :

  • L'utilisateur vide le cache du navigateur
  • Le fichier manifest a été modifié (voir les conseils ci-dessous)
  • Mise à jour de la cache de l'application par le programme

Exemple - Fichier manifest complet Cache

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

Astuce :Les lignes commençant par "#" sont des lignes de commentaires, mais peuvent également servir à d'autres fins. Le cache de l'application ne sera mis à jour que lorsque le fichier manifest change. Si vous modifiez une image ou une fonction JavaScript, ces modifications ne seront pas recachées. Mettre à jour la date et le numéro de version dans les lignes de commentaires est une méthode pour faire recharger le fichier par le navigateur.

Remarques à propos du cache des applications

Veuillez noter le contenu du cache.

Une fois le fichier en cache, le navigateur continuera à afficher la version en cache, même si vous modifiez le fichier sur le serveur. Pour assurer la mise à jour du cache du navigateur, vous devez mettre à jour le fichier manifest.

Remarque :Les limitations de capacité des navigateurs pour les données en cache peuvent varier (certains navigateurs limitent à 5MB par site).