《HTML5程序設(shè)計(jì)及實(shí)踐》課件第8章 HTML5 應(yīng)用程序緩存

第8章HTML5應(yīng)用程序緩存目錄應(yīng)用程序緩存的起源實(shí)現(xiàn)離線應(yīng)用更新離線應(yīng)用問題應(yīng)用場景網(wǎng)絡(luò)連接狀態(tài)不穩(wěn)定的情況下，使用者打開網(wǎng)頁或者Web應(yīng)用臨時處理一些工作任務(wù)，比如在手機(jī)或PC機(jī)上打開一個網(wǎng)頁，計(jì)算買房貸款的金額數(shù)，在某個特定時間向家人或朋友展示計(jì)算的結(jié)果網(wǎng)絡(luò)連接狀態(tài)不穩(wěn)定的情況下，閱讀或撰寫電子郵件，創(chuàng)建待辦事件列表在離線狀態(tài)訪問Web應(yīng)用，比如在航班上，使用手機(jī)查看昨天看過的財務(wù)報表占用大量網(wǎng)絡(luò)帶寬的Web應(yīng)用，可以使用應(yīng)用程序緩存，只在又內(nèi)容發(fā)生變化時，才從服務(wù)器重新獲取資源，降低服務(wù)器的負(fù)載壓力。應(yīng)用程序緩存和瀏覽器緩存的區(qū)別瀏覽器緩存在用戶觸發(fā)“后退”操作或點(diǎn)擊一個之前看過的鏈接時起作用。在網(wǎng)站上訪問同一張圖片，該圖片可以從瀏覽器緩存中調(diào)出并幾乎立即顯現(xiàn)出來。應(yīng)用程序緩存，避免了加載應(yīng)用程序時所需的常規(guī)網(wǎng)絡(luò)請求，如果緩存請求(cachemanifest)文件是最新的，瀏覽器就知道無需檢查其他資源是否最新。應(yīng)用程序緩存讓W(xué)eb應(yīng)用就擁有了本來只屬于桌面應(yīng)用的特性HTML5應(yīng)用程序緩存為整個Web應(yīng)用提供服務(wù)，瀏覽器緩存只緩存單個頁面；HTML5應(yīng)用程序緩存可以指定需要緩存的文件和只能在線瀏覽文件，瀏覽器緩存無法指定。HTML5應(yīng)用程序緩存可以動態(tài)通知用戶進(jìn)行更新。瀏覽器支持情況瀏覽器對應(yīng)用程序緩存支持程度不同。檢測瀏覽器支持情況瀏覽器說明IE10.0及以上版本支持Firefox3.5及以上版本支持Opera10.6及以上版本支持Chrome4.0及以上版本支持Safari4.0及以上版本支持iPhone2.0及以上版本支持Android2.0及以上版本支持if(window.applicationCache){//瀏覽器支持的離線應(yīng)用}else{//瀏覽器不支持的離線應(yīng)用}實(shí)現(xiàn)離線應(yīng)用1、構(gòu)建HTML頁面，部署到tomcat服務(wù)器，在線狀態(tài)和離線狀態(tài)瀏覽結(jié)果為實(shí)現(xiàn)離線應(yīng)用2、構(gòu)建manifest清單文件:離線應(yīng)用包含一個manifest清單文件，此文件中列出了瀏覽器為離線應(yīng)用緩存的所有資源。實(shí)際上，manifest文件是一個文本文件，列出了離線訪問應(yīng)用時所需緩存的文件清單。新建一個以manifest為擴(kuò)展名的文件，命名為offline.manifest，在該文件中編寫清單信息。編寫完manifest文件后，在index.html文件引用清單文件CACHEMANIFEST#version1.0

#指明緩存入口CACHE:index.htmlimages/banner1.jpg

#以下資源必須在線訪問NETWORK:

#如果index.html無法訪問則用404.html代替FALLBACK:/index.html/404.html<htmlmanifest="offline.manifest">manifest清單文件的結(jié)構(gòu)#version1.0–緩存文件版本號。CACHE-在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存。

CACHE是默認(rèn)部分。系統(tǒng)會在首次下載此標(biāo)頭下列出的文件（或緊跟在CACHEMANIFEST后的文件）后顯式緩存這些文件。NETWORK-在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會被緩存。

連接到服務(wù)器的白名單資源。無論用戶是否處于離線狀態(tài)，對這些資源的所有請求都會繞過緩存，可使用通配符。使用星號來指示所有其他資源/文件都需要因特網(wǎng)連接FALLBACK-在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面（比如404頁面）。

可選的，用于指定無法訪問資源時的后備網(wǎng)頁。其中第一個URI代表資源，第二個代表后備網(wǎng)頁。兩個URI必須相關(guān)，并且必須與清單文件同源。可使用通配符。實(shí)現(xiàn)離線應(yīng)用3、清單文件對應(yīng)的mime-type應(yīng)該是text/cache-manifest所有需要配置服務(wù)器來發(fā)送對應(yīng)的MIME類型信息。在Apache中提供此MIME類型，可直接在web.xml中指定MIME類型<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type></mime-mapping>實(shí)現(xiàn)離線應(yīng)用3、在index.html中添加腳本，檢查瀏覽器是否支持應(yīng)用程序緩存。重新發(fā)布網(wǎng)頁到Tomcat服務(wù)器，第一次運(yùn)行程序后，瀏覽器會對網(wǎng)站進(jìn)行離線緩存，然后停止Tomcat服務(wù)器，在瀏覽器中打開頁面，仍然可以正常顯示<script> if(window.applicationCache){ } else{ alert("該瀏覽器不支持HTML5離線應(yīng)用緩存！"); }</script>更新緩存1、在index.html中添加腳本，更新緩存?；蛘咦跃彺娓戮途w事件varappCache=window.applicationCache;appCache.update();if(appCache.status==window.applicationCache.UPDATEREADY){appCache.swapCache();}window.applicationCache.addEventListener("updateready",function(){ if(window.applicationCache.status==window.applicationCache.UPDATEREADY){ //更新到最新的緩存，但不會加載修改后的內(nèi)容

window.applicationCache.swapCache(); if(confirm('有新的網(wǎng)頁版本，是否更新？')){ //重新加載頁面，重新緩存

window.location.reload(); } }},false);更新緩存2、修改manifest文件版本號CACHEMANIFEST#version1.1#指明緩存