Mise en cache des applications HTML5

Cache d'application HTML5

Qu'est-ce queCache d'applicationCache d'application

HTML5 introduit la technologie de mise en cache d'application, ce qui signifie que les applications Web peuvent être mises en cache et utilisé sans réseau En créant un fichier manifeste de cache, vous pouvez facilement créer des applications hors ligne.

Les trois avantages apportés par Application Cache sont :

① Navigation hors ligne

② Améliorer la vitesse de chargement des pages

③ Réduire la pression du serveur

Et tous les principaux navigateurs supportent Application Cache, même s'il ne le supporte pas, cela n'aura aucun impact sur le programme

Technologie de stockage hors ligne

HTML5 propose deux technologies majeures de stockage hors ligne : le stockage local et Application Cache, tous deux ont leurs propres scénarios d'application ; la technologie de stockage hors ligne traditionnelle est Cookie.

Après la pratique, nous pensons que le stockage local devrait stocker certaines données ajax non critiques, ce qui est la cerise sur le gâteau

Le cache d'application est utilisé pour stocker des ressources statiques, ce qui est toujours la cerise ; sur le gâteau ;

Et les cookies ne peuvent enregistrer qu'un petit morceau de texte (4096 octets) ; ils ne peuvent donc pas stocker de grandes données. C'est l'une des différences entre les cookies et la technologie de mise en cache ci-dessus. Parce que HTTP est sans état. , le serveur doit distinguer si la demande provient du même serveur. Un serveur a besoin d'une chaîne d'identification, et cette tâche est complétée par des cookies. Ce texte sera transmis à chaque fois entre le serveur et le navigateur pour vérifier les autorisations de l'utilisateur.

Les scénarios d'application d'Application Cache sont donc différents, donc l'utilisation est incohérente.

Introduction au cache d'application

L'utilisation du cache d'application nécessite deux aspects de travail :

① Le serveur doit maintenir une liste de manifestes

② sur le navigateur Il suffit d'un simple paramétrage

Illustration avec un exemple :

CACHE MANIFEST CACHE: # 需要缓存的列表 style1.css 1.jpg 01.js http://localhost/applicationcache/02.js http://localhost/applicationcache/zepto.js NETWORK: # 不需要缓存的 4.jpg FALLBACK: # 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html 2.jpg/3.jpg

Premier de tout, ici Une erreur a été signalée :

Événement d'erreur de cache d'application : échec de la récupération du manifeste (404)

La raison de cette erreur est la suivante : le fichier manifeste doit être configuré avec le type MIME correct, c'est-à-dire "text / cache-manifest". Il doit être configuré sur le serveur Web, différents serveurs sont différents

\APPLICATIONCACHE 01.js 02.js 1.jpg 2.jpg 3.jpg 4.jpg demo.appcache index.html style1.css style2.css web.config zepto.js

De cette façon, il peut être appliqué hors ligne Même si le réseau est déconnecté à ce moment, ces fichiers sont toujours accessibles

<. >Voici une chose. Il convient de noter que si /index.html n'est pas inclus ici, il mettra en cache "applicationcache/". En fait, il s'agit de index.html

.

Les fichiers manifestes peuvent être divisés en trois parties :
CACHE MANIFEST - les fichiers répertoriés sous cette rubrique seront mis en cache après le premier téléchargement
NETWORK - les fichiers répertoriés sous cette rubrique nécessitent une connexion au serveur et ne le seront pas. être mis en cache
FALLBACK - Les fichiers répertoriés sous cette rubrique spécifient la page de secours lorsque la page est inaccessible (comme une page 404)

Bases du manifeste du cache

Pour activer la mise en cache de l'application, incluez l'attribut manifest dans la balise du document :

  ... 

Chaque page qui spécifie un manifeste sera affichée sur la page de l'utilisateur. mis en cache lors de l'accès. 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, c'est-à-dire "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 parties :

CACHE MANIFEST - les fichiers répertoriés sous cette rubrique seront mis en cache après le premier téléchargement

NETWORK - sous cette rubrique, les fichiers sortants nécessitent une connexion au serveur et ne seront pas mis en cache

FALLBACK - 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 obligatoire :

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

Le 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 :
*

REMPLAGE

Le La 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" :

FALLBACK:
/html/ /offline.html

Remarque : le premier URI est la ressource, le second est le substitut.

Mettre à jour le cache

Une fois qu'une application est mise en cache, elle reste en cache jusqu'à ce que ce qui suit se produise :

L'utilisateur efface le cache du navigateur

Le fichier manifeste est modifié (voir conseils ci-dessous)

Mettre à jour le cache de l'application par programmation

Exemple - Fichier manifeste complet

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

RÉSEAU :
login.php

FALLBACK :
/html/ /offline.html

Conseil : les lignes commençant par "#" sont des commentaires. peut également servir à 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).