Cache d'application HTML5
- Page précédente Stockage Web HTML5
- Page suivante Workers Web HTML5
Avec le cache d'application, en créant un fichier manifeste de cache, vous pouvez créer une version hors ligne de l'application web de manière simple.
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 trois avantages de la mise en cache des applications pour les applications :
- Navigation hors ligne - Les utilisateurs peuvent les utiliser lorsque l'application est hors ligne
- Vitesse - Les ressources en cache se chargent plus rapidement
- Réduire la charge du serveur - Le navigateur ne téléchargera que les ressources mises à jour ou modifiées du serveur
Prise en charge des navigateurs
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 Manifeste Cache HTML
L'exemple suivant montre un document HTML avec un manifeste de cache (pour navigation hors ligne) :
Exemple
!DOCTYPE HTML <html manifest="demo.appcache"> <body> Contenu du document ... </body> </html>
Base Cache Manifest
Pour activer le cache d'application, ajoutez l'attribut manifest à l'étiquette <html> du document :
!DOCTYPE HTML <html manifest="demo.appcache"> ... </html>
Chaque page spécifiant un manifeste est mise en cache lors de l'accès de l'utilisateur. Si l'attribut manifest n'est pas spécifié, la page n'est pas mise en cache (à moins que la page ne soit directement spécifiée dans le fichier manifeste).
L'extension de fichier recommandée pour le fichier manifeste est : ".appcache".
Attention :Le fichier manifeste doit être configuré avec le bon MIME-type, à savoir "text/cache-manifest". Il doit être configuré sur le serveur web.
Manifest fichier
Le fichier manifeste est un fichier texte simple qui informe le navigateur des contenus mis en cache (et des contenus non mis en cache).
Le fichier manifeste comporte trois parties :
- CACHE MANIFEST - Les fichiers répertoriés sous ce titre seront mis en cache après le premier téléchargement
- NETWORK - Les fichiers répertoriés sous ce titre nécessitent une connexion au serveur et ne seront pas mis en cache
- FALLBACK - Les fichiers répertorié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 manifeste ci-dessus liste trois ressources : un fichier CSS, une image GIF et un fichier JavaScript. Une fois le fichier manifeste chargé, le navigateur télécharge ces trois fichiers à partir du répertoire racine du site. Ensuite, ces ressources restent disponibles même si l'utilisateur se déconnecte de l'Internet.
NETWORK
La section NETWORK de ce fichier détermine 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" remplace 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 que l'application est mise 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 Cache complet
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 être utilisées à d'autres fins. Le cache de l'application ne sera mis à jour que lorsque le fichier manifest change. Si vous éditez une image ou modifiez 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 réactualiser le cache par le navigateur.
Remarques à propos du cache des applications
Pratiquez-vous à la conservation du contenu du cache.
Une fois que le fichier a été mis en cache, le navigateur continuera à afficher la version en cache, même si vous avez modifié le fichier sur le serveur. Pour assurer que le navigateur mette à jour le cache, vous devez mettre à jour le fichier manifest.
Remarque :Les limitations de capacité des navigateurs pour les données en cache peuvent varier (les limitations de certains navigateurs sont de 5 MB par site).
- Page précédente Stockage Web HTML5
- Page suivante Workers Web HTML5