简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel H5 > le corps du texte

Qu'est-ce que le mécanisme de mise en cache HTML5 ? Comment mettre à jour le cache

云罗郡主
Libérer： 2019-01-04 10:45:17
original
7394 Les gens l'ont consulté

Le contenu de cet article porte sur ce qu'est le mécanisme de mise en cache HTML5 ? Comment mettre à jour le cache a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile. [Lecture recommandée : Tutoriel HTML5]

Quest-ce que le mécanisme de mise en cache HTML5 ? Comment mettre à jour le cache

Arrière-plan

La mise en cache hors ligne est une nouvelle fonctionnalité fournie par HTML5. Grâce à la fonction de mise en cache hors ligne fournie par HTML5, vous pouvez mettre en cache localement certains fichiers couramment utilisés du site et vous pouvez toujours accéder aux pages mises en cache même en l'absence de réseau. Il existe de nombreux types de fichiers qui peuvent être mis en cache, notamment, mais sans s'y limiter, les ressources HTML, CSS, JS, les ressources d'images statiques, etc.

En fait, la mise en cache hors ligne n'est pas utilisée uniquement lorsqu'il n'y a pas de réseau. Lorsqu'il y a un réseau, les fichiers mis en cache localement seront toujours utilisés en premier. Lorsqu'il y a un réseau, le navigateur renvoie 200,

La mise en cache hors ligne présente de nombreux avantages. Premièrement, cela peut améliorer efficacement l’expérience utilisateur et économiser le trafic utilisateur. Deuxièmement, la vitesse de chargement des pages peut être améliorée et les ressources mises en cache peuvent être chargées plus rapidement. Troisièmement, la charge du serveur peut être réduite et le navigateur téléchargera uniquement les ressources mises à jour ou modifiées depuis le serveur.

Support des navigateurs

En gros, tous les navigateurs grand public le supportent, sauf IE, ce qui est bizarre après tout. Il vaut mieux ne pas être compatible avec ce genre de navigateur.

Manifest

Pour utiliser la mise en cache hors ligne sur une page, il vous suffit d'ajouter un attribut manifest au html de la page. La méthode d'utilisation est la suivante. 

<!DOCTYPE HTML>
<html manifest = "cache.appcache">
<body>…</body>
</html>
Copier après la connexion

Lorsque le navigateur charge la page et constate que le code HTML a l'attribut manifest, il demandera le fichier cache.appcache (ps : c'est juste un nom de fichier, se terminant généralement par .appcache, le le fichier est généralement placé dans le répertoire racine du projet)

btw : Le fichier manifeste doit configurer le type MIME sur "text/cache-manifest", ce qui est nécessaire. Vous devez le configurer sur le serveur.

Voyons comment le fichier manifeste (cache.appcache) doit être écrit

J'ai trouvé cette information auprès de w3School :

CACHE MANIFEST - répertorié sous ce titre Fichiers sera mis en cache après le premier téléchargement

RÉSEAU - Les fichiers répertoriés sous cette rubrique nécessitent une connexion au serveur et ne seront pas mis en cache

FALLBACK - Les fichiers répertoriés sous cette rubrique nécessitent La page de secours lorsque la page inaccessible (comme la page 404)

le fichier cache.appcache est le suivant 

# CACHE MANIFEST是必须的！
CACHE MANIFEST
/style.css
/logo.png
/app.js
# 不缓存的文件，永远不会被缓存，且离线时是不可用的
NETWORK:
login.js
# 可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
# 注释：获取不到资源时的备选路径，就跳转到指定页面
FALLBACK:
index.html 404.html
Copier après la connexion

Comment mettre à jour le cache

Comme mentionné au début de l'article , lorsque le navigateur détecte qu'il existe un fichier manifeste sur le code HTML, il demandera d'abord le fichier cache.appcache, puis le mettra en cache en fonction du contenu du fichier manifeste. Le processus spécifique est le suivant

En ligne, si c'est la première fois que vous accédez à l'application, le navigateur téléchargera les ressources correspondantes en fonction du contenu du fichier manifeste et les stockera hors ligne. Si l'application a été accédée et les ressources ont été stockées hors ligne, le navigateur utilisera les ressources hors ligne pour charger la page, puis le navigateur comparera le nouveau fichier manifeste avec l'ancien fichier manifeste. Si le fichier n'a pas changé, non. L'opération sera effectuée, si le fichier change, les ressources du fichier seront à nouveau téléchargées et stockées hors ligne.

En mode hors connexion, le navigateur utilise directement le cache local. Avez-vous rencontré un problème ? Que se passe-t-il si, après la mise à jour du code, le navigateur utilise toujours le cache d'origine.

Le moyen le plus simple et le plus grossier consiste à vider manuellement le cache du navigateur. Bien entendu, cela ne se fera pas dans une large mesure dans un environnement de production.

Comment modifier le manifeste

Les lignes commençant par "#" sont des lignes de commentaires, mais elles peuvent également être utilisées à d'autres fins. Le cache de l'application est mis à jour lorsque son fichier manifeste change. Si vous modifiez une image ou modifiez une fonction JavaScript, ces modifications ne seront pas remises en cache. La mise à jour de la date et du numéro de version dans la ligne de commentaire est un moyen d'amener le navigateur à remettre le fichier en cache.


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
html5
source：csdn.net
Article précédent：Quelles sont les nouveautés du HTML5 ? Explication détaillée des nouvelles fonctionnalités de HTML5 Article suivant：Le maître vous explique en détail le stockage local et le stockage par visualisation.
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
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！