站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        H5緩存-Manifest的示例代碼分享(圖文)

        在app中更新h5頁面一直有緩存問題。默認(rèn)什么都不做的情況下,app有一定的空間緩存頁面。一開始更新之后會馬上加載,等到app緩存空間上來之后更新就無法下載了。安卓能夠清理緩存空間,ios就只能卸載重裝(are u kidding me?)。這是最壞的情況,你可以更換下地址。

        no-cache

        注意到這一點之后,頁面加入no-cache.

        <meta http-equiv="Cache-Control" content="no-cache">

        告訴瀏覽器不要緩存頁面。實際是頁面沒有發(fā)生改變的時候請求是304,如果頁面改變了才是200,所以說加了no-cache不是說每次都全新下載,而是更新了就會重新下載。但這個時候不同的手機(jī)表現(xiàn)還是不一樣的。4s與6sp就不同。訪問同一個頁面,修改了js。4s更新了,6sp還是老樣子。咋整呢,因為服務(wù)端還有緩存。先設(shè)置nginx緩存:

         location / {             root   html;           expires -1;             index  index.html index.htm;          }

        并需要重啟下nginx:

        nginx -s reload

        這個時候6sp也更新了。

        但老是重啟nginx不是辦法啊,可能造成一些請求丟失。而且這種情況下,離線是完全不能用了。比如斷網(wǎng)了去發(fā)消息,原本設(shè)置的一張紅色嘆號的圖片和人物的頭像都顯示不出來。當(dāng)然可以轉(zhuǎn)成base64的字符串解決這個問題。base64就是很長,放在哪兒都占空間。怎么解決,manifest

        no-cache+更新文件名+更新地址 待測

        manifest

        介紹可以先看w3shool的:www.w3school.com.cn/html5/html_5_app_cache.asp ,這里就說下使用的情況。

        1.設(shè)置html

        <html manifest="index.appcache">

        2.設(shè)置緩存目錄

        CACHE MANIFEST  #v1.0.0.0#需要緩存的文件js/zepto.js#不需要緩存的頁面  NETWORK:*#無法訪問頁面  FALLBACK404.html

        3.設(shè)置nginx mime

        text/cache-manifest         appcache;

        mime types文件都在conf目錄下。啟動nginx之后。這個時候頁面會出現(xiàn)加載情況:

        H5緩存-Manifest的示例代碼分享(圖文)

        這個圖說明2個事情,一個是流程上會先下載index.appcache,然后會陸續(xù)觸發(fā)checking event,download event,progress event 和 updateReady event.二個是默認(rèn)緩存了當(dāng)前頁面。而且居然是帶個參數(shù)也緩存。看樣子只要地址不一樣的當(dāng)前頁都給緩存了(上面的緩存目錄我只寫了一個zepto)。再刷新頁面:

        H5緩存-Manifest的示例代碼分享(圖文)

        index.appcache沒有更新就不會觸發(fā)檢查。

        H5緩存-Manifest的示例代碼分享(圖文)

        加載緩存的文件狀態(tài)是200,size一欄是from cache。從瀏覽器加載的是304,時間上一個是幾毫秒,一個是十幾毫秒。 f12進(jìn)入開發(fā)者模式,在Application cache一欄可以看見被緩存的文件。

        H5緩存-Manifest的示例代碼分享(圖文)

        但在這個地方是無法清理的,需要在Application 中的 clear storage來清理。

        H5緩存-Manifest的示例代碼分享(圖文)

        更新已緩存的文件

        最明顯的就是首頁,默認(rèn)緩存下來。這個時候你改變首頁內(nèi)容而不修改index.appache是完全沒有作用的。比如你刪掉一個js的引用,客戶端還是下載了這個js。這個時候你需要修改這個緩存文件:

        #不需要緩存的頁面  NETWORK:    mobile/index.html  *

        注意到雖然index.appache和index位于同一級,但不能寫index.html,得寫相當(dāng)于網(wǎng)站的路徑,其他資源也是一樣。這個時候觸發(fā)更新了,但頁面還是加載的緩存資源,所以還需要做一個處理:

          window.applicationCache.addEventListener("updateready", function(){      location.reload()    });

        這樣才會加載最新的頁面。如果首頁再發(fā)生修改,可以隨意(加個空格,加空行)修改緩存文件,就能觸發(fā)更新。所以剩下的問題就是記得在更新資源之后記得更新緩存文件。建議就是不變的資源(框架樣式,框架js,圖片)緩存下來,經(jīng)常要修改的js就讓瀏覽器緩存吧。現(xiàn)在這樣就避免了reload nginx。這個效果要比加no-cache的方法好。當(dāng)然,如果無所謂消息或者reload的影響。no-cache還是很方便,畢竟這個index.appache一旦加上,難以去掉,除非清理緩存。

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: A级毛片无码久久精品免费| 久久青青草原精品影院| 国产精品毛片VA一区二区三区| 亚洲国产精品自在在线观看| 漂亮人妻被黑人久久精品| 精品国产不卡一区二区三区| 国产剧情国产精品一区| 亚洲av午夜国产精品无码中文字 | 久久国产精品偷99| 欧美精品1区2区| 成人区人妻精品一区二区不卡网站| 中日精品无码一本二本三本| 久久99精品久久久久久9蜜桃| 99re只有精品8中文| 久久99热精品| 国产成人精品免费午夜app| 久久国产热精品波多野结衣AV| 亚洲综合国产精品第一页 | 丁香色婷婷国产精品视频| 91老司机深夜福利精品视频在线观看 | 国产精品毛片a∨一区二区三区| 国产精品福利一区二区久久| 国内少妇偷人精品视频免费| 亚洲精品狼友在线播放| 午夜精品久久久久久| 欧美在线精品永久免费播放| 国产精品日韩欧美久久综合 | 亚洲精品第一国产综合境外资源| 国产偷国产偷高清精品| 国产精品日韩深夜福利久久 | 亚洲精品97久久中文字幕无码| 久久人人爽人人精品视频| 久久免费国产精品| 野狼精品社区| 亚洲精品成人片在线播放| 中文字幕无码精品三级在线电影 | 亚洲午夜精品一级在线播放放| 亚洲精品99久久久久中文字幕 | 久久精品国产亚洲av高清漫画| 精品无码国产污污污免费网站| 国产精品日本一区二区在线播放 |