HTML5 utilise l'interface ApplicationCache pour implémenter la technologie de mise en cache hors ligne afin de résoudre les problèmes hors ligne_html5 compétences du didacticiel

Introduction
L'accès hors ligne est de plus en plus important pour les applications Web. Bien que tous les navigateurs disposent de mécanismes de mise en cache, ils ne sont pas fiables et peuvent ne pas toujours fonctionner comme prévu. HTML5 utilise l'interface ApplicationCache pour résoudre certains des problèmes causés par le mode hors connexion.
L'utilisation de l'interface de cache apporte les trois avantages suivants à votre application :
Navigation hors ligne – les utilisateurs peuvent parcourir l'intégralité de votre site Web en mode hors connexion
Vitesse – les ressources mises en cache sont des ressources locales, donc la vitesse de chargement est plus rapide.
Moins de charge du serveur – le navigateur téléchargera uniquement les ressources des serveurs qui ont changé.

Application Cache (également connu sous le nom d'AppCache) permet aux développeurs de spécifier quels fichiers le navigateur doit mettre en cache pour les utilisateurs hors ligne. Même si l'utilisateur appuie sur le bouton d'actualisation lorsqu'il est hors ligne, votre application se chargera et s'exécutera normalement.
Fichier manifeste de cache
Un fichier manifeste de cache est un simple fichier texte qui répertorie les ressources que le navigateur doit mettre en cache pour un accès hors ligne.
Référez-vous au fichier manifeste
Pour activer la mise en cache d'application pour une application, ajoutez l'attribut manifeste à la balise html du document :

Copier le code

Le code est le suivant :

...
🎜>

Vous devez ajouter l'attribut manifest sur chaque page de votre application Web que vous souhaitez mettre en cache. Si une page Web ne contient pas l'attribut manifeste, le navigateur ne mettra pas la page en cache (sauf si l'attribut est explicitement répertorié dans le fichier manifeste). Cela signifie que chaque page Web parcourue par l'utilisateur et contenant un manifeste sera implicitement ajoutée au cache de l'application. Par conséquent, vous n’avez pas besoin de répertorier toutes les pages de votre inventaire.
L'attribut manifest peut pointer vers une URL absolue ou un chemin relatif, mais l'URL absolue doit avoir la même origine que l'application web correspondante. Le fichier manifeste peut utiliser n'importe quelle extension de fichier, mais doit être servi avec le type MIME correct (voir ci-dessous).

Copier le codeLe code est le suivant :

...



Les fichiers manifestes doivent être fournis au format MIME texte/cache-manifest. Vous devrez peut-être ajouter des types de fichiers personnalisés à votre serveur Web ou à votre configuration .htaccess.
Par exemple, pour fournir ce type MIME dans Apache, ajoutez la ligne suivante à votre fichier de configuration :
AddType text/cache-manifest .appcache Pour fournir cela dans le fichier app.yaml de Google App Engine, ajoutez le type MIME suivant :
- url : /mystaticdir/(.*.appcache)
static_files : mystaticdir/1
mime_type : text/cache-manifest
upload : mystaticdir/(. *.appcache) fichier manifeste structure
Le format simple du manifeste est le suivant :
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js L'exemple mettra en cache quatre fichiers sur la page Web qui spécifie ce fichier manifeste.
Vous devez faire attention aux points suivants :
La chaîne CACHE MANIFEST doit être sur la première ligne et est obligatoire.
La taille des données mises en cache d’un site Web ne doit pas dépasser 5 Mo. Toutefois, si vous écrivez une application pour le Chrome Web Store, vous pouvez utiliser unlimitedStorage pour supprimer cette restriction.
Si le fichier manifeste ou les ressources qui y sont spécifiées ne peuvent pas être téléchargés, l'ensemble du processus de mise à jour du cache ne se poursuivra pas. Dans ce cas, le navigateur continuera à utiliser le cache de l'application d'origine.
Regardons un exemple plus complexe :
CACHE MANIFEST
# 2010-06-18:v2
# 'Entrée principale' explicitement mise 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 dans images/large/
#offline.html sera servi à la place de tous les autres fichiers .html
FALLBACK :
/ main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html Les lignes commençant par "#" sont des lignes de commentaires, mais peuvent également être utilisées à d'autres fins. Le cache de l'application n'est mis à jour que lorsque son fichier manifeste est modifié. Par exemple, si vous modifiez une ressource image ou une fonction JavaScript, ces modifications ne seront pas remises en cache. Vous devez modifier le fichier manifeste lui-même pour permettre au navigateur d'actualiser le fichier cache. La création de lignes de commentaires avec des numéros de version générés, des hachages de fichiers ou des horodatages garantit que les utilisateurs disposent de la dernière version de votre logiciel. Vous pouvez également mettre à jour le cache par programme lorsqu'une nouvelle version devient disponible, comme décrit dans la section Mise à jour du cache.
Un manifeste peut inclure trois sections différentes : CACHE, NETWORK et FALLBACK.
CACHE :
C'est la partie par défaut de l'entrée. Les fichiers répertoriés sous cet en-tête (ou les fichiers qui suivent immédiatement CACHE MANIFEST) sont explicitement mis en cache lors de leur premier téléchargement.
RÉSEAU :
Les fichiers répertoriés dans cette section sont des ressources sur liste blanche qui doivent être connectées au serveur. Toutes les demandes concernant ces ressources contournent le cache, que l'utilisateur soit ou non hors ligne. Des caractères génériques peuvent être utilisés.
FALLBACK :
Cette section est facultative et est utilisée pour spécifier une page de secours si la ressource n'est pas accessible. Le premier URI représente la ressource et le second représente la page Web de secours. Les deux URI doivent être liés et doivent avoir la même origine que le fichier manifeste. Des caractères génériques peuvent être utilisés.
Remarque : ces sections peuvent être organisées dans n'importe quel ordre et chaque section peut apparaître à plusieurs reprises dans la même liste.
La liste suivante définit la page "complète" (offline.html) qui s'affiche lorsqu'un utilisateur tente d'accéder à la racine du site hors ligne, et indique également que toutes les autres ressources (comme celles des sites distants) nécessitent un Connexion Internet.
CACHE MANIFEST
# 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
FALLBACK :
/ /offline.html
# Toutes les autres ressources (par exemple les sites) nécessitent que l'utilisateur soit en ligne
RÉSEAU :
*
# Ressources supplémentaires à mettre en cache.
CACHE :
images/logo1.png
images/logo2.png
images/logo3.png Veuillez noter : les fichiers HTML qui font référence à des fichiers manifestes seront automatiquement mis en cache. Vous n’avez donc pas besoin de l’ajouter à votre liste, mais nous vous recommandons de le faire.
Veuillez noter : les en-têtes de cache HTTP et les limites de cache définies sur les pages servies via SSL seront remplacés par des manifestes de cache. Par conséquent, les pages Web servies via https peuvent s’exécuter hors ligne.

Mettre à jour le cache
Les applications resteront en cache lorsqu'elles sont hors ligne, sauf si l'un des événements suivants se produit :
Un utilisateur efface le stockage des données du navigateur pour votre site Web.
Le fichier manifeste a été modifié. Remarque : La mise à jour d'un fichier répertorié dans le manifeste ne signifie pas que le navigateur remettra la ressource en cache. Le fichier manifeste lui-même doit être modifié.
Le cache de l'application est mis à jour par programme.

État du cache
L'objet window.applicationCache fournit un accès par programmation au cache d'application du navigateur. Son attribut status peut être utilisé pour afficher l'état actuel du cache :

Copier le code

Le code est le suivant :

var appCache = window.applicationCache
switch ( appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return
break
case appCache.DOWNLOADING: // DOWNLOADING; == 3
retourne 'TÉLÉCHARGEMENT';
break;
case appCache.UPDATEREADY == 4
return 'UPDATEREADY';
break
case appCache.OBSOLETE; : // OBSOLETE == 5
return 'OBSOLETE';
break;
par défaut:
return 'UKNOWN CACHE STATUS';
break; >
Pour mettre à jour le cache par programme, appelez d'abord applicationCache.update(). Cette opération 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 UPDATEREADY, appelez applicationCache.swapCache() pour remplacer le cache d'origine par le nouveau cache.

Copier le code

Le code est le suivant :

var appCache = window.applicationCache ;

appCache.update(); // Tentative de mise à jour du cache de l'utilisateur

...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache() ; // La récupération a réussi, échangez dans le nouveau cache
}



Veuillez noter

 : Utiliser update() et swapCache() de cette manière ne fournira pas. l'utilisateur a mis à jour les ressources. Ce processus permet simplement au navigateur de rechercher de nouveaux manifestes, de télécharger les mises à jour spécifiées et de remplir à nouveau le cache de l'application. Par conséquent, la page Web doit être rechargée deux fois pour fournir un nouveau contenu à l'utilisateur, la première fois pour obtenir un nouveau cache d'application et la deuxième fois pour actualiser le contenu de la page Web.
La bonne nouvelle est que vous pouvez éviter d'avoir à recharger deux fois. Pour mettre à jour les utilisateurs vers la dernière version du site Web, vous pouvez configurer un écouteur pour écouter l'événement updateready lorsque la page Web est chargée :

Copier le code

Le code est le suivant :

// Vérifiez si un nouveau cache est disponible au chargement de la page

window.addEventListener('load', function(. e) {

window.applicationCache. addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Le navigateur a téléchargé une nouvelle application cache.
// Échangez-le et rechargez la page pour obtenir la nouvelle version
window.applicationCache.swapCache();
if (confirm('Une nouvelle version de ce site est disponible. Chargez-le). ?')) {
window.location.reload();
}
} else {
// Le manifeste n'a pas changé
}
} , false);
}, false );



ÉVÉNEMENTS APPCACHE

Comme vous vous en doutez, des événements supplémentaires sont utilisés pour surveiller l'état du cache. Le navigateur déclenche les événements correspondants pour la progression du téléchargement, les mises à jour du cache de l'application, l'état d'erreur, etc. L'extrait de code suivant configure des écouteurs d'événement pour chaque type d'événement de cache :

Copiez le code

Le code est le suivant :

function handleCacheEvent(e) {
//...
}
function handleCacheError(e) {
alert('Erreur : le cache n'a pas pu être mis à jour !');
} ;
// Lancé après le premier cache du manifeste.
appCache.addEventListener('cached', handleCacheEvent, false);
// Recherche d'une mise à jour. Toujours le premier événement déclenché dans la séquence.
appCache.addEventListener('checking', handleCacheEvent, false);
// Une mise à jour a été trouvée. Le navigateur récupère des ressources.
appCache.addEventListener('downloading', handleCacheEvent, false);
// Le manifeste renvoie 404 ou 410, le téléchargement a échoué,
// ou le manifeste a changé pendant le téléchargement.
appCache.addEventListener('error', handleCacheError, false);
// Lancé après le premier téléchargement du manifeste.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Déclenché si le fichier manifeste renvoie un 404 ou 410.
// Cela entraîne la suppression du cache de l'application.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Déclenché pour chaque ressource répertoriée dans le manifeste au fur et à mesure de sa récupération.
appCache.addEventListener('progress', handleCacheEvent, false);
// Déclenché lorsque les ressources du manifeste ont été récemment retéléchargées.
appCache.addEventListener('updateready', handleCacheEvent, false);

如果清单文件或其中指定的资源无法下载，整个更新都将失败。在这种情况下，浏览器将继续使用原应用缓存