Le cache hors ligne HTML5 est déployé sous Tomcat pour permettre la navigation hors ligne des images, Flash, etc._html5 compétences du didacticiel

Ouvrez une page Web et après le chargement, si Internet est soudainement déconnecté, la page disparaîtra après l'avoir actualisée.
Avez-vous déjà pensé qu'après l'actualisation, la page est toujours la même qu'avant ? Si vous ouvrez une autre page dans une nouvelle fenêtre et entrez la même URL, ce sera toujours la même page lorsque vous serez déconnecté d'Internet. . Les applications hors ligne HTML5 fournissent une telle fonction.
Lorsque les données de la page sont chargées, vous pouvez définir la mise en cache de certaines images, flash, css, js, html et autres fichiers. Vous pourrez utiliser ces fichiers en cache la prochaine fois lorsqu'Internet n'est pas disponible. Il s'agit de l'application hors ligne de HTML5.
En fait, c’est très simple à mettre en œuvre.

Nécessite un serveur. Ici, nous utilisons le serveur Tomcat pour expliquer.
Tout d'abord, configurez le type de mine du fichier avec le suffixe .manifest en text/cache-manifest.
En ce qui concerne la configuration de Tomcat, les amis familiers penseront naturellement au fichier web.xml. Oui, ajoutez simplement la configuration suivante au fichier :

Copiez le codeLe code est le suivant :

manifest ;mime-type> ;text/cache-manifest



Ensuite, écrivez un fichier xxx.manifest, xxx est un nom que vous choisissez vous-même . Le format de ce fichier est comme ceci :

Copiez le codeLe code est le suivant :

CACHE MANIFEST

#version 1.5
CACHE :
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-logo.gif


La première ligne est obligatoire, elle identifie qu'il s'agit du fichier de configuration manifeste.

#version 1.5
Cette phrase est un commentaire et n'a aucun effet réel. Je veux juste que le navigateur mette à jour le fichier cache. Car lorsque le fichier manifeste est le même que l'original, le navigateur ne rechargera pas le fichier cache, on peut donc utiliser ce commentaire pour modifier le numéro de version d'une part et laisser le navigateur mettre à jour le cache d'autre part.
CACHE :
Cette ligne indique que le fichier suivant doit être mis en cache. Dans l'exemple, la page actuelle : MyTest.html, ainsi que certains fichiers et images css et js sont mis en cache.
Il existe quelques exemples de mots clés non mentionnés, à savoir
NETWORK :
FALLBACK :
NETWORK fait référence aux pages qui ne veulent pas être mises en cache. FALLBACK fait référence au fichier demandé qui n'est pas trouvé ou au serveur ; car le fichier n'est pas disponible. Alternatives en réponse, par exemple, si nous voulons demander une page imbriquée, mais que le serveur de cette page ne peut pas être connecté, alors je peux passer à une autre page spécifiée.
Il s'agit de la deuxième et de la troisième étape. Ajoutez simplement l'emplacement du manifeste dans la balise  :

C'est parti. mettre en œuvre des applications hors ligne simples.


Où sont ces fichiers mis en cache ?
Je l'ai testé sur Chrome et j'ai constaté qu'il enregistrait ces fichiers en morceaux selon son propre mécanisme, je n'ai donc pas pu trouver le fichier complet. Les données enregistrées se trouvent dans : C:UsersjasonlingAppDataLocalGoogleChromeUser DataDefault. Je ne sais pas comment les enregistrer spécifiquement.
Les fichiers sur Firefox sont également stockés selon son propre mécanisme. Cependant, après l'avoir ouvert avec SQLite, l'auteur a trouvé les informations spécifiques du fichier mis en cache :
Les lecteurs intéressés peuvent l'essayer eux-mêmes et voir s'il fonctionne. .Nouvelles découvertes.