HTML5離線緩存

HTML5的離線存儲是基於一個新建的.manifest文件的，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來，以後當網絡在處於離線狀態下時，瀏覽器會經過離線存儲的數據進行頁面展現。

 

1、HTML5離線緩存優勢

一、離線瀏覽 – 用戶可在應用離線時使用它們

二、速度 – 已緩存資源加載得更快

三、減小服務器負載 – 瀏覽器將只從服務器下載更新過或更改過的資源。

 

2、HTML5離線緩存基本流程

第一次正確配置app cache後，當咱們再次訪問該應用時，瀏覽器會首先檢查manifest文件是否有變更，若是有變更就會把相應的變得跟新下來，同時改變瀏覽器裏面的app cache，若是沒有變更，就會直接把app cache的資源返回。

3、manifest文件的寫法

 

CACHE MANIFEST
#上面一句必須
#v1.0.0
#須要緩存的文件
CACHE:
a.js
b.css
#不須要緩存的文件
NETWORK:
*
#沒法訪問頁面
FALLBACK:
404.html

4、manifest文件的格式說明

 

一、CACHE MANIFEST（必須）

(1)、爲固定格式，必須寫在最前面

(2)、以#號開頭的是註釋，通常會在第二行寫個版本號，用來在緩存的文件更新時，更改manifest的做用，能夠是版本號，時間戳或者md5碼等等。

 

二、CACHE（必須）

(1)、標識出哪些文件須要緩存，能夠是相對路徑也能夠是絕對路徑。

(2)、當 manifest 文件加載後，瀏覽器會從網站的根目錄下載這些文件。而後，不管用戶什麼時候與因特網斷開鏈接，這些資源依然是可用的。

 

三、NETWORK（可選）

(1)、這一部分是要繞過緩存直接讀取的文件，須要與服務器鏈接，且不會被緩存 

(2)、使用通配符」*」，表示全部其餘資源/文件都須要因特網鏈接

 

四、NETWORK（可選）

(1)、指定了一個後備頁面，當資源沒法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 URI—第一個表示資源，第二個表示後備頁面。兩個 URI 都必須使用相對路徑而且與清單文件同源。

(2)、例如

若是沒法創建因特網鏈接，則用 「404.html」 替代 /html5/ 目錄中的全部文件

FALLBACK:/html5/ /404.html

若是沒法創建因特網鏈接，則用 「404.html」 替代全部文件

FALLBACK:*.html /404.html

 

資料：HTML5離線緩存  http://www.studyofnet.com/news/1199.html