溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5中的manifest緩存使用方法

發(fā)布時(shí)間：2021-08-04 20:17:33 來(lái)源：億速云 閱讀：148 作者：chen 欄目：web開(kāi)發(fā)

本篇內(nèi)容主要講解“HTML5中的manifest緩存使用方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“HTML5中的manifest緩存使用方法”吧!

什么是Cache Manifest
首先manifest是一個(gè)后綴名為minifest的文件，在文件中定義那些需要緩存的文件，支持manifest的瀏覽器，會(huì)將按照manifest文件的規(guī)則，像文件保存在本地，從而在沒(méi)有網(wǎng)絡(luò)鏈接的情況下，也能訪問(wèn)頁(yè)面。

當(dāng)我們第一次正確配置app cache后，當(dāng)我們?cè)俅卧L問(wèn)該應(yīng)用時(shí)，瀏覽器會(huì)首先檢查manifest文件是否有變動(dòng)，如果有變動(dòng)就會(huì)把相應(yīng)的變得跟新下來(lái)，同時(shí)改變?yōu)g覽器里面的app cache，如果沒(méi)有變動(dòng)，就會(huì)直接把a(bǔ)pp cache的資源返回，基本流程是這樣的。
HTML5中的manifest緩存使用方法

Manifest的特點(diǎn)
離線瀏覽: 用戶可以在離線狀態(tài)下瀏覽網(wǎng)站內(nèi)容。

更快的速度: 因?yàn)閿?shù)據(jù)被存儲(chǔ)在本地，所以速度會(huì)更快.

減輕服務(wù)器的負(fù)載: 瀏覽器只會(huì)下載在服務(wù)器上發(fā)生改變的資源。

瀏覽器支持情況
所有主流瀏覽器均支持應(yīng)用程序緩存，除了 Internet Explorer。caniuse給出的答案如下圖所示。
HTML5中的manifest緩存使用方法

如何使用
html新增了一個(gè)manifest屬性，可以用來(lái)指定當(dāng)前頁(yè)面的manifest文件。

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

Manifest文件
接下來(lái)詳細(xì)說(shuō)說(shuō)manifest的細(xì)節(jié)，一個(gè)典型的manifest文件代碼結(jié)構(gòu)像下面這樣：

CACHE MANIFEST#version 1.3CACHE:    test.cssNETWORK:*
manifest文件，基本格式為三段： CACHE， NETWORK，與 FALLBACK，其中NETWORK和FALLBACK為可選項(xiàng)。

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

以#號(hào)開(kāi)頭的是注釋，一般會(huì)在第二行寫個(gè)版本號(hào)，用來(lái)在緩存的文件更新時(shí)，更改manifest的作用，可以是版本號(hào)，時(shí)間戳或者md5碼等等。

CACHE:（必須）
標(biāo)識(shí)出哪些文件需要緩存，可以是相對(duì)路徑也可以是絕對(duì)路徑。

a.csshttp://yanhaijing.com/a.css
NETWORK:（可選）

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

下面的代碼 “l(fā)ogin.asp” 永遠(yuǎn)不會(huì)被緩存，且離線時(shí)是不可用的：

NETWORK:login.asp
可以使用星號(hào)來(lái)指示所有其他資源/文件都需要因特網(wǎng)連接：

NETWORK:* ###FALLBACK:（可選）
指定了一個(gè)后備頁(yè)面，當(dāng)資源無(wú)法訪問(wèn)時(shí)，瀏覽器會(huì)使用該頁(yè)面。該段落的每條記錄都列出兩個(gè) URI&mdash;第一個(gè)表示資源，第二個(gè)表示后備頁(yè)面。兩個(gè) URI 都必須使用相對(duì)路徑并且與清單文件同源?？梢允褂猛ㄅ浞?/p>

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

FALLBACK:/html5/ /404.html
下面的例子中，則用 “404.html” 替代所有文件。

FALLBACK:*.html /404.html
如何更新緩存
如下三種方式，可以更新緩存：

(1)更新manifest文件

(2)通過(guò)javascript操作

(3)清除瀏覽器緩存

給manifest添加或刪除文件，都可更新緩存，如果我們更改了js，而沒(méi)有新增或刪除，前面例子中注釋中的版本號(hào)，可以很好的用來(lái)更新manifest文件。

html5中引入了js操作離線緩存的方法，下面的js可以手動(dòng)更新本地緩存。

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

注意事項(xiàng)
瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn) 5MB）。

如果manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過(guò)程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。

引用manifest的html必須與manifest文件同源，在同一個(gè)域下。

FALLBACK中的資源必須和manifest文件同源。

當(dāng)一個(gè)資源被緩存后，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪問(wèn)緩存中的資源。

站點(diǎn)中的其他頁(yè)面即使沒(méi)有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問(wèn)。

當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新。

自動(dòng)化工具
manifest文件中的cache部分不能使用通配符，必須手動(dòng)指定，這實(shí)在太讓人不可理解，文件一多，就成了體力活了，這里介紹的 grunt-manifest能自動(dòng)生成manifest文件的目的。grunt-manifest依賴grunt，grunt是一個(gè)自動(dòng)化構(gòu)建工具，如果你不知道grunt，請(qǐng)移步這里。

如下的命令可以安裝grunt-manifest，并加入到依賴文件。

代碼如下:

npm install grunt-manifest --save-dev


如下的代碼，可以在grunt中載入grunt-manifest，然后便可使用。

代碼如下:

grunt.loadNpmTasks('grunt-manifest');


使用grunt-manifest的一個(gè)典型的配置文件如下所示：

代碼如下:

</p> <p>grunt.initConfig({
 manifest: {
   generate: {
     options: {
       basePath: "../",
       cache: ["js/app.js", "css/style.css"]
       network: ["http://*", "https://*"],
       fallback: ["/ /offline.html"],
       exclude: ["js/jquery.min.js"],
       preferOnline: true,
       verbose: true,
       timestamp: true
     },
     src: [
           "some_files/*.html",
         "js/*.min.js",
         "css/*.css"
     ],
     dest: "index.manifest"
   }
 }
});


其中options定義生成manifest的一些自定義參數(shù)，src是要生成的文件，dest是輸出文件。

options下有很多參數(shù)，主要參數(shù)如下：

basePath 設(shè)置出入文件的根目錄

cache 手動(dòng)添加緩存文件

network 手動(dòng)添加網(wǎng)絡(luò)文件

fallback 手動(dòng)添加后備文件

exclude 設(shè)置不添加到cache的文件

verbose 是否添加版權(quán)信息

timestamp是否添加時(shí)間戳

示例

要使用manifest緩存，我們首先需要寫一個(gè)manifest文件。這個(gè)文件有嚴(yán)格的格式要求，下面是個(gè)例子

代碼如下:

</p> <p>CACHE MANIFEST
#我是注釋，這個(gè)文件名叫test.manifest
CACHE:
/test.css
/test.js


　　這就是一個(gè)簡(jiǎn)單的manifest文件。一開(kāi)始必須是“CACHE MANIFEST”來(lái)聲明這是一個(gè)manifest文件。后面的“CACHE:”是操作類型，再后面的兩個(gè)文件按路徑是“CACHE:”這個(gè)操作類型作用的文件，表示這些文件需要緩存。當(dāng)然，操作類型不止CACHE一種，這個(gè)后面再說(shuō)。我們先來(lái)說(shuō)說(shuō)大家最關(guān)心的問(wèn)題。這個(gè)manifest文件怎么使用？
　　使用manifest文件只要在頁(yè)面的HTML標(biāo)簽中加入一個(gè)屬性“manifest="manifest文件路徑"”就可以了，比如

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <html manifest="test.manifest">  

  2. <head>  

  3.   <link href="test.css" rel="stylesheet" />  

  4.   <script src="test.js"></script>  

  5. </head>  

  6. <body>  

  7.   <div>次碳酸鈷</div>  

  8. <body>  

  9. </html>  

　　這個(gè)頁(yè)面就使用了上面寫的manifest文件，我們用Chrome打開(kāi)這個(gè)頁(yè)面就可以在控制臺(tái)中找到這個(gè)manifest的工作信息。
HTML5中的manifest緩存使用方法

從這個(gè)信息中可以看出，我們?cè)O(shè)置的需要緩存的兩個(gè)文件都緩存了。而且引用manifest的那個(gè)頁(yè)面也被緩存了。這個(gè)很重要，這個(gè)是manifest的機(jī)制，它除了會(huì)緩存設(shè)置好的文件之外，還會(huì)緩存當(dāng)前引用manifest文件的頁(yè)面（想關(guān)都關(guān)不掉）。所以使用起來(lái)很不方便，這就需要注意。
　　另外，manifest緩存之后的東西只有在manifest文件發(fā)生變化時(shí)才會(huì)跟新（貌似是這個(gè)文件的md5發(fā)生變化時(shí)才更新）。而被緩存文件更新時(shí)瀏覽器是不會(huì)去獲取新文件的。也就是說(shuō)，剛剛那個(gè)頁(yè)面已經(jīng)緩存了test.css，現(xiàn)在我修改了test.css，頁(yè)面也不會(huì)有任何變化。除非我修改manifest文件本身的內(nèi)容（注意是內(nèi)容，不是修改時(shí)間）。一般為了更新這個(gè)緩存，可以在里面的注釋中放入修改時(shí)間來(lái)更新它。這個(gè)我就不截圖了，好麻煩的。
　　說(shuō)完這些問(wèn)題，現(xiàn)在回過(guò)頭來(lái)看看manifest本身的寫法。除了上面的“CACHE:”之外，還有幾個(gè)操作類型。下面是這些操作類型和說(shuō)明
　　　　CACHE:設(shè)置后面的文件為緩存
　　　　NETWORK:置后面的文件為不緩存（無(wú)法設(shè)置自身頁(yè)面）
　　　　FALLBACK:置后面的文件錯(cuò)誤或不存在的時(shí)候使用另一個(gè)文件
　　　　SETTINGS:可以設(shè)置fast或prefer-online兩種模式
　　CACHE是設(shè)置緩存，之前已經(jīng)說(shuō)過(guò)了。
　　NETWORK是設(shè)置不緩存。由于manifest的機(jī)制是把整個(gè)頁(yè)面（或者說(shuō)Web應(yīng)用）儲(chǔ)存的本地。所以，當(dāng)前頁(yè)面使用的所有資源都必須有一個(gè)設(shè)置。如果不設(shè)置就會(huì)在頁(yè)面緩存之后找不到，所以通常需要使用NETWORK來(lái)匹配所有不需要緩存的資源，如下面這樣。

代碼如下:

CACHE MANIFEST
NETWORK:
*


　　FALLBACK是不存在是使用另一個(gè)文件替代，下面是個(gè)例子

代碼如下:

CACHE MANIFEST
#test.manifest
FALLBACK:
/x.css /test.css

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <html manifest="test.manifest">  

  2. <head>  

  3.   <link href="x.css" rel="stylesheet" />  

  4. </head>  

  5. </html>  

HTML5中的manifest緩存使用方法

由于x.css不存在，所以緩存時(shí)候采用了test.css來(lái)代替它。
　　SETTINGS可以設(shè)置成兩種模式，默認(rèn)是fast。但是在我的測(cè)試中沒(méi)感覺(jué)到這兩種模式有什么區(qū)別，這個(gè)就暫時(shí)不說(shuō)了。
　　這些就是manifest緩存最基本的東西，還有一個(gè)很大的問(wèn)題就是火狐的警告。當(dāng)使用manifest時(shí)，火狐下會(huì)出現(xiàn)警告。
HTML5中的manifest緩存使用方法

到此，相信大家對(duì)“HTML5中的manifest緩存使用方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手