主頁(yè) > 知識(shí)庫(kù) > H5離線(xiàn)存儲(chǔ)Manifest原理及使用

H5離線(xiàn)存儲(chǔ)Manifest原理及使用

熱門(mén)標(biāo)簽:如何獲取地圖標(biāo)注客戶(hù) 南昌仁和怎么申請(qǐng)開(kāi)通400電話(huà) 高德地圖標(biāo)注地點(diǎn)糾錯(cuò) 電話(huà)機(jī)器人電銷(xiāo)系統(tǒng)掙話(huà)費(fèi) 機(jī)器人外呼系統(tǒng)存在哪些能力 拓展地圖標(biāo)注 平?jīng)龅貓D標(biāo)注位置怎么弄 只辦理400電話(huà) 電話(huà)機(jī)器人黑斑馬免費(fèi)

理解:

離線(xiàn)存儲(chǔ)可以將站點(diǎn)的文件儲(chǔ)存在本地,在沒(méi)有網(wǎng)絡(luò)的情況下還是可以訪(fǎng)問(wèn)到存儲(chǔ)的對(duì)應(yīng)的站點(diǎn)的頁(yè)面,這些文件可以包括html,js,css,img等等文件。但其實(shí)即使在有網(wǎng)絡(luò)的時(shí)候,瀏覽器也會(huì)優(yōu)先使用已離線(xiàn)存儲(chǔ)的文件。

什么是Manifest:

Manifest是一個(gè)簡(jiǎn)單的 文本文件,它的擴(kuò)展名是任意的,定義需要緩存的文件、資源,當(dāng)?shù)谝淮未蜷_(kāi)時(shí),瀏覽器會(huì)自動(dòng)緩存相應(yīng)的資源。

Manifest 的特點(diǎn):

  • 離線(xiàn)瀏覽:即當(dāng)網(wǎng)絡(luò)斷開(kāi)時(shí),可以繼續(xù)訪(fǎng)問(wèn)你的頁(yè)面。
  • 訪(fǎng)問(wèn)速度快:將文件緩存到本地,不需每次都從網(wǎng)絡(luò)上請(qǐng)求。
  • 穩(wěn)定性:做了Manifest緩存,遇到突發(fā)網(wǎng)絡(luò)故障或者服務(wù)器故障,繼續(xù)訪(fǎng)問(wèn)本地緩存。

Manifest的使用:

創(chuàng)建一個(gè)和html同名的manifest文件,比如頁(yè)面為index.html,那么可以建一個(gè)index.manifest的文件,然后給index.html的html標(biāo)簽添加如下屬性即可:

<html lang="en" manifest="index.manifest"> 或<html manifest="http://www.example.com/index.manifest">

manifest 的引入可以使絕對(duì)路徑也可以是相對(duì)路徑,如果你使用的是絕對(duì)路徑,你的manifest文件必須和你的站點(diǎn)掛在同一個(gè)域名下。
manifest文件你可以保存為任意的擴(kuò)展名,但mine-type 必須是 text/cache-manifest。

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

在服務(wù)器上部署時(shí)需要在服務(wù)器上添加相應(yīng)的mie-type。

manifest 標(biāo)簽應(yīng)該包含到你需要緩存資源的頁(yè)面,當(dāng)?shù)谝淮未蜷_(kāi)該頁(yè)面時(shí),瀏覽器會(huì)解析該頁(yè)面中的mainfest,并緩存里面列舉的資源,同時(shí)該頁(yè)面也會(huì)自動(dòng)會(huì)被瀏覽器緩存,即使該頁(yè)面沒(méi)有在Manifest中列出。

Manifest文件結(jié)構(gòu):

manifest文件,基本格式為三段: CACHE, NETWORK,與 FALLBACK,其中NETWORK和FALLBACK為可選項(xiàng)。

而第一行CACHE MANIFEST為固定格式,必須寫(xiě)在前面。

以#號(hào)開(kāi)頭的是注釋?zhuān)梢允前姹咎?hào),時(shí)間戳等等。一般會(huì)在這寫(xiě)個(gè)版本號(hào),用來(lái)在緩存的文件更新時(shí),更改manifest的作用:瀏覽器已經(jīng)緩存下來(lái)的緩存,只有當(dāng)manifest文件發(fā)生了改變才會(huì)更新本地緩存,即使你的代碼發(fā)生了

更新,本地瀏覽器也是不知道的,所以每次發(fā)布代碼時(shí)你可以更改下#后面的信息比如版本號(hào)或者時(shí)間,告訴瀏覽器相應(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)識(shí)出哪些文件需要緩存,可以是相對(duì)路徑也可以是絕對(duì)路徑。這里列舉出來(lái)的文件,當(dāng)?shù)谝淮渭虞d下來(lái)時(shí),會(huì)被瀏覽器緩存在本地。

3、NETWORk 這一部分是要繞過(guò)緩存直接讀取的文件,可以使用通配符 ,大多數(shù)網(wǎng)站使用 * 。 當(dāng)使用 時(shí) 表示出 CACHE指定文件外,其它所有頁(yè)面都需要聯(lián)網(wǎng)訪(fǎng)問(wèn)。

4、FALLBACK (可選) 當(dāng)資源無(wú)法訪(fǎng)問(wèn)時(shí),瀏覽器使用后備資源去替代。第二個(gè)表示后備頁(yè)面。兩個(gè) URI 都必須使用相對(duì)路徑并且與清單文件同源??梢允褂猛ㄅ浞?。

下面的例子中,如果無(wú)法建立因特網(wǎng)連接,則用 “404.html” 替代 /html5/ 目錄中的所有文件。

FALLBACK:
/html5/ /404.html

下面的例子中,當(dāng)任何頁(yè)面無(wú)法訪(fǎng)問(wèn)時(shí)跳轉(zhuǎn)到 “404.html”頁(yè)。

FALLBACK:
*.html /404.html

注意: 1 必須在第一行 2、3、4 直接的順序是隨意的,并且在同一個(gè)manifest文件中可以出現(xiàn)多次,多次和一次效果一樣。
    添加 manifest  屬性的頁(yè)面會(huì)自動(dòng)被瀏覽器緩存,不需要再CACHE節(jié)點(diǎn)中再次添加。

如何更新緩存

  • 更新manifest文件
  • 通過(guò)javascript操作
  • 清除瀏覽器緩存

給manifest添加或刪除文件,都可更新緩存,如果我們更改了js,而沒(méi)有新增或刪除,前面例子中注釋中的版本號(hào),可以很好的用來(lái)更新manifest文件。
html5中引入了js操作離線(xiàn)緩存的方法,下面的js可以手動(dòng)更新本地緩存。

window.applicationCache.update();

如果用戶(hù)清除了瀏覽器緩存(手動(dòng)或用其他一些工具)都會(huì)重新下載文件。

我們可以使用代碼手動(dòng)更新manifest緩存,一旦webapp源碼更新,會(huì)自動(dòng)更新本地manifest緩存,使用戶(hù)始終訪(fǎng)問(wèn)到最新的源碼。

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離線(xiàn)存儲(chǔ)Manifest原理及使用的文章就介紹到這了,更多相關(guān)H5離線(xiàn)存儲(chǔ)Manifest內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家! 

標(biāo)簽:西藏 青島 永州 漯河 棗莊 遼源 新疆 池州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《H5離線(xiàn)存儲(chǔ)Manifest原理及使用》,本文關(guān)鍵詞  離線(xiàn),存儲(chǔ),Manifest,原理,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《H5離線(xiàn)存儲(chǔ)Manifest原理及使用》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于H5離線(xiàn)存儲(chǔ)Manifest原理及使用的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章