H5離線存儲-manifest

時間 2019-12-15

標籤 h5 離線存儲 manifest 简体版

原文原文鏈接

起源

html5以前的網頁，都是無鏈接，必須聯網才能訪問，這其實也是web的特點，這其實對於PC是時代問題並不大，但到了移動互聯網時代，設備終端位置再也不固定，依賴無線信號，網絡的可靠性變得下降，好比坐在火車上，過了一個隧道（15分鐘），便沒法訪問網站，這對於web的傷害是很大的。javascript

html5便引入了cache manifest 文件。那麼什麼是cache manifest呢，接下來會講到。css

什麼是Cache Manifest

首先manifest是一個後綴名爲minifest的文件，在文件中定義那些須要緩存的文件，支持manifest的瀏覽器，會將按照manifest文件的規則，像文件保存在本地，從而在沒有網絡連接的狀況下，也能訪問頁面。html

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

Manifest的特色

離線瀏覽: 用戶能夠在離線狀態下瀏覽網站內容。
更快的速度: 由於數據被存儲在本地，因此速度會更快。
減輕服務器的負載: 瀏覽器只會下載在服務器上發生改變的資源。

瀏覽器支持狀況

全部主流瀏覽器均支持應用程序緩存，IE須要10+版本java

如何使用

html新增了一個manifest屬性，能夠用來指定當前頁面的manifest文件。web

建立一個和html同名的manifest文件，好比頁面爲index.html，那麼能夠建一個index.manifest的文件，而後給index.html的html標籤添加以下屬性便可：瀏覽器

<html lang="en" manifest="index.manifest">

Manifest文件

接下來詳細說說manifest的細節，一個典型的manifest文件代碼結構像下面這樣：緩存

CACHE MANIFEST
#version 1.3

CACHE:
    test.css

NETWORK:
    *

manifest文件，基本格式爲三段： CACHE， NETWORK，與 FALLBACK，其中NETWORK和FALLBACK爲可選項。服務器

而第一行CACHE MANIFEST爲固定格式，必須寫在前面。網絡

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

CACHE:（必須）

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

a.css
http://yanhaijing.com/a.css

NETWORK:（可選）

這一部分是要繞過緩存直接讀取的文件，可使用通配符＊。

下面的代碼「login.asp」永遠不會被緩存，且離線時是不可用的：

NETWORK:
login.asp

可使用星號來指示全部其餘資源/文件都須要因特網鏈接：

NETWORK:
*

FALLBACK:（可選）

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

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

FALLBACK:
/html5/ /404.html

下面的例子中，則用「404.html」替代全部文件。

FALLBACK:
*.html /404.html

如何更新緩存

以下三種方式，能夠更新緩存：

更新manifest文件
經過javascript操做
清除瀏覽器緩存

html5中引入了js操做離線緩存的方法，下面的js能夠手動更新本地緩存。

window.applicationCache.update();

若是用戶清除了瀏覽器緩存（手動或用其餘一些工具）都會從新下載文件。

注意事項

瀏覽器對緩存數據的容量限制可能不太同樣（某些瀏覽器設置的限制是每一個站點 5MB）。
若是manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程都將失敗，瀏覽器繼續所有使用老的緩存。
引用manifest的html必須與manifest文件同源，在同一個域下。
FALLBACK中的資源必須和manifest文件同源。
當一個資源被緩存後，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
站點中的其餘頁面即便沒有設置manifest屬性，請求的資源若是在緩存中也從緩存中訪問。
當manifest文件發生改變時，資源請求自己也會觸發更新。