站長(zhǎng)資訊網(wǎng)在app中更新h5頁(yè)面一直有緩存問(wèn)題。默認(rèn)什么都不做的情況下，app有一定的空間緩存頁(yè)面。一開始更新之后會(huì)馬上加載，等到app緩存空間上來(lái)之后更新就無(wú)法下載了。安卓能夠清理緩存空間，ios就只能卸載重裝(are u kidding me?)。這是最壞的情況，你可以更換下地址。
no-cache
注意到這一點(diǎn)之后，頁(yè)面加入no-cache.
<meta http-equiv="Cache-Control" content="no-cache">
告訴瀏覽器不要緩存頁(yè)面。實(shí)際是頁(yè)面沒(méi)有發(fā)生改變的時(shí)候請(qǐng)求是304,如果頁(yè)面改變了才是200，所以說(shuō)加了no-cache不是說(shuō)每次都全新下載，而是更新了就會(huì)重新下載。但這個(gè)時(shí)候不同的手機(jī)表現(xiàn)還是不一樣的。4s與6sp就不同。訪問(wèn)同一個(gè)頁(yè)面，修改了js。4s更新了，6sp還是老樣子。咋整呢，因?yàn)榉?wù)端還有緩存。先設(shè)置nginx緩存：
location / { root html; expires -1; index index.html index.htm; }
并需要重啟下nginx：
nginx -s reload
這個(gè)時(shí)候6sp也更新了。
但老是重啟nginx不是辦法啊，可能造成一些請(qǐng)求丟失。而且這種情況下，離線是完全不能用了。比如斷網(wǎng)了去發(fā)消息，原本設(shè)置的一張紅色嘆號(hào)的圖片和人物的頭像都顯示不出來(lái)。當(dāng)然可以轉(zhuǎn)成base64的字符串解決這個(gè)問(wèn)題。base64就是很長(zhǎng)，放在哪兒都占空間。怎么解決，manifest
no-cache+更新文件名+更新地址 待測(cè)
manifest
介紹可以先看w3shool的：www.w3school.com.cn/html5/html_5_app_cache.asp ,這里就說(shuō)下使用的情況。
1.設(shè)置html
<html manifest="index.appcache">
2.設(shè)置緩存目錄
CACHE MANIFEST #v1.0.0.0#需要緩存的文件js/zepto.js#不需要緩存的頁(yè)面 NETWORK:*#無(wú)法訪問(wèn)頁(yè)面 FALLBACK404.html
3.設(shè)置nginx mime
text/cache-manifest appcache;
mime types文件都在conf目錄下。啟動(dòng)nginx之后。這個(gè)時(shí)候頁(yè)面會(huì)出現(xiàn)加載情況：
這個(gè)圖說(shuō)明2個(gè)事情，一個(gè)是流程上會(huì)先下載index.appcache，然后會(huì)陸續(xù)觸發(fā)checking event,download event，progress event 和 updateReady event.二個(gè)是默認(rèn)緩存了當(dāng)前頁(yè)面。而且居然是帶個(gè)參數(shù)也緩存?？礃幼又灰刂凡灰粯拥漠?dāng)前頁(yè)都給緩存了(上面的緩存目錄我只寫了一個(gè)zepto)。再刷新頁(yè)面：
index.appcache沒(méi)有更新就不會(huì)觸發(fā)檢查。
加載緩存的文件狀態(tài)是200，size一欄是from cache。從瀏覽器加載的是304，時(shí)間上一個(gè)是幾毫秒，一個(gè)是十幾毫秒。 f12進(jìn)入開發(fā)者模式，在Application cache一欄可以看見被緩存的文件。
但在這個(gè)地方是無(wú)法清理的，需要在Application 中的 clear storage來(lái)清理。
更新已緩存的文件
最明顯的就是首頁(yè)，默認(rèn)緩存下來(lái)。這個(gè)時(shí)候你改變首頁(yè)內(nèi)容而不修改index.appache是完全沒(méi)有作用的。比如你刪掉一個(gè)js的引用，客戶端還是下載了這個(gè)js。這個(gè)時(shí)候你需要修改這個(gè)緩存文件：
#不需要緩存的頁(yè)面 NETWORK: mobile/index.html *
注意到雖然index.appache和index位于同一級(jí)，但不能寫index.html，得寫相當(dāng)于網(wǎng)站的路徑，其他資源也是一樣。這個(gè)時(shí)候觸發(fā)更新了，但頁(yè)面還是加載的緩存資源，所以還需要做一個(gè)處理：
window.applicationCache.addEventListener("updateready", function(){ location.reload() });
這樣才會(huì)加載最新的頁(yè)面。如果首頁(yè)再發(fā)生修改，可以隨意(加個(gè)空格，加空行)修改緩存文件，就能觸發(fā)更新。所以剩下的問(wèn)題就是記得在更新資源之后記得更新緩存文件。建議就是不變的資源(框架樣式，框架js，圖片)緩存下來(lái)，經(jīng)常要修改的js就讓瀏覽器緩存吧?，F(xiàn)在這樣就避免了reload nginx。這個(gè)效果要比加no-cache的方法好。當(dāng)然，如果無(wú)所謂消息或者reload的影響。no-cache還是很方便，畢竟這個(gè)index.appache一旦加上，難以去掉，除非清理緩存。
