App下載

在html5中怎么通過(guò)manifest實(shí)現(xiàn)離線緩存?相關(guān)代碼分享!

猿友 2021-07-15 10:00:53 瀏覽數(shù) (2004)
反饋

在相信很多小伙伴們有過(guò)這樣的經(jīng)歷,在觀看視頻的時(shí)候我們可以進(jìn)行視頻緩存之后在進(jìn)行觀看,那么今天我們就來(lái)說(shuō)說(shuō):“在html5中怎么通過(guò)manifest實(shí)現(xiàn)離線緩存?”這個(gè)問(wèn)題吧!下面是小編整理的相關(guān)內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。

簡(jiǎn)介

離線訪問(wèn)對(duì)基于網(wǎng)絡(luò)的應(yīng)用而言越來(lái)越重要。雖然所有瀏覽器都有緩存機(jī)制,但它們并不可靠,也不一定總能起到預(yù)期的作用。HTML5 使用 ApplicationCache 接口解決了由離線帶來(lái)的部分難題。

使用緩存接口可為您的應(yīng)用帶來(lái)以下三個(gè)優(yōu)勢(shì):

  1. 離線瀏覽 - 用戶可在離線時(shí)瀏覽您的完整網(wǎng)站
  2. 速度 - 緩存資源為本地資源,因此加載速度較快。
  3. 服務(wù)器負(fù)載更少 - 瀏覽器只會(huì)從發(fā)生了更改的服務(wù)器下載資源。

應(yīng)用緩存(又稱 AppCache)可讓開(kāi)發(fā)人員指定瀏覽器應(yīng)緩存哪些文件以供離線用戶訪問(wèn)。即使用戶在離線狀態(tài)下按了刷新按鈕,您的應(yīng)用也會(huì)正常加載和運(yùn)行。

引用清單文件

要啟用某個(gè)應(yīng)用的應(yīng)用緩存,請(qǐng)?jiān)谖臋n的 html 標(biāo)記中添加 manifest 屬性:

manifest 屬性可指向絕對(duì)網(wǎng)址或相對(duì)路徑,但絕對(duì)網(wǎng)址必須與相應(yīng)的網(wǎng)絡(luò)應(yīng)用同源。清單文件可使用任何文件擴(kuò)展名,但必須以正確的 MIME 類型提供(參見(jiàn)下文)。

<html manifest="/cache.manifest">
  ...
</html>

<html manifest="http://www.example.com/example.mf">
  ...
</html>

您應(yīng)在要緩存的網(wǎng)絡(luò)應(yīng)用的每個(gè)頁(yè)面上都添加 manifest 屬性。如果網(wǎng)頁(yè)不包含 manifest 屬性,瀏覽器就不會(huì)緩存該網(wǎng)頁(yè)(除非清單文件中明確列出了該屬性)。

這就意味著用戶瀏覽的每個(gè)包含 manifest 的網(wǎng)頁(yè)都會(huì)隱式添加到應(yīng)用緩存。因此,您無(wú)需在清單中列出每個(gè)網(wǎng)頁(yè)。

清單文件必須以 text/cache-manifest MIME類型提供。文件后綴名可以自定義(建議為.manifest)所以我們需要現(xiàn)在服務(wù)端將 .manifest 后綴的文件類型聲明為 text/cache-manifest。
以apache為例,我們需要在 httpd.conf 中加上:AddType text/cache-manifest .manifest

清單文件結(jié)構(gòu)

簡(jiǎn)單的清單格式如下:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

該示例將在指定此清單文件的網(wǎng)頁(yè)上緩存四個(gè)文件。

您需要注意以下幾點(diǎn):

  1. CACHE MANIFEST 字符串應(yīng)在第一行,且必不可少。
  2. 網(wǎng)站的緩存數(shù)據(jù)量不得超過(guò) 5 MB。不過(guò),如果您要編寫的是針對(duì) Chrome 網(wǎng)上應(yīng)用店的應(yīng)用,可使用 unlimitedStorage 取消該限制。
  3. 如果清單文件或其中指定的資源無(wú)法下載,就無(wú)法進(jìn)行整個(gè)緩存更新進(jìn)程。在這種情況下,瀏覽器將繼續(xù)使用原應(yīng)用緩存。

我們?cè)賮?lái)看看更復(fù)雜的示例:

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

以“#”開(kāi)頭的行是注釋行,但也可用于其他用途。例如更新緩存

應(yīng)用緩存只在其清單文件發(fā)生更改時(shí)才會(huì)更新。例如,如果您修改了圖片資源或更改了 JavaScript 函數(shù),這些更改不會(huì)重新緩存。您必須修改清單文件本身才能讓瀏覽器刷新緩存文件。使用生成的版本號(hào)、文件哈希值或時(shí)間戳創(chuàng)建注釋行,可確保用戶獲得您的軟件的最新版。
您還可以在出現(xiàn)新版本后,以編程方式更新緩存,如更新緩存部分中所述。

如果頁(yè)面引入了緩存清單文件,那么清單文件必須包含當(dāng)前頁(yè)面需要的所有文件(css,js,image...),否則不會(huì)被加載,所以除去固定需要緩存的文件,建議在文件中的 NETWORK 一項(xiàng)加上星號(hào)*,表示其余所有文件

清單可包括以下三個(gè)不同部分:CACHE、NETWORK 和 FALLBACK。

CACHE:
這是條目的默認(rèn)部分。系統(tǒng)會(huì)在首次下載此標(biāo)頭下列出的文件(或緊跟在 CACHE MANIFEST 后的文件)后顯式緩存這些文件。

NETWORK:
此部分下列出的文件是需要連接到服務(wù)器的白名單資源。無(wú)論用戶是否處于離線狀態(tài),對(duì)這些資源的所有請(qǐng)求都會(huì)繞過(guò)緩存??墒褂猛ㄅ浞?。

FALLBACK:
此部分是可選的,用于指定無(wú)法訪問(wèn)資源時(shí)的后備網(wǎng)頁(yè)。其中第一個(gè) URI 代表資源,第二個(gè)代表后備網(wǎng)頁(yè)。兩個(gè) URI 必須相關(guān),并且必須與清單文件同源??墒褂猛ㄅ浞?。
請(qǐng)注意:這些部分可按任意順序排列,且每個(gè)部分均可在同一清單中重復(fù)出現(xiàn)。

以下清單定義了用戶嘗試離線訪問(wèn)網(wǎng)站的根時(shí)顯示的“綜合性”網(wǎng)頁(yè) (offline.html),也表明了其他所有資源(例如遠(yuǎn)程網(wǎng)站上的資源)均需要互聯(lián)網(wǎng)連接。

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

請(qǐng)注意:系統(tǒng)會(huì)自動(dòng)緩存引用清單文件的 HTML 文件。因此您無(wú)需將其添加到清單中,但我們建議您這樣做。

請(qǐng)注意:HTTP 緩存標(biāo)頭以及對(duì)通過(guò) SSL 提供的網(wǎng)頁(yè)設(shè)置的緩存限制將被替換為緩存清單。因此,通過(guò) https 提供的網(wǎng)頁(yè)可實(shí)現(xiàn)離線運(yùn)行。

更新緩存

應(yīng)用在離線后將保持緩存狀態(tài),除非發(fā)生以下某種情況:

  1. 用戶清除了瀏覽器對(duì)您網(wǎng)站的數(shù)據(jù)存儲(chǔ)。
  2. 清單文件經(jīng)過(guò)修改。請(qǐng)注意:更新清單中列出的某個(gè)文件并不意味著瀏覽器會(huì)重新緩存該資源。清單文件本身必須進(jìn)行更改。
  3. 應(yīng)用緩存通過(guò)編程方式進(jìn)行更新。

對(duì)于有關(guān)于“在html5中怎么通過(guò)manifest實(shí)現(xiàn)離線緩存?”這個(gè)問(wèn)題相關(guān)內(nèi)容的分享就到這了,如果你有其他的看法也可以提出來(lái)和大家一同探討學(xué)習(xí),那么對(duì)于有關(guān)于 html5 的相關(guān)內(nèi)容我們都可以在 W3Cschool 中進(jìn)行學(xué)習(xí)和了解。 



0 人點(diǎn)贊