Maison interface Web Tutoriel H5 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

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

May 16, 2016 pm 03:50 PM

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);

如果清单文件或其中指定的资源无法下载,整个更新都将失败。在这种情况下,浏览器将继续使用原应用缓存
Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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 !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment exécuter le projet H5 Comment exécuter le projet H5 Apr 06, 2025 pm 12:21 PM

L'exécution du projet H5 nécessite les étapes suivantes: Installation des outils nécessaires tels que le serveur Web, Node.js, les outils de développement, etc. Créez un environnement de développement, créez des dossiers de projet, initialisez les projets et écrivez du code. Démarrez le serveur de développement et exécutez la commande à l'aide de la ligne de commande. Aperçu du projet dans votre navigateur et entrez l'URL du serveur de développement. Publier des projets, optimiser le code, déployer des projets et configurer la configuration du serveur Web.

Que signifie exactement la production de pages H5? Que signifie exactement la production de pages H5? Apr 06, 2025 am 07:18 AM

La production de pages H5 fait référence à la création de pages Web compatibles compatibles multiplateformes à l'aide de technologies telles que HTML5, CSS3 et JavaScript. Son cœur réside dans le code d'analyse du navigateur, la structure de rendu, le style et les fonctions interactives. Les technologies courantes incluent les effets d'animation, la conception réactive et l'interaction des données. Pour éviter les erreurs, les développeurs doivent être débogués; L'optimisation des performances et les meilleures pratiques incluent l'optimisation du format d'image, la réduction des demandes et les spécifications du code, etc. pour améliorer la vitesse de chargement et la qualité du code.

Comment faire l'icône H5 Click Comment faire l'icône H5 Click Apr 06, 2025 pm 12:15 PM

Les étapes pour créer une icône H5 Click comprennent: la préparation d'une image source carrée dans le logiciel d'édition d'image. Ajoutez l'interactivité dans l'éditeur H5 et définissez l'événement Click. Créez un hotspot qui couvre l'icône entière. Définissez l'action des événements de clic, tels que le saut sur la page ou le déclenchement de l'animation. Exporter H5 documents sous forme de fichiers HTML, CSS et JavaScript. Déployez les fichiers exportés vers un site Web ou une autre plate-forme.

Qu'est-ce que le langage de programmation H5? Qu'est-ce que le langage de programmation H5? Apr 03, 2025 am 12:16 AM

H5 n'est pas un langage de programmation autonome, mais une collection de HTML5, CSS3 et JavaScript pour la création d'applications Web modernes. 1. HTML5 définit la structure et le contenu de la page Web et fournit de nouvelles balises et API. 2. CSS3 contrôle le style et la mise en page, et introduit de nouvelles fonctionnalités telles que l'animation. 3. JavaScript implémente l'interaction dynamique et améliore les fonctions par les opérations DOM et les demandes asynchrones.

La production de pages H5 est-elle un développement frontal? La production de pages H5 est-elle un développement frontal? Apr 05, 2025 pm 11:42 PM

Oui, la production de pages H5 est une méthode de mise en œuvre importante pour le développement frontal, impliquant des technologies de base telles que HTML, CSS et JavaScript. Les développeurs construisent des pages H5 dynamiques et puissantes en combinant intelligemment ces technologies, telles que l'utilisation du & lt; Canvas & gt; Tag pour dessiner des graphiques ou utiliser JavaScript pour contrôler le comportement d'interaction.

Comment faire des fenêtres pop-up avec H5 Comment faire des fenêtres pop-up avec H5 Apr 06, 2025 pm 12:12 PM

H5 ÉTAPES DE CRÉATION DE LA FINES POP-UP: 1. Déterminez la méthode de déclenchement (cliquez, temps, sortie, défilement); 2. Conception du contenu (titre, texte, bouton d'action); 3. Set Style (taille, couleur, police, arrière-plan); 4. Implémentation du code (HTML, CSS, JavaScript); 5. Tester et déploiement.

Quels scénarios d'application conviennent à la production de pages H5 Quels scénarios d'application conviennent à la production de pages H5 Apr 05, 2025 pm 11:36 PM

H5 (HTML5) convient aux applications légères, telles que les pages de campagne de marketing, les pages d'affichage des produits et les micro-Websites de promotion d'entreprise. Ses avantages résident dans la plateformité multi-plateaux et une riche interactivité, mais ses limites résident dans des interactions et des animations complexes, un accès aux ressources locales et des capacités hors ligne.

À quoi se réfère H5? Explorer le contexte À quoi se réfère H5? Explorer le contexte Apr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

See all articles