recherche

Maison >interface Web >Tutoriel H5 >Qu'est-ce que le cache hors ligne HTML5 : compétences du didacticiel Manifest_html5

Qu'est-ce que le cache hors ligne HTML5 : compétences du didacticiel Manifest_html5

WBOY
WBOYoriginal
2016-05-16 15:51:342039parcourir

Les applications Web ne sont pas meilleures que les PC. Il y a des considérations de performances et de trafic. Les applications hors ligne deviennent de plus en plus importantes. Bien que les navigateurs disposent de mécanismes de mise en cache, ils sont souvent peu fiables. Tout est fini après Internet.

Qu'est-ce qui est manifeste ?

Pour faire simple, manifest permet d'accéder à votre application même sans connexion réseau.

Il présente trois avantages majeurs :

1. Navigation hors ligne, accès normal même sans réseau

2. Vitesse de chargement plus rapide, la vitesse d'accès local en cache est naturellement plus rapide

3. Réduisez la pression des demandes de service. Une fois le fichier mis en cache, il n'est pas nécessaire de le demander à nouveau, uniquement les fichiers qui doivent être mis à jour.

Comment utiliser ?

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
  2. <html manifeste="démo. appcache">
  3. ...
  4. html>

Vous devez inclure l'attribut manifest sur chaque page de l'application Web que vous souhaitez mettre en cache. Si une page n'a pas d'attribut manifeste, elle ne sera pas mise en cache (sauf si la page est explicitement spécifiée dans le fichier manifeste). Cela signifie que tant que la page visitée par l'utilisateur contient l'attribut manifest, celui-ci sera ajouté au cache de l'application. De cette façon, il n'est pas nécessaire de spécifier quelles pages doivent être mises en cache dans le fichier manifeste.

L'attribut Manifest peut spécifier une URL absolue ou un chemin relatif. Cependant, une URL absolue doit provenir de la même origine que l'application Web. Un fichier manifeste peut être n'importe quel type de fichier d'extension, mais il doit avoir le type MIME correct, comme l'ajout de

dans Apache

"AddType texte/cache-manifest .appcache".

Fichier manifeste

Les fichiers manifestes sont de simples fichiers texte qui indiquent au navigateur ce qui est mis en cache (et ce qui ne l'est pas).

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

CACHE MANIFEST - Les fichiers répertoriés sous cette rubrique seront mis en cache après le premier téléchargement
NETWORK - dans Les fichiers répertoriés sous cette rubrique nécessitent une connexion au serveur et ne sont pas mis en cache
FALLBACK - Les fichiers répertoriés sous cette rubrique spécifient une solution de secours lorsque la page est inaccessible Page (comme 404 page)

Un dossier manifeste complet :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. CACHE MANIFESTE
  2. #2012-02-21 v1.0.0
  3. /theme.css
  4. /logo.gif
  5. /main.js
  7. RÉSEAU :
  8. login.asp
  10. RETOUR :
  11. /html5/ /404.html

CACHE MANIFEST est requis. # est suivi d'un commentaire. Vous trouverez ci-dessous les fichiers qui doivent être mis en cache et nécessitent un chemin relatif. NETWORK est un fichier qui doit être chargé à chaque requête.
Un astérisque peut être utilisé pour indiquer que toutes les autres ressources/fichiers nécessitent une connexion Internet :
RÉSEAU :
*
FALLBACK est si une connexion Internet la connexion ne peut pas être établie, puis utilisez "404.html" pour remplacer tous les fichiers du répertoire /html5/.

Mécanisme de mise à jour
Il existe trois façons de mettre à jour le cache du manifeste :
1 L'utilisateur efface le cache du navigateur
2. est un commentaire (il peut donc être modifié par Commentaire pour mettre à jour le fichier)
3. Mise à jour par programme

État du cache
Vous pouvez afficher l'état du cache dans le programme via la propriété window.applicationCache.

Code C/CCopier le contenu dans le presse-papiers
  1. var appCache = window.applicationCache ;   
  2.     
  3. commutateur (appCache.status) {   
  4.     
  5.   case appCache.UNCACHED : // UNCACHED == 0   
  6.     
  7.     return 'NON CACHÉ' ;   
  8.     
  9.     pause;   
  10.     
  11.   cas appCache.IDLE : // IDLE == 1   
  12.     
  13.     retour 'IDLE' ;   
  14.     
  15.     pause;   
  16.     
  17.   cas appCache.CHECKING : // CHECKING == 2   
  18.     
  19.     retour 'VÉRIFICATION' ;   
  20.     
  21.     pause;   
  22.     
  23.   case appCache.DOWNLOADING : // DOWNLOADING == 3   
  24.     
  25.     retour 'TÉLÉCHARGEMENT' ;   
  26.     
  27.     pause;   
  28.     
  29.   cas appCache.UPDATEREADY :  // UPDATEREADY == 4   
  30.     
  31.     retour 'UPDATEREADY' ;   
  32.     
  33.     pause;   
  34.     
  35.   cas appCache.OBSOLETE : // OBSOLETE == 5   
  36.     
  37.     retour 'OBSOLÈTE' ;   
  38.     
  39.     pause;   
  40.     
  41.   par défaut :   
  42.     
  43.     return « ÉTAT  DU CACHE INCONNU » ;   
  44.     
  45.     pause;   
  46.     
  47. } ;   
  48.   

Pour mettre à jour le cache par programme, appelez d'abord applicationCache.update(). Cela tentera de mettre à jour le cache de l'utilisateur (exigeant que le fichier manifeste ait changé). Enfin, lorsque applicationCache.status est dans l'état UPDATEREADY, appelez applicationCache.swapCache() et l'ancien cache sera remplacé par le nouveau.

Code C/CCopier le contenu dans le presse-papiers
  1. var appCache = window.applicationCache;
  3. appCache.update(); // Tentative de mise à jour du cache de l'utilisateur
  5. …
  7. if (appCache.status == window.applicationCache.UPDATEREADY) {
  9. appCache.swapCache(); // La récupération a réussi, échangez dans le nouveau cache
  11. }

Remarque : utiliser update() et swapCache() comme ceci ne présentera pas la ressource mise à jour à l'utilisateur. Cela permet simplement au navigateur de vérifier si le fichier manifeste a été mis à jour, puis de télécharger le contenu de mise à jour spécifié et de remplir à nouveau le cache de l'application. Par conséquent, pour que les utilisateurs puissent voir le contenu mis à jour, deux téléchargements de pages sont nécessaires, un pour mettre à jour le cache de l'application et un pour mettre à jour le contenu de la page.

Pour permettre aux utilisateurs de voir la dernière version de votre site, configurez un écouteur pour écouter l'événement updateready lors du chargement de la page.

Code C/CCopier le contenu dans le presse-papiers
  1. // Vérifiez si un nouveau cache est disponible au chargement de la page
  3. window.addEventListener('load', function(e) {
  5. window.applicationCache.addEventListener('updateready', function(e) {
  7. if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
  9.  // Le navigateur a téléchargé un nouveau cache d'application
  11.  // Échangez-le et rechargez la page pour obtenir la nouvelle nouveauté
  13. window.applicationCache.swapCache();
  14. window.location.reload();
  16. } autre {
  18.  // Le manifeste n'a pas changé. Rien de nouveau sur le serveur
    19. .
  20. }
  22. }, faux);
    24. },
  24. faux);

Écoutez les événements et gérez les différents états en conséquence :

Code C/CCopier le contenu dans le presse-papiers
  1. var appCache = window.applicationCache;
  3. // Lancé après le premier cache du manifeste
  5. appCache.addEventListener('cached', handleCacheEvent, false
    6. );
  7. // Recherche d'une mise à jour. Toujours le premier événement déclenché dans la séquence
    8. .
  9. appCache.addEventListener('checking', handleCacheEvent, false
    10. );
  11. // Une mise à jour a été trouvée. Le navigateur récupère des ressources
  13. appCache.addEventListener('téléchargement', handleCacheEvent, false
    14. );
  15. // Le manifeste renvoie 404 ou 410, le téléchargement a échoué,
  17. // ou le manifeste a changé pendant le téléchargement
    18. .
  19. appCache.addEventListener('error', handleCacheError, false
    20. );
  21. // Licencié après le premier téléchargement du manifeste
  23. appCache.addEventListener('noupdate', handleCacheEvent, false
    24. );
  25. // Lancé si le fichier manifeste renvoie un 404 ou 410.
  27. // Cela entraîne la suppression du cache de l'application
    28. .
  29. appCache.addEventListener('obsolète', handleCacheEvent, false
    30. );
  31. // Lancé pour chaque ressource répertoriée dans le manifeste au fur et à mesure de sa récupération
  33. appCache.addEventListener('progress', handleCacheEvent, false
    34. );
  35. // Lancé lorsque les ressources du manifeste ont été récemment retéléchargées
    36. .
  37. appCache.addEventListener('updateready', handleCacheEvent, false
    38. );

Si le téléchargement du fichier manifeste ou d'une ressource spécifiée dans le fichier échoue, la mise à jour entière échouera. Dans ce cas, le navigateur continuera à essayer l'ancien cache de l'application.

Remarque :

1. La limite de capacité de stockage hors ligne du site est de 5M
2 Si le fichier manifeste ou un fichier répertorié en interne ne peut pas être téléchargé normalement, l'ensemble du processus de mise à jour sera considéré comme un échec et le navigateur continuera. pour utiliser l'ancien cache
3. Le html qui référence le manifeste doit avoir la même origine que le fichier manifeste et être dans le même domaine
4 Le chemin relatif utilisé dans le manifeste, la référence relative est le manifeste. fichier
5. La chaîne CACHE MANIFEST doit être dans la première ligne et essentielle
6. Le système mettra automatiquement en cache le fichier HTML qui fait référence au fichier manifeste
7 Le CACHE dans le fichier manifeste n'a rien. à voir avec l'ordre de position de NETWORK et FALLBACK. S'il s'agit d'une déclaration implicite, elle doit être dans Front
8. Les ressources dans FALLBACK doivent avoir la même origine que le fichier manifeste
9. est mise en cache, le navigateur demande directement le chemin absolu et accédera également à la ressource dans le cache.
10. Même si l'attribut manifeste n'est pas défini pour les autres pages du site, la ressource demandée sera accessible à partir du cache si elle se trouve dans le cache
11. Lorsque le fichier manifeste change, la ressource demande elle-même. déclenchera une mise à jour

Ce qui précède est une introduction au contenu pertinent du manifeste de mise en cache hors ligne HTML5. J'espère que cela sera utile à l'apprentissage de chacun.

Texte original : http://www.cnblogs.com/hutuzhu/p/4871666.html

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Balises sémantiques b et i dans les conseils du didacticiel HTML5_html5Article suivant：Balises sémantiques b et i dans les conseils du didacticiel HTML5_html5

Articles Liés

Voir plus