《HTML5程序設計及實踐》課件第8章 HTML5 應用程序緩存

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

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

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

可選的，用于指定無法訪問資源時的后備網頁。其中第一個URI代表資源，第二個代表后備網頁。兩個URI必須相關，并且必須與清單文件同源?？墒褂猛ㄅ浞崿F離線應用3、清單文件對應的mime-type應該是text/cache-manifest所有需要配置服務器來發(fā)送對應的MIME類型信息。在Apache中提供此MIME類型，可直接在web.xml中指定MIME類型<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type></mime-mapping>實現離線應用3、在index.html中添加腳本，檢查瀏覽器是否支持應用程序緩存。重新發(fā)布網頁到Tomcat服務器，第一次運行程序后，瀏覽器會對網站進行離線緩存，然后停止Tomcat服務器，在瀏覽器中打開頁面，仍然可以正常顯示<script> if(window.applicationCache){ } else{ alert("該瀏覽器不支持HTML5離線應用緩存！"); }</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){ //更新到最新的緩存，但不會加載修改后的內容

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

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