Mise en cache des applications HTML5

En utilisant HTML5, vous pouvez facilement créer une version hors ligne de votre application Web en créant un fichier manifeste de cache.

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

HTML5 introduit la mise en cache des applications, ce qui signifie que les applications Web peuvent être mises en cache et accessibles sans connexion Internet.

Le cache d'application apporte trois avantages aux applications :

Navigation hors ligne : les utilisateurs peuvent les utiliser lorsque l'application est hors ligne
Vitesse - Les ressources mises en cache se chargent plus rapidement
Charge du serveur réduite - Le navigateur téléchargera uniquement les ressources mises à jour ou modifiées à partir du serveur.

Prise en charge des navigateurs

Internet Explorer 10, Firefox, Chrome, Safari et Opera prennent en charge la mise en cache des applications.

Exemple de manifeste de cache HTML5

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

Exemple

<!DOCTYPE html>
<html manifest="demo_html.appcache">
<head> 
<meta charset="UTF-8">
<title>php中文网(php.cn)</title> 
</head>
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p>
<p><img src="logo.png" width="336" height="69"></p>
<p>尝试打开 <a href="#" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Bases du manifeste du cache

Pour activer la mise en cache de l'application, incluez l'attribut manifeste dans la balise <html> du document :

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

Chaque page avec un manifeste spécifié sera mise en cache lorsque l'utilisateur y accédera. Si l'attribut manifest n'est pas spécifié, la page ne sera pas mise en cache (sauf si elle est spécifiée directement dans le fichier manifeste).

L'extension de fichier recommandée pour les fichiers manifestes est : ".appcache".

Veuillez noter que le fichier manifeste doit être configuré avec le type MIME correct, qui est "text/cache-manifest". Doit être configuré sur le serveur Web.

Fichiers manifestes

Les fichiers manifestes sont de simples fichiers texte qui indiquent au navigateur ce qui est mis en cache (et ce qui ne l'est pas).

Les fichiers manifestes peuvent être divisés en trois sections :

CACHE MANIFEST - Les fichiers répertoriés sous cette rubrique seront mis en cache après le premier téléchargement
RÉSEAU - Les fichiers répertoriés sous cette rubrique nécessitent une connexion au serveur et ne seront pas mis en cache
RETOUR - Les fichiers répertoriés sous cette rubrique précisent la page de secours lorsque la page est inaccessible (comme une page 404)

CACHE MANIFEST

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

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

Le fichier manifeste ci-dessus répertorie trois ressources : un fichier CSS, une image GIF et un fichier JavaScript. Lors du chargement du fichier manifeste, le navigateur télécharge ces trois fichiers à partir du répertoire racine du site Web. Ainsi, chaque fois que l’utilisateur se déconnecte d’Internet, ces ressources restent disponibles.

RÉSEAU

La section RÉSEAU suivante précise que le fichier "login.php" ne sera jamais mis en cache et n'est pas disponible hors ligne :

RÉSEAU :
login.php

Un astérisque peut être utilisé pour indiquer que toutes les autres ressources/fichiers nécessitent une connexion Internet :

RÉSEAU :
*

FALLBACK

La sous-section FALLBACK suivante précise que si une connexion Internet ne peut pas être établie, tous les fichiers du répertoire /html5/ sont remplacés par "offline.html" :

RETOUR :
/html/ /offline.html

Remarque : Le premier URI est la ressource, le second est la solution de secours.

Mettre à jour le cache

Une fois qu'une application est mise en cache, elle reste en cache jusqu'à :

L'utilisateur efface le cache du navigateur
Le fichier manifeste est modifié (voir conseils ci-dessous)
Le cache de l'application est mis à jour par le programme

Exemple - Fichier manifeste complet

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main js
.
RÉSEAU :
login.php

REMPLAGE :
/html/ /offline.html

Remark Astuce : Les lignes commençant par "#" sont des lignes de commentaires, mais elles peuvent également être utilisées à d'autres fins. Le cache de l'application est mis à jour lorsque son fichier manifeste change. Si vous modifiez une image ou modifiez une fonction JavaScript, ces modifications ne seront pas remises en cache. La mise à jour de la date et du numéro de version dans la ligne de commentaire est un moyen d'amener le navigateur à remettre le fichier en cache.

Remarque sur la mise en cache des applications

Veuillez faire attention au contenu du 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. Pour vous assurer que le navigateur met à jour son cache, vous devez mettre à jour votre fichier manifeste.

Remarque : Les navigateurs peuvent avoir des limites de capacité différentes pour les données mises en cache (certains navigateurs fixent une limite de 5 Mo par site).