L'accès hors ligne devient de plus en plus important pour les applications Web. Bien que tous les navigateurs aient des mécanismes de mise en cache, ils ne sont pas fiables et peuvent ne pas toujours jouer le rôle attendu. HTML5 utilise l'interface ApplicationCache pour résoudre certains des problèmes causés par l'utilisation hors ligne.
L'utilisation d'une interface de cache peut apporter les trois avantages suivants à votre application :Version hors ligne - Les utilisateurs peuvent parcourir votre site Web complet tout en étant hors ligne
Speed - La ressource mise en cache est une ressource locale, donc elle se charge plus rapidement.
Le serveur est moins chargé - le navigateur ne télécharge que les ressources du serveur qui a changé.
L'application Cache (également connue sous le nom d'AppCache) permet aux développeurs de spécifier quels fichiers que le navigateur doit mettre en cache pour les utilisateurs hors ligne pour accéder. Votre application se charge et s'exécutera normalement, même si l'utilisateur appuie sur le bouton d'actualisation lorsque vous êtes hors ligne.
Fichier de manifeste de cache
Un fichier de manifeste de cache est un fichier texte simple qui répertorie les ressources que le navigateur doit mettre en cache pour un accès hors ligne.
Fichier manifeste de référence
Pour activer la mise en cache d'application pour une application, ajoutez l'attribut manifeste dans la balise HTML du document:
<html manifest = "example.appcache">
...
</html>
Vous devez ajouter la propriété manifeste sur chaque page de l'application Web que vous souhaitez mettre en cache. Si la page ne contient pas l'attribut manifeste, le navigateur ne mettra pas en cache la page (sauf s'il est explicitement répertorié dans le fichier manifeste). Cela signifie que chaque page Web que l'utilisateur navigue avec le manifeste sera implicitement ajoutée au cache d'application. Par conséquent, vous n'avez pas besoin de répertorier chaque page dans la liste.
La propriété manifeste peut indiquer une URL absolue ou un chemin relatif, mais l'URL absolue doit être la même que l'application réseau correspondante. Le fichier manifeste peut utiliser n'importe quelle extension de fichier, mais doit être fourni avec le type de mime correct (voir ci-dessous).
<html manifest = "http://www.example.com/example.mf">
...
</html>
Le fichier manifeste doit être fourni dans le type de mime texte / cache-manifest. Vous devrez peut-être ajouter un type de fichier personnalisé à votre serveur Web ou à votre configuration .htaccess.
Par exemple, pour fournir ce type de mime dans Apache, ajoutez la ligne suivante à votre fichier de configuration:
Text AddType / Cache-Manifest .AppCache Pour fournir ce type de mime dans le fichier app.yaml de Google App Engine, ajoutez ce qui suit:
- url: /mystaticdir/(.*/.appcache)
static_files: mystaticdir // 1
mime_type: texte / cache-manifest
Téléchargement: mystaticdir /(.*/. AppCache) Structure de fichiers manifeste
Le format de liste simple est le suivant:
Manifeste du cache
index.html
Stylesheet.css
images / logo.png
scripts / main.js Cet exemple cache quatre fichiers sur la page Web qui spécifie ce fichier manifeste.
Les points suivants auxquels vous devez faire attention:
La chaîne de manifeste de cache doit être sur la première ligne et est essentielle.
La quantité de données mises en cache sur le site Web ne doit pas dépasser 5 Mo. Cependant, si vous écrivez une application pour Chrome Web Store, vous pouvez utiliser UnlimitedStorage pour illimiter les restrictions.
Si le fichier manifeste ou la ressource spécifiée ne peut pas être téléchargé, l'ensemble du processus de mise à jour du cache ne peut pas être effectué. Dans ce cas, le navigateur continuera à utiliser le cache d'application d'origine.
Jetons un coup d'œil à des exemples plus complexes:
Manifeste du cache
# 2010-06-18: V2
# «Entrées maître» explicitement mises en cache.
Cache :/favicon.ico
index.html
Stylesheet.css
images / logo.png
scripts / main.js
# Ressources qui nécessitent que l'utilisateur soit en ligne.
RÉSEAU :login.php
/ myapi
http://api.twitter.com
# static.html sera servi si Main.py est inaccessible
# offline.jpg sera servi à la place de toutes les images en images / grandes /
# offline.html sera servi à la place de tous les autres fichiers .html
RETOMBER :/main.py /static.html
images / grandes / images / offline.jpg
* .html /offline.html Les lignes qui commencent par # sont des lignes de commentaires, mais peuvent également être utilisées à d'autres fins. Le cache d'application n'est mis à jour que si son fichier manifeste change. Par exemple, si vous modifiez une ressource d'image ou modifiez une fonction JavaScript, ces modifications ne sont pas un reache. Vous devez modifier le fichier manifeste lui-même pour que le navigateur actualise le fichier mis en cache. Créez des lignes de commentaires avec des numéros de version générés, des valeurs de hachage de fichiers ou des horodatages pour garantir que les utilisateurs obtiennent la dernière version de votre logiciel. Vous pouvez également mettre à jour par programme le cache après une nouvelle version, comme décrit dans la section Cache de mise à jour.
La liste peut inclure trois parties différentes: le cache, le réseau et le repli.
Cache :Il s'agit de la partie par défaut de l'entrée. Les fichiers répertoriés sous cet en-tête sont explicitement mis en cache pour la première fois (ou les fichiers immédiatement après le manifeste du cache).
RÉSEAU :Les fichiers répertoriés dans cette section sont des ressources en liste blanche qui doivent être connectées au serveur. Toutes les demandes de ces ressources contournent le cache, que l'utilisateur soit hors ligne ou non. Les caractères génériques peuvent être utilisés.
RETOMBER :Cette section est facultative et est utilisée pour spécifier la page de secours lorsque la ressource n'est pas accessible. Le premier URI représente la ressource et la seconde représente la page Web de sauvegarde. Les deux URI doivent être liés et doivent être de la même origine que le fichier manifeste. Les caractères génériques peuvent être utilisés.
Veuillez noter: ces sections peuvent être organisées dans n'importe quel ordre et chaque section peut être répétée dans la même liste.
La liste suivante définit la page Web complète (offline.html) affichée lorsqu'un utilisateur tente d'accéder à la racine d'un site Web hors ligne, et indique également que toutes les autres ressources (telles que les ressources sur des sites distants) nécessitent une connexion Internet.
Manifeste du cache
# 2010-06-18: V3
# Entrées explicitement mises en cache
index.html
css / style.css
# offline.html sera affiché si l'utilisateur est hors ligne
RETOMBER:
//offline.html
# Toutes les autres ressources (par exemple, les sites) exigent que l'utilisateur soit en ligne.
RÉSEAU:
*
# Ressources supplémentaires pour se cacher
Cache:
images / logo1.png
images / logo2.png
Veuillez noter que les images / logo3.png: le système mettra automatiquement en cache le fichier HTML qui fait référence au fichier manifeste. Vous n'avez donc pas besoin de l'ajouter à la liste, mais nous vous recommandons de le faire.
Remarque : les en-têtes de cache HTTP et les restrictions de cache définis pour les pages Web fournies via SSL seront remplacées par des manifestes de cache. Par conséquent, la page Web fournie par HTTPS peut être exécutée hors ligne. Mettre à jour le cacheL'application reste mise en cache après hors ligne, sauf si l'une des éléments suivants se produit:
L'utilisateur efface le stockage de données du navigateur sur votre site Web.
Le fichier manifeste a été modifié. Veuillez noter: la mise à jour d'un fichier répertorié dans le manifeste ne signifie pas que le navigateur remontera la ressource. Le fichier manifeste lui-même doit être modifié.
Le cache d'application est mis à jour par programme.
Statut de cacheL'objet Window.ApplicationCache est une méthode d'accès programmatique au cache d'application du navigateur. Son attribut d'état peut être utilisé pour afficher l'état actuel du cache:
var appcache = window.ApplicationCache;
commutateur (appcache.status) {
cas appcache.uncached: // non-acheté == 0
retourner «non acheté»;
casser;
cas appcache.idle: // inlaie == 1
retourner 'inactif';
casser;
cas appcache.checking: // vérification == 2
retourner «chèque»;
casser;
cas appcache.downloading: // downloading == 3
retourner «téléchargement»;
casser;
cas appcache.upDateready: // Updateready == 4
retourner «Updateready»;
casser;
cas appcache.obsolete: // obsolète == 5
retour «obsolète»;
casser;
défaut:
return 'unnown cache status';
casser;
};
Pour mettre à jour par programme le cache, appelez d'abord ApplicationCache.update (). Cela tentera de mettre à jour le cache de l'utilisateur (à condition que le fichier manifeste ait été modifié). Enfin, lorsque ApplicationCache.Status est dans l'état UpdateArey, appelez ApplicationCache.SwapCache () pour remplacer le cache d'origine par le nouveau cache.
var appcache = window.ApplicationCache;
appcache.update (); // Essayez de mettre à jour le cache de l'utilisateur.
...
if (appcache.status == window.ApplicationCache.upDateready) {
appcache.swapcache (); // La récupération a réussi, échange dans le nouveau cache.
}
Veuillez noter : Utilisation de mise à jour () et swapCache () de cette manière ne fournira pas de ressources mises à jour à l'utilisateur. Ce processus permet simplement au navigateur de vérifier les nouveaux manifestes, de télécharger des mises à jour spécifiées et de remplir le cache de l'application. Par conséquent, la page Web doit être rechargée deux fois avant que un nouveau contenu ne soit fourni à l'utilisateur, le premier consiste à obtenir un nouveau cache d'application et le second consiste à actualiser le contenu de la page Web.La bonne nouvelle est que vous pouvez éviter les tracas de recharger deux fois. Pour mettre à jour les utilisateurs vers la dernière version du site Web, configurez un auditeur pour surveiller les événements Updateready lorsque la page Web charge:
// Vérifiez si un nouveau cache est disponible sur le chargement de la page.
window.addeventListener ('Load', fonction (e) {
window.ApplicationCache.AddeventListener ('Updateady', fonction (e) {
if (window.applicationcache.status == window.applicationcache.upDateready) {
// Browser a téléchargé un nouveau cache d'application.
// Échangez-le et rechargez la page pour obtenir la nouvelle chaleur.
window.ApplicationCache.swapCache ();
if (confirm ('Une nouvelle version de ce site est disponible. Chargez-le?')) {
window.location.reload ();
}
} autre {
// Manifest n'a pas changé. Rien de nouveau sur le serveur.
}
}, FAUX);
}, FAUX);
Événement AppCacheComme vous vous y attendez, des événements supplémentaires sont utilisés pour écouter l'état du cache. Le navigateur déclenchera les événements correspondants pour le téléchargement de progrès, les mises à jour du cache d'application et l'état d'erreur. L'extrait de code suivant configure un écouteur d'événements pour chaque type d'événement de cache:
fonction handlecacheevent (e) {
// ...
}
fonction handleCacheerror (e) {
alert ('Erreur: le cache n'a pas réussi à mettre à jour!');
};
// tiré après le premier cache du manifeste.
appcache.addeventListener ('cached', handlecacheevent, false);
// Vérification d'une mise à jour. Toujours le premier événement tiré dans la séquence.
appcache.addeventListener («vérification», handlecacheevent, false);
// Une mise à jour a été trouvée. Le navigateur va chercher des ressources.
appcache.addeventListener («téléchargement», handlecacheevent, false);
// Le manifeste revient 404 ou 410, le téléchargement a échoué,
// ou le manifeste a changé pendant que le téléchargement était en cours.
appcache.addeventListener ('error', handlecacheerror, false);
// tiré après le premier téléchargement du manifeste.
appcache.addeventListener ('noupdate', handlecacheevent, false);
// tiré si le fichier manifeste renvoie un 404 ou 410.
// Il en résulte la suppression du cache d'application.
appcache.addeventListener («obsolète», handlecacheevent, false);
// tiré pour chaque ressource répertoriée dans le manifeste lorsqu'il est récupéré.
appcache.addeventListener («progress», handlecacheevent, false);
// tiré lorsque les ressources manifestes ont été nouvellement téléchargées.
appcache.addeventListener ('updateady', handlecacheevent, false);
Si le fichier manifeste ou la ressource spécifiée ne peut pas être téléchargé, l'intégralité de la mise à jour échouera. Dans ce cas, le navigateur continuera à utiliser le cache d'application d'origine