HTML <html> manifest 屬性（離線儲(chǔ)存&應(yīng)用程序緩存）

什么是應(yīng)用程序緩存（Application Cache）？

HTML5 引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可進(jìn)行緩存，并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。

應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢(shì)：

  1. 離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們

  2. 速度 - 已緩存資源加載得更快

  3. 減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。

定義和用法

manifest 屬性規(guī)定文檔的緩存 manifest 的位置。

HTML5 引入了應(yīng)用程序緩存，這意味著 Web 應(yīng)用程序可以被緩存，然后在無互聯(lián)網(wǎng)連接的時(shí)候進(jìn)行訪問。

應(yīng)用程序緩存使得應(yīng)用程序有三個(gè)優(yōu)點(diǎn)：

  1. 離線瀏覽 - 用戶可以在離線時(shí)使用應(yīng)用程序

  2. 快速 - 緩存的資源可以更快地加載

  3. 減少服務(wù)器加載 - 瀏覽器只從服務(wù)器上下載已更新/已更改的資源

manifest 屬性應(yīng)該被 Web 應(yīng)用程序中您想要緩存的每個(gè)頁面包含。

manifest 文件是一個(gè)簡單的文本文件，列舉出了瀏覽器用于離線訪問而緩存的資源。

屬性值

值 描述
URL 文檔的緩存 manifest 的地址?？赡艿闹担?絕對(duì) URL - 指向另一個(gè)網(wǎng)站（href="http://www.example.com/demo.appcache"） 相對(duì) URL - 指向網(wǎng)站內(nèi)的一個(gè)文件（比如 href="demo.appcache"）

Cache Manifest 基礎(chǔ)

如需啟用應(yīng)用程序緩存，請(qǐng)?jiān)谖臋n的<html> 標(biāo)簽中包含 manifest 屬性：

<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>

每個(gè)指定了 manifest 的頁面在用戶對(duì)其訪問時(shí)都會(huì)被緩存。如果未指定 manifest 屬性，則頁面不會(huì)被緩存（除非在 manifest 文件中直接指定了該頁面）。

manifest 文件的建議的文件擴(kuò)展名是：".appcache"。

image

請(qǐng)注意，manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務(wù)器上進(jìn)行配置。

Manifest 文件

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。

manifest 文件可分為三個(gè)部分：

  • CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

  • NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存

  • FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="" contenteditable="false" cid="n106" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> CACHE MANIFEST
/theme.css
/logo.gif
/main.js</pre>

上面的 manifest 文件列出了三個(gè)資源：一個(gè) CSS 文件，一個(gè) GIF 圖像，以及一個(gè) JavaScript 文件。當(dāng) manifest 文件加載后，瀏覽器會(huì)從網(wǎng)站的根目錄下載這三個(gè)文件。然后，無論用戶何時(shí)與因特網(wǎng)斷開連接，這些資源依然是可用的。

NETWORK

下面的 NETWORK 小節(jié)規(guī)定文件 "login.php" 永遠(yuǎn)不會(huì)被緩存，且離線時(shí)是不可用的：

<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="" contenteditable="false" cid="n112" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> NETWORK:
login.php
?
可以使用星號(hào)來指示所有其他資源/文件都需要因特網(wǎng)連接：
?
NETWORK:
*</pre>

FALLBACK

下面的 FALLBACK 小節(jié)規(guī)定如果無法建立因特網(wǎng)連接，則用 "offline.html" 替代 /html5/ 目錄中的所有文件：

<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="" contenteditable="false" cid="n127" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> FALLBACK:
/html/ /offline.html</pre>

注意: 第一個(gè) URI 是資源，第二個(gè)是替補(bǔ)。

更新緩存

一旦應(yīng)用被緩存，它就會(huì)保持緩存直到發(fā)生下列情況：

  • 用戶清空瀏覽器緩存

  • manifest 文件被修改（參閱下面的提示）

  • 由程序來更新應(yīng)用緩存

實(shí)例 - 完整的 Manifest 文件

<pre mdtype="fences" cid="n88" contenteditable="false" lang="" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
?
NETWORK:
login.php
?
FALLBACK:
/html/ /offline.html</pre>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容