本篇文章給大家分享的是有關(guān)怎么在HTML5中使用manifest實現(xiàn)離線緩存,小編覺得挺實用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)公司專注于廬陽網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供廬陽營銷型網(wǎng)站建設(shè),廬陽網(wǎng)站制作、廬陽網(wǎng)頁設(shè)計、廬陽網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù),打造廬陽網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供廬陽網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。離線訪問對基于網(wǎng)絡(luò)的應(yīng)用而言越來越重要。雖然所有瀏覽器都有緩存機(jī)制,但它們并不可靠,也不一定總能起到預(yù)期的作用。HTML5 使用 ApplicationCache 接口解決了由離線帶來的部分難題。
使用緩存接口可為您的應(yīng)用帶來以下三個優(yōu)勢:
離線瀏覽 - 用戶可在離線時瀏覽您的完整網(wǎng)站
速度 - 緩存資源為本地資源,因此加載速度較快。
服務(wù)器負(fù)載更少 - 瀏覽器只會從發(fā)生了更改的服務(wù)器下載資源。
應(yīng)用緩存(又稱 AppCache)可讓開發(fā)人員指定瀏覽器應(yīng)緩存哪些文件以供離線用戶訪問。即使用戶在離線狀態(tài)下按了刷新按鈕,您的應(yīng)用也會正常加載和運(yùn)行。
引用清單文件
要啟用某個應(yīng)用的應(yīng)用緩存,請在文檔的 html 標(biāo)記中添加 manifest 屬性:
manifest 屬性可指向絕對網(wǎng)址或相對路徑,但絕對網(wǎng)址必須與相應(yīng)的網(wǎng)絡(luò)應(yīng)用同源。清單文件可使用任何文件擴(kuò)展名,但必須以正確的 MIME 類型提供(參見下文)。
...
或
...
您應(yīng)在要緩存的網(wǎng)絡(luò)應(yīng)用的每個頁面上都添加 manifest 屬性。如果網(wǎng)頁不包含 manifest 屬性,瀏覽器就不會緩存該網(wǎng)頁(除非清單文件中明確列出了該屬性)。
這就意味著用戶瀏覽的每個包含 manifest 的網(wǎng)頁都會隱式添加到應(yīng)用緩存。因此,您無需在清單中列出每個網(wǎng)頁。
清單文件必須以 text/cache-manifest MIME類型提供。文件后綴名可以自定義(建議為.manifest)所以我們需要現(xiàn)在服務(wù)端將.manifest后綴的文件類型聲明為text/cache-manifest。
以apache為例,我們需要在httpd.conf中加上:AddType text/cache-manifest .manifest
清單文件結(jié)構(gòu)
簡單的清單格式如下:
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
該示例將在指定此清單文件的網(wǎng)頁上緩存四個文件。
您需要注意以下幾點:
CACHE MANIFEST 字符串應(yīng)在第一行,且必不可少。
網(wǎng)站的緩存數(shù)據(jù)量不得超過 5 MB。不過,如果您要編寫的是針對 Chrome 網(wǎng)上應(yīng)用店的應(yīng)用,可使用 unlimitedStorage 取消該限制。
如果清單文件或其中指定的資源無法下載,就無法進(jìn)行整個緩存更新進(jìn)程。在這種情況下,瀏覽器將繼續(xù)使用原應(yīng)用緩存。
我們再來看看更復(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
以“#”開頭的行是注釋行,但也可用于其他用途。例如更新緩存
應(yīng)用緩存只在其清單文件發(fā)生更改時才會更新。例如,如果您修改了圖片資源或更改了 JavaScript 函數(shù),這些更改不會重新緩存。您必須修改清單文件本身才能讓瀏覽器刷新緩存文件。使用生成的版本號、文件哈希值或時間戳創(chuàng)建注釋行,可確保用戶獲得您的軟件的新版。
您還可以在出現(xiàn)新版本后,以編程方式更新緩存,如更新緩存部分中所述。
如果頁面引入了緩存清單文件,那么清單文件必須包含當(dāng)前頁面需要的所有文件(css,js,image...),否則不會被加載,所以除去固定需要緩存的文件,建議在文件中的NETWORK一項加上星號*,表示其余所有文件
清單可包括以下三個不同部分:CACHE、NETWORK 和 FALLBACK。
CACHE:
這是條目的默認(rèn)部分。系統(tǒng)會在首次下載此標(biāo)頭下列出的文件(或緊跟在 CACHE MANIFEST 后的文件)后顯式緩存這些文件。
NETWORK:
此部分下列出的文件是需要連接到服務(wù)器的白名單資源。無論用戶是否處于離線狀態(tài),對這些資源的所有請求都會繞過緩存??墒褂猛ㄅ浞?/p>
FALLBACK:
此部分是可選的,用于指定無法訪問資源時的后備網(wǎng)頁。其中第一個 URI 代表資源,第二個代表后備網(wǎng)頁。兩個 URI 必須相關(guān),并且必須與清單文件同源??墒褂猛ㄅ浞?br/>請注意:這些部分可按任意順序排列,且每個部分均可在同一清單中重復(fù)出現(xiàn)。
以下清單定義了用戶嘗試離線訪問網(wǎng)站的根時顯示的“綜合性”網(wǎng)頁 (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
請注意:系統(tǒng)會自動緩存引用清單文件的 HTML 文件。因此您無需將其添加到清單中,但我們建議您這樣做。
請注意:HTTP 緩存標(biāo)頭以及對通過 SSL 提供的網(wǎng)頁設(shè)置的緩存限制將被替換為緩存清單。因此,通過 https 提供的網(wǎng)頁可實現(xiàn)離線運(yùn)行。
更新緩存
應(yīng)用在離線后將保持緩存狀態(tài),除非發(fā)生以下某種情況:
用戶清除了瀏覽器對您網(wǎng)站的數(shù)據(jù)存儲。
清單文件經(jīng)過修改。請注意:更新清單中列出的某個文件并不意味著瀏覽器會重新緩存該資源。清單文件本身必須進(jìn)行更改。
應(yīng)用緩存通過編程方式進(jìn)行更新。
以上就是怎么在HTML5中使用manifest實現(xiàn)離線緩存,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降摹OM隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。