Latest web development tutorials

HTML5 cache de l'application

Utilisez HTML5, en créant un fichier manifeste de cache, vous pouvez facilement créer des versions hors ligne des applications web.


Quel est le cache de l'application (Cache application)?

HTML5 introduit cache de l'application, ce qui signifie que les applications Web peuvent être mis en cache, et sont accessibles sans connexion Internet.

l'application de cache d'application apporte trois avantages:

  1. Navigation hors ligne - les utilisateurs peuvent les utiliser dans l'application hors ligne
  2. Vitesse - ressources en cache se chargent plus rapidement
  3. Réduire la charge du serveur - le navigateur ne télécharge ressources mises à jour ou modifiées à partir du serveur.

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari et Opera en charge le cache de l'application.


exemples HTML5 Cache Manifest

L'exemple suivant montre le document HTML avec un manifeste de cache (hors connexion):

Exemples

<!DOCTYPE HTML>
<html manifest="demo .appcache ">

<body>
文档内容......
</body>

</html>

Essayez »


base Cache Manifest

Pour activer le cache d'application, l'étiquette contient l'attribut manifeste dans le document <html>:

<!DOCTYPE HTML>
<html manifest="demo .appcache ">
...
</html>

Chaque manifester page spéciale lorsque les utilisateurs accèdent à leur seront mis en cache. Si l'attribut manifeste est pas spécifié, la page ne sera pas mis en cache (sauf spécifier directement la page dans le fichier manifeste).

l'extension suggérée manifeste de fichier: ". AppCache".

remarque S'il vous plaît noter, les fichiers manifestes doivent configurer le type MIME correct, à savoir "text / cache-manifeste». Vous devez être configuré sur le serveur Web.


fichier Manifest

fichier manifeste est un simple fichier texte qui indique le contenu du navigateur de la cache (et ne cache le contenu).

fichiers manifestes peuvent être divisés en trois parties:

  • CACHE MANIFEST - dans le titre de ce document sera mis en cache après le premier téléchargement
  • RÉSEAU - Dans ce titre les documents suivants doivent se connecter au serveur, et ne seront pas mis en cache
  • REPLI - Dans cette liste sous les pages des documents de titre de restauration (par exemple la page 404) lorsque la page est inaccessible

CACHE MANIFEST

La première ligne, CACHE MANIFEST, 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 va télécharger les trois fichiers dans le répertoire racine de votre site. Ensuite, chaque fois que l'utilisateur se déconnecte de l'Internet, ces ressources sont encore disponibles.

RÉSEAU

Les dispositions suivantes du fichier paragraphes NETWORK "login.php" ne sont jamais mis en cache et disponible hors connexion ne sont pas disponibles:

NETWORK:
login.php

Vous pouvez utiliser un astérisque pour indiquer toutes les autres autres ressources / fichiers nécessitent une connexion Internet:

NETWORK:
*

REPLI

sections de FALLBACK définies ci-dessous Si vous ne pouvez pas établir une connexion Internet, avec "offline.html" alternatif / html5 / répertoire de tous les fichiers:

FALLBACK:
/html/ /offline.html

Remarque: La première URI est la ressource, le second est un substitut.


Mise à jour du cache

Une fois que l'application est mise en cache, il restera en cache jusqu'à ce que le suivant se produit:

  • Utilisateurs Vider le cache de votre navigateur
  • fichier manifeste est modifié (voir conseils ci-dessous)
  • Par le programme pour mettre à jour le cache de l'application

Exemple - Compléter le fichier Manifest

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

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

remarqueAstuce: Le "#" au début de la ligne de commentaire, mais aussi pour répondre à d' autres fins.application Caching sera mise à jour lorsque ses modifications de fichiers manifestes. Si vous modifiez une image, ou de modifier une fonction JavaScript, ces modifications ne seront pas re-cache. Mise à jour de la ligne de commentaire est une date et numéro de version du navigateur de re-cache approche de fichier.


A propos des instructions de cache d'application

S'il vous plaît prêter attention au contenu de la mémoire cache.

Une fois que les fichiers sont mis en cache, le navigateur continuera à afficher la version en cache, même si vous modifiez le fichier sur le serveur. Pour vous assurer que votre navigateur pour mettre à jour le cache, vous devez mettre à jour le fichier manifeste.

Remarque: La limite de capacité du navigateur pour les données mises en cache ne peut pas être le même (certains paramètres des restrictions de navigateurs est que chaque site 5MB).