


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
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 :
...
🎜>
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).
...
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 :
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.
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache() ; // La récupération a réussi, échangez dans le nouveau cache
}
Veuillez noter
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 :
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 :
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);
如果清单文件或其中指定的资源无法下载,整个更新都将失败。在这种情况下,浏览器将继续使用原应用缓存

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

AI Hentai Generator
Générez AI Hentai gratuitement.

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)

Sujets chauds

Cet article explique comment intégrer l'audio dans HTML5 en utilisant l'AUDIO & GT; Element, y compris les meilleures pratiques pour la sélection du format (MP3, Ogg Vorbis), l'optimisation des fichiers et le contrôle JavaScript pour la lecture. Il met l'accent sur l'utilisation de plusieurs audio F

L'article discute de l'utilisation de l'API de visibilité de la page HTML5 pour détecter la visibilité de la page, améliorer l'expérience utilisateur et optimiser l'utilisation des ressources. Les aspects clés comprennent la pause des supports, la réduction de la charge du processeur et la gestion de l'analyse en fonction des changements de visibilité.

Cet article détaille la création de jeux HTML5 interactifs à l'aide de JavaScript. Il couvre la conception de jeux, la structure HTML, le style CSS, la logique JavaScript (y compris la gestion des événements et l'animation) et l'intégration audio. Bibliothèques JavaScript essentielles (Phaser, Pi

L'article discute de l'utilisation de balises Meta pour contrôler la mise à l'échelle des pages sur les appareils mobiles, en se concentrant sur des paramètres tels que la largeur et l'échelle initiale pour une réactivité et des performances optimales. COMMANDE: 159

L'article traite de la gestion de la confidentialité de l'emplacement des utilisateurs et des autorisations à l'aide de l'API Geolocation, mettant l'accent sur les meilleures pratiques pour demander des autorisations, assurer la sécurité des données et se conformer aux lois sur la confidentialité.

Cet article explique comment créer et valider les formulaires HTML5. Il détaille le & lt; formulaire & gt; élément, types d'entrée (texte, e-mail, numéro, etc.) et attributs (requis, modèle, min, max). Les avantages des formes HTML5 sur les méthodes plus anciennes, incl

L'article explique comment utiliser l'API des notifications HTML5 pour afficher les notifications de bureau, en se concentrant sur les exigences d'autorisation, la personnalisation et la prise en charge du navigateur.

L'article explique comment utiliser l'API HTML5 Drag and Drop pour créer des interfaces utilisateur interactives, détaillant les étapes pour rendre les éléments dragables, gérer les événements clés et améliorer l'expérience utilisateur avec des commentaires personnalisés. Il discute également des pièges communs à un
