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
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 ?
- >
- <html manifeste="démo. appcache">
- ...
- 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 :
- CACHE MANIFESTE
- #2012-02-21 v1.0.0
- /theme.css
- /logo.gif
- /main.js
- RÉSEAU :
- login.asp
- RETOUR :
- /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.
- var appCache = window.applicationCache ;
- commutateur (appCache.status) {
- case appCache.UNCACHED : // UNCACHED == 0
- return 'NON CACHÉ' ;
- pause;
- cas appCache.IDLE : // IDLE == 1
- retour 'IDLE' ;
- pause;
- cas appCache.CHECKING : // CHECKING == 2
- retour 'VÉRIFICATION' ;
- pause;
- case appCache.DOWNLOADING : // DOWNLOADING == 3
- retour 'TÉLÉCHARGEMENT' ;
- pause;
- cas appCache.UPDATEREADY : // UPDATEREADY == 4
- retour 'UPDATEREADY' ;
- pause;
- cas appCache.OBSOLETE : // OBSOLETE == 5
- retour 'OBSOLÈTE' ;
- pause;
- par défaut :
- return « ÉTAT DU CACHE INCONNU » ;
- pause;
- } ;
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.
- 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
- }
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.
- // 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é un nouveau cache d'application
- // Échangez-le et rechargez la page pour obtenir la nouvelle nouveauté
- window.applicationCache.swapCache();
- window.location.reload();
- } autre {
- // Le manifeste n'a pas changé. Rien de nouveau sur le serveur .
- }
- }, faux);
- },
- faux);
Écoutez les événements et gérez les différents états en conséquence :
- var appCache = window.applicationCache;
- // 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('téléchargement', 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 );
- // Licencié après le premier téléchargement du manifeste
- appCache.addEventListener('noupdate', handleCacheEvent, false );
- // Lancé si le fichier manifeste renvoie un 404 ou 410.
- // Cela entraîne la suppression du cache de l'application .
- appCache.addEventListener('obsolète', handleCacheEvent, false );
- // Lancé pour chaque ressource répertoriée dans le manifeste au fur et à mesure de sa récupération
- appCache.addEventListener('progress', handleCacheEvent, false );
- // Lancé lorsque les ressources du manifeste ont été récemment retéléchargées .
- appCache.addEventListener('updateready', handleCacheEvent, false );
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
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
