H5離線存儲Manifest原理及使用
我要評論理解：
離線存儲可以將站點(diǎn)的文件儲存在本地，在沒有網(wǎng)絡(luò)的情況下還是可以訪問到存儲的對應(yīng)的站點(diǎn)的頁面，這些文件可以包括html，js，css，img等等文件。但其實(shí)即使在有網(wǎng)絡(luò)的時候，瀏覽器也會優(yōu)先使用已離線存儲的文件。
什么是Manifest：
Manifest是一個簡單的 文本文件，它的擴(kuò)展名是任意的，定義需要緩存的文件、資源，當(dāng)?shù)谝淮未蜷_時，瀏覽器會自動緩存相應(yīng)的資源。
Manifest 的特點(diǎn)：
- 離線瀏覽：即當(dāng)網(wǎng)絡(luò)斷開時，可以繼續(xù)訪問你的頁面。
- 訪問速度快：將文件緩存到本地，不需每次都從網(wǎng)絡(luò)上請求。
- 穩(wěn)定性：做了Manifest緩存，遇到突發(fā)網(wǎng)絡(luò)故障或者服務(wù)器故障，繼續(xù)訪問本地緩存。
Manifest的使用：
創(chuàng)建一個和html同名的manifest文件，比如頁面為index.html，那么可以建一個index.manifest的文件，然后給index.html的html標(biāo)簽添加如下屬性即可：
<html lang="en" manifest="index.manifest"> 或<html manifest="http://www.example.com/index.manifest">
manifest 的引入可以使絕對路徑也可以是相對路徑，如果你使用的是絕對路徑，你的manifest文件必須和你的站點(diǎn)掛在同一個域名下。
manifest文件你可以保存為任意的擴(kuò)展名，但mine-type 必須是 text/cache-manifest。
<html lang="en" manifest="index.manifest"> 或 <html lang="en" manifest="index.cache">
在服務(wù)器上部署時需要在服務(wù)器上添加相應(yīng)的mie-type。
manifest 標(biāo)簽應(yīng)該包含到你需要緩存資源的頁面，當(dāng)?shù)谝淮未蜷_該頁面時，瀏覽器會解析該頁面中的mainfest，并緩存里面列舉的資源，同時該頁面也會自動會被瀏覽器緩存，即使該頁面沒有在Manifest中列出。
Manifest文件結(jié)構(gòu)：
manifest文件，基本格式為三段： CACHE， NETWORK，與 FALLBACK，其中NETWORK和FALLBACK為可選項(xiàng)。
而第一行CACHE MANIFEST為固定格式，必須寫在前面。
以#號開頭的是注釋，可以是版本號，時間戳等等。一般會在這寫個版本號，用來在緩存的文件更新時，更改manifest的作用：瀏覽器已經(jīng)緩存下來的緩存，只有當(dāng)manifest文件發(fā)生了改變才會更新本地緩存，即使你的代碼發(fā)生了
更新，本地瀏覽器也是不知道的，所以每次發(fā)布代碼時你可以更改下#后面的信息比如版本號或者時間，告訴瀏覽器相應(yīng)的更新本地緩存。
CACHE MANIFEST
#v0.1
CACHE:
js/index.js
css/index.css
NETWORK:
images/logo.png
FALLBACK:
*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/
1、第一行是CACHE MANIFEST 這是必須需要的。
2、CACHE（必須） 標(biāo)識出哪些文件需要緩存，可以是相對路徑也可以是絕對路徑。這里列舉出來的文件，當(dāng)?shù)谝淮渭虞d下來時，會被瀏覽器緩存在本地。
3、NETWORk 這一部分是要繞過緩存直接讀取的文件，可以使用通配符 ，大多數(shù)網(wǎng)站使用 * 。 當(dāng)使用 時 表示出 CACHE指定文件外，其它所有頁面都需要聯(lián)網(wǎng)訪問。
4、FALLBACK （可選） 當(dāng)資源無法訪問時，瀏覽器使用后備資源去替代。第二個表示后備頁面。兩個 URI 都必須使用相對路徑并且與清單文件同源?？梢允褂猛ㄅ浞?。
下面的例子中，如果無法建立因特網(wǎng)連接，則用 “404.html” 替代 /html5/ 目錄中的所有文件。
FALLBACK:
/html5/ /404.html
下面的例子中，當(dāng)任何頁面無法訪問時跳轉(zhuǎn)到 “404.html”頁。
FALLBACK:
*.html /404.html
注意： 1 必須在第一行 2、3、4 直接的順序是隨意的，并且在同一個manifest文件中可以出現(xiàn)多次，多次和一次效果一樣。
添加 manifest 屬性的頁面會自動被瀏覽器緩存，不需要再CACHE節(jié)點(diǎn)中再次添加。
如何更新緩存
- 更新manifest文件
- 通過javascript操作
- 清除瀏覽器緩存
給manifest添加或刪除文件，都可更新緩存，如果我們更改了js，而沒有新增或刪除，前面例子中注釋中的版本號，可以很好的用來更新manifest文件。
html5中引入了js操作離線緩存的方法，下面的js可以手動更新本地緩存。
window.applicationCache.update();
如果用戶清除了瀏覽器緩存（手動或用其他一些工具）都會重新下載文件。
我們可以使用代碼手動更新manifest緩存，一旦webapp源碼更新，會自動更新本地manifest緩存，使用戶始終訪問到最新的源碼。
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache .swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
到此這篇關(guān)于H5離線存儲Manifest原理及使用的文章就介紹到這了,更多相關(guān)H5離線存儲Manifest內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
利用Node實(shí)現(xiàn)HTML5離線存儲的方法
這篇文章主要介紹了利用Node實(shí)現(xiàn)HTML5離線存儲的方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-16HTML5中的網(wǎng)絡(luò)存儲實(shí)現(xiàn)方式
傳統(tǒng)方式使用document.cookie來進(jìn)行存儲，但是由于其存儲的空間只有4KB左右，并且需要復(fù)雜的操作進(jìn)行解析，給發(fā)開者帶來很多不便，為此，HTML5規(guī)范提出了網(wǎng)絡(luò)存儲的解決方2020-04-28
這篇文章主要介紹了使用HTML5 IndexDB存儲圖像和文件的示例的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-05HTML5離線應(yīng)用與客戶端存儲的實(shí)現(xiàn)
這篇文章主要介紹了HTML5離線應(yīng)用與客戶端存儲的實(shí)現(xiàn)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-03
這篇文章主要介紹了HTML5 本地存儲實(shí)現(xiàn)購物車功能的相關(guān)資料,需要的朋友可以參考下2017-09-07- 這篇文章主要介紹了在HTML5 localStorage中存儲對象的示例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-20
