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

Exemple de partage de code H5 Cache-Manifest (images et texte)

黄舟
Libérer： 2017-04-01 11:56:23
original
2367 Les gens l'ont consulté

Dans l'applicationmise à jourla page h5 a toujours été mis en cache Problème. Par défaut, l'application dispose d'une certaine quantité d'espace pour mettre en cache la page. Elle sera chargée immédiatement après que l'espace de cache de l'application soit disponible. Android peut vider l'espace du cache et la page ne sera pas téléchargée. ne peut que désinstaller et réinstaller (vous vous moquez de moi ?) C'est le pire des cas, vous pouvez changer l'adresse

no-cache

Notez ceci après un moment. , no-cache est ajouté à la page. 

<meta http-equiv="Cache-Control" content="no-cache">
Copier après la connexion

indique au navigateur de ne pas mettre la page en cache. En fait, lorsque la page n'a pas changé, la requête est 304. Si la page a changé, elle est ajoutée. est 200, donc non est ajouté. -cache ne signifie pas un nouveau téléchargement à chaque fois, mais il sera téléchargé à nouveau après la mise à jour. Cependant, les performances des différents téléphones mobiles sont différentes à ce moment-là. La même page est accessible et <🎜. >js<🎜 est modifié. >. 4s a été mis à jour, mais 6sp est toujours le même, car il y a toujours un cache sur le serveur. Définissez d'abord le cache nginx :

et devez redémarrer. nginx : 
 location / {
           root   html;           expires -1;
           index  index.html index.htm;
        }
Copier après la connexion

À l'heure actuelle, 6sp a également été mis à jour 
nginx -s reload
Copier après la connexion

Mais toujours redémarrer nginx peut entraîner la perte de certaines requêtes. Dans ce cas, il est complètement inutilisable lorsque le réseau. est déconnecté. L'

image

initialement définie et l'avatar du personnage ne peuvent pas être affichés. Bien sûr, ce problème peut être résolu en le convertissant en chaîne de base64. , manifest

no-cache+mettre à jour le nom du fichier+mettre à jour l'adresse à tester

manifest

Pour introduction , vous pouvez d'abord lire w3shool : www.w3school.com.cn/html5/html_5_app_cache.asp Voici l'utilisation

1 Définir le html

2. Définir le cache. répertoire 
<html manifest="index.appcache">
Copier après la connexion

3. Définir nginx mime 
CACHE MANIFEST
#v1.0.0.0#需要缓存的文件js/zepto.js#不需要缓存的页面
NETWORK:*#无法访问页面
FALLBACK404.html
Copier après la connexion

Les fichiers de types mime sont tous dans le répertoire conf. Après avoir démarré nginx, la page se chargera : <. > 
text/cache-manifest         appcache;
Copier après la connexion

Cette image illustre deux choses. La première est que l'index.appcache sera téléchargé en premier, puis l'événement de vérification, l'événement de téléchargement, l'événement de progression et la date de mise à jour seront déclenchés l'un après l'autre. un autre

Événement Ready. Les deux doivent mettre en cache la page actuelle par défaut. Et il prend en fait un paramètre et le met en cache. Il semble que tant que les pages actuelles avec des adresses différentes sont mises en cache (je n'ai écrit qu'un seul zepto dans le répertoire cache ci-dessus). Actualisez la page :

Si index.appcache n'est pas mis à jour, la vérification ne sera pas déclenchée.

Charger le fichier mis en cache

Le statut

est 200 et la colonne de taille provient du cache. Celui chargé à partir du navigateur est 304, l'un dure quelques millisecondes et l'autre dure plus de dix millisecondes. F12 passe en mode développeur et vous pouvez voir les fichiers mis en cache dans la colonne Cache d'application.

Mais il ne peut pas être nettoyé à cet endroit. Il doit être nettoyé dans le stockage

clair

de l'Application.

Mettre à jour les fichiers mis en cache

Le plus évident est la page d'accueil, qui est mise en cache par défaut. Pour le moment, cela n'aura aucun effet si vous modifiez le contenu de la page d'accueil sans modifier index.appache. Par exemple, si vous supprimez la

référence

d'un js, le client téléchargera quand même le js. A ce moment, vous devez modifier ce fichier cache :

Notez que bien que index.appache et index soient au même niveau, index.html ne peut pas être écrit, et le chemin équivalent au site web doit être écrit. Il en va de même pour les autres ressources. A ce moment, la mise à jour est déclenchée, mais la page est toujours chargée avec des ressources mises en cache, donc un autre processus doit être effectué : 

  window.applicationCache.addEventListener("updateready", function(){
    location.reload()
  });
Copier après la connexion

这样才会加载最新的页面。如果首页再发生修改，可以随意(加个空格，加空行)修改缓存文件，就能触发更新。所以剩下的问题就是记得在更新资源之后记得更新缓存文件。建议就是不变的资源(框架样式，框架js，图片)缓存下来，经常要修改的js就让浏览器缓存吧。现在这样就避免了reload nginx。这个效果要比加no-cache的方法好。当然，如果无所谓消息或者reload的影响。no-cache还是很方便，毕竟这个index.appache一旦加上，难以去掉，除非清理缓存。

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，Manifest，缓存
source：php.cn
Article précédent：Explication détaillée du code graphique pour personnaliser le style HTML5 Progress Article suivant：Qu'est-ce que c'est que Google AMP ?
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
Symfony Redis ne peut pas se connecter à l'hôte défini dans le fichier env, qui est par défaut localhost Nous avons une nouvelle configuration Symfony avec Redis comme mécanisme de mise en cache....
Depuis 2024-04-06 10:53:02
0
1
375
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！