H5缓存-Manifest的示例代码分享（图文）
在app中更新h5页面一直有缓存问题。默认什么都不做的情况下，app有一定的空间缓存页面。一开始更新之后会马上加载，等到app缓存空间上来之后更新就无法下载了。安卓能够清理缓存空间，ios就只能卸载重装(are u kidding me?)。这是最坏的情况，你可以更换下地址。
no-cache
注意到这一点之后，页面加入no-cache.
<meta http-equiv="Cache-Control" content="no-cache">
告诉浏览器不要缓存页面。实际是页面没有发生改变的时候请求是304,如果页面改变了才是200，所以说加了no-cache不是说每次都全新下载，而是更新了就会重新下载。但这个时候不同的手机表现还是不一样的。4s与6sp就不同。访问同一个页面，修改了js。4s更新了，6sp还是老样子。咋整呢，因为服务端还有缓存。先设置nginx缓存：
location / {
root html; expires -1;
index index.html index.htm;
}并需要重启下nginx：
nginx -s reload
这个时候6sp也更新了。
但老是重启nginx不是办法啊，可能造成一些请求丢失。而且这种情况下，离线是完全不能用了。比如断网了去发消息，原本设置的一张红色叹号的图片和人物的头像都显示不出来。当然可以转成base64的字符串解决这个问题。base64就是很长，放在哪儿都占空间。怎么解决，manifest
no-cache+更新文件名+更新地址 待测
manifest
介绍可以先看w3shool的：www.w3school.com.cn/html5/html_5_app_cache.asp ,这里就说下使用的情况。
1.设置html
<html manifest="index.appcache">
2.设置缓存目录
CACHE MANIFEST #v1.0.0.0#需要缓存的文件js/zepto.js#不需要缓存的页面 NETWORK:*#无法访问页面 FALLBACK404.html
3.设置nginx mime
text/cache-manifest appcache;
mime types文件都在conf目录下。启动nginx之后。这个时候页面会出现加载情况：
这个图说明2个事情，一个是流程上会先下载index.appcache，然后会陆续触发checking event,download event，progress event 和 updateReady event.二个是默认缓存了当前页面。而且居然是带个参数也缓存。看样子只要地址不一样的当前页都给缓存了(上面的缓存目录我只写了一个zepto)。再刷新页面：
index.appcache没有更新就不会触发检查。
加载缓存的文件状态是200，size一栏是from cache。从浏览器加载的是304，时间上一个是几毫秒，一个是十几毫秒。 f12进入开发者模式，在Application cache一栏可以看见被缓存的文件。
但在这个地方是无法清理的，需要在Application 中的 clear storage来清理。
更新已缓存的文件
最明显的就是首页，默认缓存下来。这个时候你改变首页内容而不修改index.appache是完全没有作用的。比如你删掉一个js的引用，客户端还是下载了这个js。这个时候你需要修改这个缓存文件：
#不需要缓存的页面 NETWORK: mobile/index.html *
注意到虽然index.appache和index位于同一级，但不能写index.html，得写相当于网站的路径，其他资源也是一样。这个时候触发更新了，但页面还是加载的缓存资源，所以还需要做一个处理：
window.applicationCache.addEventListener("updateready", function(){
location.reload()
});这样才会加载最新的页面。如果首页再发生修改，可以随意(加个空格，加空行)修改缓存文件，就能触发更新。所以剩下的问题就是记得在更新资源之后记得更新缓存文件。建议就是不变的资源(框架样式，框架js，图片)缓存下来，经常要修改的js就让浏览器缓存吧。现在这样就避免了reload nginx。这个效果要比加no-cache的方法好。当然，如果无所谓消息或者reload的影响。no-cache还是很方便，毕竟这个index.appache一旦加上，难以去掉，除非清理缓存。
Atas ialah kandungan terperinci H5缓存-Manifest的示例代码分享（图文）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
