L'accès hors ligne devient de plus en plus important pour les applications Web. Bien que tous les navigateurs aient des mécanismes de mise en cache, ils ne sont pas fiables et peuvent ne pas toujours jouer le rôle attendu. HTML5 utilise l'interface ApplicationCache pour résoudre certains des problèmes causés par l'utilisation hors ligne.
Ce qui suit est le contenu pertinent expliquant les cas pratiques de l'application et du code de fichiers manifestes de cache hors ligne HTML5. Le didacticiel de l'article parle principalement de certaines technologies et connaissances liées au manifeste de cache hors ligne HTML5. Pour plus de contenu, vous êtes invités à visiter http://www.vevb.com pour obtenir plus de derniers tutoriels. Ce qui suit est l'explication du tutoriel:
Qu'est-ce que manifeste? Manifest est un fichier avec le Name Suffix Minifest. Il définit les fichiers qui doivent être mis en cache dans le fichier. Le navigateur qui prend en charge Manifest enregistrera le fichier localement en fonction des règles du fichier manifeste, afin que la page soit accessible sans liens réseau.
L'accès hors ligne devient de plus en plus important pour les applications Web. Bien que tous les navigateurs aient des mécanismes de mise en cache, ils ne sont pas fiables et peuvent ne pas toujours jouer le rôle attendu. HTML5 utilise l'interface ApplicationCache pour résoudre certains des problèmes causés par l'utilisation hors ligne.
L'utilisation d'une interface de cache peut apporter les trois avantages suivants à votre application:
Version hors ligne - Les utilisateurs peuvent parcourir votre site Web complet tout en étant hors ligne
Speed - La ressource mise en cache est une ressource locale, donc elle se charge plus rapidement.
Le serveur Charge moins - le navigateur ne télécharge que les ressources du serveur qui a changé.
L'application Cache (également connue sous le nom d'AppCache) permet aux développeurs de spécifier quels fichiers que le navigateur doit mettre en cache pour les utilisateurs hors ligne pour accéder. Votre application se charge et s'exécutera normalement, même si l'utilisateur appuie sur le bouton d'actualisation lorsque vous êtes hors ligne.
Fichier manifeste de référencePour activer la mise en cache d'application pour une application, ajoutez l'attribut manifeste dans la balise HTML du document:
La propriété manifeste peut indiquer une URL absolue ou un chemin relatif, mais l'URL absolue doit être la même que l'application réseau correspondante. Le fichier manifeste peut utiliser n'importe quelle extension de fichier, mais doit être fourni avec le type de mime correct (voir ci-dessous).
<html manifest = / cache.manifest> ... </ html> ou <html manifest = http: //www.example.com/example.mf> ... </ html>
Vous devez ajouter la propriété manifeste sur chaque page de l'application Web que vous souhaitez mettre en cache. Si la page ne contient pas l'attribut manifeste, le navigateur ne mettra pas en cache la page (sauf s'il est explicitement répertorié dans le fichier manifeste).
Cela signifie que chaque page Web que l'utilisateur navigue avec le manifeste sera implicitement ajoutée au cache d'application. Par conséquent, vous n'avez pas besoin de répertorier chaque page dans la liste.
Le fichier manifeste doit être fourni dans le type de mime texte / cache-manifest. Le nom du suffixe de fichier peut être personnalisé (recommandé comme .Manifest), nous devons donc déclarer le type de fichier du suffixe .manifest en tant que texte / cache-manifest sur le serveur.
Prenant l'exemple d'Apache, nous devons ajouter: AddType text/cache-manifest .manifest
Le format de liste simple est le suivant:
Cache ManifesTindex.htmlstylesheet.cssimages / logo.pngscripts / main.js
Cet exemple cache quatre fichiers sur la page Web qui spécifie ce fichier manifeste.
Les points suivants auxquels vous devez faire attention:
La chaîne de manifeste de cache doit être sur la première ligne et est essentielle.
La quantité de données mises en cache sur le site Web ne doit pas dépasser 5 Mo. Cependant, si vous écrivez une application pour Chrome Web Store, vous pouvez utiliser UnlimitedStorage pour illimiter les restrictions.
Si le fichier manifeste ou la ressource spécifiée ne peut pas être téléchargé, l'ensemble du processus de mise à jour du cache ne peut pas être effectué. Dans ce cas, le navigateur continuera à utiliser le cache d'application d'origine.
Jetons un coup d'œil à des exemples plus complexes:
Cache manifeste # 2010-06-18: V2 # # explicitement cache des 'Master Entries'.cache: /favicon.icoindex.htmlstylesheet.csssimages/logo.pngscripts/main.js# ressources qui nécessitent que l'utilisateur soit en ligne 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 servie à la place de tous les autres .html Fichiersfallback: /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, mettez à jour le cache
Le cache d'application n'est mis à jour que si son fichier manifeste change. Par exemple, si vous modifiez une ressource d'image ou modifiez une fonction JavaScript, ces modifications ne sont pas un reache. Vous devez modifier le fichier manifeste lui-même pour que le navigateur actualise le fichier mis en cache. Créez des lignes de commentaires avec des numéros de version générés, des valeurs de hachage de fichiers ou des horodatages pour garantir que les utilisateurs obtiennent la dernière version de votre logiciel.
Vous pouvez également mettre à jour par programme le cache après une nouvelle version, comme décrit dans la section Cache de mise à jour.
Si la page introduit un fichier manifeste de cache, le fichier manifeste doit contenir tous les fichiers (css, js, image ...) requis par la page actuelle, sinon il ne sera pas chargé. Par conséquent, si vous supprimez les fichiers fixes qui doivent être mis en cache, il est recommandé d'ajouter un astérisque * à l'élément réseau dans le fichier pour indiquer tous les autres fichiers.
La liste peut inclure trois parties différentes: le cache, le réseau et le repli.
Cache:Il s'agit de la partie par défaut de l'entrée. Les fichiers répertoriés sous cet en-tête sont explicitement mis en cache pour la première fois (ou les fichiers immédiatement après le manifeste du cache).
RÉSEAU:Les fichiers répertoriés dans cette section sont des ressources en liste blanche qui doivent être connectées au serveur. Toutes les demandes de ces ressources contournent le cache, que l'utilisateur soit hors ligne ou non. Les caractères génériques peuvent être utilisés.
RETOMBER:Cette section est facultative et est utilisée pour spécifier la page de secours lorsque la ressource n'est pas accessible. Le premier URI représente la ressource et la seconde représente la page Web de sauvegarde.
Fin. Le tutoriel a été terminé ici. Avez-vous gagné quelque chose en lisant? Ce site fournit également du contenu connexe HTML5 Offline Cache Manifest, bienvenue pour continuer à lire.