L'accès hors ligne est de plus en plus important pour les applications Web. Bien que tous les navigateurs disposent de mécanismes de mise en cache, ils ne sont pas fiables et peuvent ne pas toujours fonctionner comme prévu. HTML5 utilise l'interface ApplicationCache pour résoudre certains des problèmes causés par le mode hors connexion.
L'utilisation de l'interface cache apporte trois avantages à votre application :
Le cache d'application (également connu sous le nom d'AppCache) permet aux développeurs de spécifier quels fichiers doivent être mis en cache par le navigateur pour que les utilisateurs hors ligne puissent y accéder. Même si l'utilisateur appuie sur le bouton d'actualisation lorsqu'il est hors ligne, votre application se chargera et s'exécutera normalement.
Fichier manifeste de référencePour activer la mise en cache d'une application, ajoutez l'attribut manifest à la balise html du document :
L'attribut manifest peut pointer vers une URL absolue ou un chemin relatif, mais les URL absolues doivent avoir la même origine que l'application Web correspondante. Le fichier manifeste peut utiliser n'importe quelle extension de fichier, mais doit être servi avec le type MIME correct (voir ci-dessous).
<html manifest=/cache.manifest> ...</html>
ou
<html manifest=http://www.example.com/example.mf> ...</html>
Vous devez ajouter l'attribut manifest sur chaque page de votre application Web que vous souhaitez mettre en cache. Si une page Web ne contient pas d'attribut manifeste, le navigateur ne mettra pas la page en cache (sauf si l'attribut est explicitement répertorié dans le fichier manifeste).
Cela signifie que chaque page Web parcourue par l'utilisateur et contenant un manifeste sera implicitement ajoutée au cache de l'application. Par conséquent, vous n’avez pas besoin de répertorier toutes les pages de votre inventaire.
Les fichiers manifestes doivent être fournis au format MIME texte/cache-manifest. Le nom du suffixe du fichier peut être personnalisé (.manifest est recommandé), nous devons donc déclarer le type de fichier avec le suffixe .manifest sous forme de texte/cache-manifest côté serveur.
En prenant Apache comme exemple, nous devons ajouter : AddType text/cache-manifest .manifest à httpd.conf
Structure du fichier manifesteUn format de liste simple est le suivant :
MANIFESTE DE CACHEindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
Cet exemple mettra en cache quatre fichiers sur la page Web qui spécifie ce fichier manifeste.
Vous devez faire attention aux points suivants :
Regardons un exemple plus complexe :
CACHE MANIFEST# 2010-06-18:v2# 'Entrée principale' explicitement mise en cache.CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# Ressources qui nécessitent que l'utilisateur soit en ligne.NETWORK:login. php/myapihttp://api.twitter.com# static.html sera servi si main.py est inaccessible# offline.jpg sera servi à la place de toutes les images dans images/large/# offline.html sera servi à la place de tous les autres fichiers .htmlFALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html
Les lignes commençant par # sont des lignes de commentaires, mais peuvent également être utilisées à d'autres fins. Par exemple, mettre à jour le cache
Le cache de l'application n'est mis à jour que lorsque son fichier manifeste est modifié. Par exemple, si vous modifiez une ressource image ou une fonction JavaScript, ces modifications ne seront pas remises en cache. Vous devez modifier le fichier manifeste lui-même pour permettre au navigateur d'actualiser le fichier cache. La création de lignes de commentaires avec des numéros de version générés, des hachages de fichiers ou des horodatages garantit que les utilisateurs disposent de la dernière version de votre logiciel.
Vous pouvez également mettre à jour le cache par programme lorsqu'une nouvelle version devient disponible, comme décrit dans la section Mise à jour du cache.
Si la page introduit un fichier manifeste de cache, alors le fichier manifeste doit contenir tous les fichiers (css, js, image...) requis par la page courante, sinon il ne sera pas chargé, donc sauf les fichiers qui doivent être mis en cache , il est recommandé d'ajouter RÉSEAU dans le fichier. Ajoutez un astérisque * à un élément pour indiquer tous les autres fichiers.
Un manifeste peut inclure trois sections différentes : CACHE, NETWORK et FALLBACK.
CACHE :Il s'agit de la partie par défaut de l'entrée. Les fichiers répertoriés sous cet en-tête (ou les fichiers qui suivent immédiatement CACHE MANIFEST) sont explicitement mis en cache après leur premier téléchargement.
RÉSEAU:Les fichiers répertoriés dans cette section sont des ressources sur liste blanche nécessaires à la connexion au serveur. Toutes les demandes concernant ces ressources contournent le cache, que l'utilisateur soit ou non hors ligne. Des caractères génériques peuvent être utilisés.
RETOMBER:Cette section est facultative et spécifie une page de secours si la ressource n'est pas accessible. Le premier URI représente la ressource et le second représente la page de support. Les deux URI doivent être liés et doivent avoir la même origine que le fichier manifeste. Des caractères génériques peuvent être utilisés.
Remarque : Les sections peuvent être organisées dans n'importe quel ordre et chaque section peut apparaître de manière répétée dans la même liste.
La liste suivante définit la page Web complète (offline.html) qui s'affiche lorsqu'un utilisateur tente d'accéder à la racine du site hors ligne et indique également que toutes les autres ressources (telles que celles des sites distants) nécessitent une connexion Internet.
CACHE MANIFEST# 2010-06-18:v3# Les entrées explicitement mises en cacheindex.htmlcss/style.css# offline.html seront affichées si l'utilisateur est hors ligneFALLBACK:/// /offline.html# Toutes les autres ressources (par exemple les sites) nécessitent le l'utilisateur doit être en ligne.NETWORK :*# Ressources supplémentaires à mettre en cacheCACHE :images/logo1.pngimages/logo2.pngimages/logo3.png
Remarque : les fichiers HTML faisant référence aux fichiers manifestes sont automatiquement mis en cache. Vous n’avez donc pas besoin de l’ajouter à votre liste, mais nous vous recommandons de le faire.
Remarque : les en-têtes de cache HTTP et les limites de cache définies sur les pages servies via SSL seront remplacées par des manifestes de cache. Par conséquent, les pages Web servies via https peuvent s’exécuter hors ligne.
Mettre à jour le cacheLes applications resteront mises en cache hors ligne, sauf si l'une des conditions suivantes se produit :
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.