HTML5 Tutoriel de base

HTML5 API

HTML5 Médias

HTML5 Graphiques

HTML5 Workers Web HTML 5 Base de données locale

HTML5 Cache d'application

Utilisation de HTML5, en créant un fichier manifeste de cache, il est facile de créer une version hors ligne de l'application web, ce qui introduit le cache d'application, ce qui signifie que l'application web peut être stockée en cache client et peut être accédée hors ligne sans connexion réseau.

Qu'est-ce que le cache d'application (Application Cache) ?

HTML5 Fournit un mécanisme de cache d'application qui permet aux applications web basées sur le web de fonctionner hors ligne. Les développeurs peuvent utiliser l'interface Application Cache (AppCache) pour définir les ressources que le navigateur doit stocker en cache et rendre disponibles pour les utilisateurs hors ligne. Lorsqu'ils sont hors ligne, même si les utilisateurs cliquent sur le bouton Actualiser, l'application peut toujours se charger et fonctionner normalement.

Le cache d'application apporte trois avantages à l'application :

Navigation hors ligne - Les utilisateurs peuvent les utiliser lorsque l'application est hors ligne
Vitesse - Les ressources en cache se chargent plus rapidement
Réduire la charge du serveur - Le navigateur ne téléchargera que les ressources mises à jour ou modifiées sur le serveur.

Quels navigateurs prennent en charge

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

HTML5 　Exemple de Manifeste de Cache

Le fichier HTML suivant montre un document HTML avec manifeste de cache (pour navigation hors ligne) :

Exemple en ligne

Exemple

<!DOCTYPE HTML>
<html manifest="demo.appcache">
	<body>
	Contenu du document......
	</body>
	</html>

Vérifiez et voyez si ‹/›

Base du Cache Manifest

Pour activer le cache de l'application, ajoutez l'attribut manifest à l'étiquette <html> du document :

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

Chaque page spécifiant un manifest sera mise en cache lors de l'accès de l'utilisateur. Si l'attribut manifest n'est pas spécifié, la page ne sera pas mise en cache (sauf si la page est directement spécifiée dans le fichier manifest).

L'extension de fichier recommandée pour le fichier manifest est : ".appcache".

Veuillez noter que le fichier manifest nécessite une configuration correcte du MIME-type, c'est-à-dire "text/cache-manifest". Il doit être configuré sur le serveur web.

Fichier Manifest

Le fichier manifest est un fichier texte simple qui informe le navigateur des contenus mis en cache (et des contenus non mis en cache).

Le fichier manifest peut être divisé en trois parties :

CACHE MANIFEST - Les fichiers énumérés sous ce titre seront mis en cache après le téléchargement initial
NETWORK - Les fichiers énumérés sous ce titre nécessitent une connexion au serveur et ne seront pas mis en cache
FALLBACK - Les fichiers énumérés sous ce titre servent de page de retour si la page ne peut pas être accédée (par exemple 404 page)

CACHE MANIFEST

La première ligne, CACHE MANIFEST, est obligatoire :

CACHE MANIFEST
/style.css
/logo.png
/main.js

Le fichier manifest ci-dessus liste trois ressources : un fichier CSS, une image GIF et un fichier JavaScript. Une fois que le fichier manifest est chargé, le navigateur télécharge ces trois fichiers à partir du répertoire racine du site. Ensuite, que l'utilisateur soit déconnecté du réseau ou non, ces ressources restent disponibles.

NETWORK

La section NETWORK ci-dessous stipule que le fichier "login.php" ne sera jamais mis en cache et ne sera pas disponible hors ligne :

NETWORK :
login.php

Un astérisque peut être utilisé pour indiquer tous les autres ressources/Tous les fichiers nécessitent une connexion réseau :

NETWORK :
*FALLBACK

La section FALLBACK ci-dessous stipule que si une connexion réseau ne peut pas être établie, "offline.html" sera utilisé à la place /html5/ Tous les fichiers du répertoire :

FALLBACK :
/html/　/index.html

Attention : le premier URI est la ressource, le second est le remplaçant.

Mise à jour du cache

Une fois l'application stockée en cache, elle restera en cache jusqu'à l'une des seguint situations :

L'utilisateur vide le cache du navigateur
Le fichier manifest a été modifié (voir les conseils ci-dessous)
Mis à jour par le programme pour la cache de l'application

Exemple complet du fichier Manifest

CACHE MANIFEST
#　2018-02-21　v1.1.1
/style.css
/logo.png
/main.js
NETWORK :
login.php
FALLBACK :
/html/　/index.html

Avis :Les lignes commençant par "#" sont des lignes de commentaires, mais peuvent également être utilisées à d'autres fins. Le cache de l'application est mis à jour lorsque le fichier manifest change. Si vous éditez une image ou modifiez une fonction JavaScript, ces modifications ne seront pas mises en cache à nouveau. Mettre à jour la date et le numéro de version dans les lignes de commentaires est une méthode pour faire réactualiser le cache par le navigateur.

Description de la cache d'application

Veuillez noter le contenu du cache.

Une fois que le fichier a été mis en cache, le navigateur continuera à afficher la version en cache, même si vous modifiez le fichier sur le serveur. Pour assurer que le navigateur met à jour le cache, vous devez mettre à jour le fichier manifest.

Attention : les limites de capacité des données en cache pour les navigateurs peuvent varier (certains navigateurs fixent des limites par site). 5MB).