標籤:cookie 應用程式 沒有 color idt version doc web 清單
一、什麼是應用程式緩衝?
HTML5 引入了應用程式緩衝(Application Cache),這意味著 web 應用可進行緩衝,並可在沒有網際網路串連時進行訪問。
二、優勢
離線瀏覽 - 使用者可在應用離線時使用它們
速度 - 已緩衝資源載入得更快
減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源。
三、原理
HTML5的離線儲存是基於一個建立的.appcache檔案的緩衝機制(不是儲存技術),通過這個檔案上的解析清單離線儲存資源,這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時,瀏覽器會通過被離線儲存的資料進行頁面展示。
四、如何使用?
在文檔的 標籤中包含 manifest 屬性。
在manifest檔案編寫離線儲存的資源。
在離線狀態時,操作window.applicationCache進行需求實現。
1.在文檔的<html> 標籤中包含 manifest 屬性。
demo.html:
<!DOCTYPE html><html lang="en" manifest="demo.appcache"><head> <meta charset="UTF-8"> <title>demo</title></head><body> <img src="img.jpg" height="500" width="900" alt=""> 其它內容...</body></html>
2.在manifest檔案編寫離線儲存的資源。
manifest 檔案是簡單的文字檔,它告知瀏覽器被緩衝的內容(以及不緩衝的內容)。
manifest 檔案可分為三個部分:
CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行緩衝
NETWORK - 在此標題下列出的檔案需要與伺服器的串連,且不會被緩衝,可以使用星號來指示除CACHE MANIFEST外的所有其他資源/檔案都需要網際網路串連。
FALLBACK - 在此標題下列出的檔案規定當頁面無法訪問時的替代頁面(比如 404 頁面)。
demo.appcache:
CACHE MANIFEST#version 1.0CACHE: img.jpgNETWORK: *FALLBACK: /demo/ /404.html
代碼意為:
demo.html中的img在首次下載後進行緩衝;其他檔案內容都需要網際網路串連;如果無法建立網際網路串連,則用 "404.html" 替代 /demo/ 目錄中的所有檔案。
注意:
如果編輯了一幅圖片,或者修改了一個 JavaScript 函數,這些改變都不會使緩衝更新,manifest 檔案更改時緩衝會更新。以 "#" 開頭的是注釋行,更新注釋行中的日期和版本號碼是一種使瀏覽器重新快取檔案的辦法。
manifest 檔案需要配置正確的 MIME-type,即 "text/cache-manifest"。必須在 網頁伺服器上進行配置。
在tomcat伺服器中的conf/web.xml中添加:
<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type></mime-mapping>
在開發人員工具的Network面板下,可以看到img.jpg的Size為(from disk cache),意味著是從緩衝中讀取的。
3.在離線狀態時,操作window.applicationCache進行需求實現。
五、更新緩衝
一旦應用被緩衝,它就會保持緩衝直到發生下列情況:
使用者清空瀏覽器緩衝
manifest 檔案被修改
由程式來更新應用緩衝
六、注意事項
瀏覽器對快取資料的容量限制可能不太一樣(某些瀏覽器設定的限制是每個網站 5MB)。
如果manifest檔案,或者內部列舉的某一個檔案不能正常下載,整個更新過程都將失敗,瀏覽器繼續全部使用老的緩衝。
引用manifest的html必須與manifest檔案同源,在同一個域下。FALLBACK中的資源必須和manifest檔案同源。
當manifest檔案發生改變時,會觸發更新要求資源。系統會自動緩衝引用資訊清單檔的 HTML 檔案。
HTML5-應用程式緩衝(Application Cache)