Avec le cache de l'application, il est facile de faire une version hors ligne d'une application Web, en créant un fichier manifeste de cache.
Qu'est-ce que cache de l'application?
HTML5 introduit cache de l'application, ce qui signifie qu'une application Web est mis en mémoire cache, et accessible sans connexion Internet.
cache de l'application donne une application trois avantages:
- Hors ligne navigation - les utilisateurs peuvent utiliser l'application quand ils sont en ligne
- Vitesse - ressources en cache se chargent plus rapidement
- Réduction de la charge du serveur - le navigateur ne téléchargera mises à jour / ressources modifiées à partir du serveur
Contexte
Les applications Web se composent de pages Web qui doivent être téléchargés depuis un réseau. Pour cela il doit y avoir une connexion réseau. Cependant, il existe de nombreux cas où les utilisateurs ne peuvent pas se connecter à un réseau en raison de circonstances indépendantes de leur volonté. HTML5 offre la possibilité d'accéder à l'application Web même sans connexion réseau à l'aide du manifeste de cache.
Les applications Web se composent de ressources identifiées par des URL. Ceux-ci peuvent être HTML, CSS, JavaScript, images ou toute autre source qui est nécessaire pour une application Web à rendre. Leurs adresses peuvent être copiées dans un fichier manifeste, qui peut être mis à jour régulièrement par l'auteur de l'application Web, ce qui indique de nouvelles adresses web qui sont ajoutés ou supprimés. Lors de la connexion à un réseau pour la première fois, un navigateur Web va lire le fichier manifest HTML5, téléchargez les ressources données et de les stocker localement. Puis, en l'absence d'une connexion réseau, le navigateur Web se déplacera vers les copies locales au lieu et rendre l'application Web hors ligne.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement le cache d'application.
| API | |||||
|---|---|---|---|---|---|
| Application Cache | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Cache Manifest Exemple
L'exemple ci - dessous montre un document HTML avec un manifeste de cache (for offline browsing) la (for offline browsing) :
Exemple
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html> Essayez vous - même » Notions de base Cache Manifest
Pour les applications hors ligne pour travailler, un cache fichier manifeste doit être créé par le développeur web. Si l'application Web dépasse plus d'une page chaque page doit avoir un attribut manifeste qui pointe vers le manifeste du cache. Chaque page faisant référence au manifeste sera stocké localement. Le cache fichier manifeste est un fichier texte situé dans une autre partie du serveur. Il doit être servi avec le type de contenu suivant:
text/cache-manifest
Pour activer le cache de l' application, inclure le manifest attribut dans le document de <html> tag:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Chaque page avec le manifest attribut spécifié sera mis en mémoire cache lorsque l'utilisateur visite il. Si le manifest attribut n'est pas spécifié, la page ne sera pas mis en cache (unless the page is specified directly in the manifest file) à (unless the page is specified directly in the manifest file) que (unless the page is specified directly in the manifest file) .
L'extension de fichier recommandé pour les fichiers est manifeste: ".appcache"
Un fichier manifeste doit être servi avec le correct media type , qui est "text/cache-manifest" . Doit être configuré sur le serveur Web.
Le fichier Manifest
Le fichier manifeste est un simple fichier texte, qui indique au navigateur de mettre en cache (and what to never cache) .
Le fichier manifeste comporte trois sections:
- CACHE MANIFEST - Les fichiers listés sous cet en- tête seront mises en cache après leur téléchargement pour la première fois
- NETWORK - Les fichiers listés sous cet en- tête nécessitent une connexion au serveur, et ne sera jamais mis en mémoire cache
- FALLBACK - Les fichiers listés sous cet en- tête spécifie les pages de secours si une page est inaccessible
CACHE MANIFESTE
La première ligne, CACHE MANIFESTE, est nécessaire:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
Le fichier manifeste ci-dessus énumère trois ressources: un fichier CSS, une image GIF, et un fichier JavaScript. Lorsque le fichier manifeste est chargé, le navigateur télécharge les trois fichiers à partir du répertoire racine du site Web. Ensuite, chaque fois que l'utilisateur n'est pas connecté à Internet, les ressources seront toujours disponibles.
RÉSEAU
La section RÉSEAU ci - dessous indique que le fichier "login.asp" ne doit jamais être mis en mémoire cache, et ne sera pas disponible en ligne:
NETWORK:
login.asp
Un astérisque peut être utilisé pour indiquer que toutes les autres ressources / fichiers nécessitent une connexion Internet:
NETWORK:
*
SE RETIRER
La section ci - dessous REPLI précise que "offline.html" sera servi à la place de tous les fichiers dans le répertoire / html / catalogue, dans le cas ne peut être établie une connexion Internet:
FALLBACK:
/html/ /offline.html
Remarque: Le premier est la ressource URI, le second est le repli.
Mise à jour du cache
Une fois qu'une application est mise en mémoire cache, il reste en cache jusqu'à ce que l'un des événements suivants se produit:
- L'utilisateur efface le cache du navigateur
- Le fichier manifeste est modifié (see tip below) - (see tip below)
- Le cache de l'application est mis à jour par programmation
Exemple - Fiche complète Manifest Cache
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Tip: Les lignes commençant par un "#" sont des lignes de commentaires, mais peuvent aussi servir dans un autre but. Le cache d'une application est mise à jour que lorsque ses modifications de fichiers manifestes. Si vous modifiez une image ou modifier une fonction JavaScript, ces modifications ne seront pas re-mises en cache. Mise à jour de la date et la version en ligne de commentaire est une façon de faire de la re-cache du navigateur de vos fichiers.
Remarques sur le cache de l'application
Soyez prudent avec ce que vous cache.
Une fois qu'un fichier est mis en cache, le navigateur continuera à montrer la version en cache, même si vous modifiez le fichier sur le serveur. Pour assurer le navigateur met à jour le cache, vous devez modifier le fichier manifeste.
Note: Les navigateurs peuvent avoir des limites de tailles différentes pour les données mises en cache (some browsers have a 5MB limit per site) .