HTML5 manifest離線緩存的示例代碼
我要評論簡介
離線訪問對基于網(wǎng)絡的應用而言越來越重要。雖然所有瀏覽器都有緩存機制，但它們并不可靠，也不一定總能起到預期的作用。HTML5 使用 ApplicationCache 接口解決了由離線帶來的部分難題。
使用緩存接口可為您的應用帶來以下三個優(yōu)勢：
- 離線瀏覽 - 用戶可在離線時瀏覽您的完整網(wǎng)站
- 速度 - 緩存資源為本地資源，因此加載速度較快。
- 服務器負載更少 - 瀏覽器只會從發(fā)生了更改的服務器下載資源。
應用緩存（又稱 AppCache）可讓開發(fā)人員指定瀏覽器應緩存哪些文件以供離線用戶訪問。即使用戶在離線狀態(tài)下按了刷新按鈕，您的應用也會正常加載和運行。
引用清單文件
要啟用某個應用的應用緩存，請在文檔的 html 標記中添加 manifest 屬性：
manifest 屬性可指向絕對網(wǎng)址或相對路徑，但絕對網(wǎng)址必須與相應的網(wǎng)絡應用同源。清單文件可使用任何文件擴展名，但必須以正確的 MIME 類型提供（參見下文）。
<html manifest="/cache.manifest"> ... </html>
或
<html manifest="http://www.example.com/example.mf"> ... </html>
您應在要緩存的網(wǎng)絡應用的每個頁面上都添加 manifest 屬性。如果網(wǎng)頁不包含 manifest 屬性，瀏覽器就不會緩存該網(wǎng)頁（除非清單文件中明確列出了該屬性）。
這就意味著用戶瀏覽的每個包含 manifest 的網(wǎng)頁都會隱式添加到應用緩存。因此，您無需在清單中列出每個網(wǎng)頁。
清單文件必須以 text/cache-manifest MIME類型提供。文件后綴名可以自定義（建議為.manifest）所以我們需要現(xiàn)在服務端將.manifest后綴的文件類型聲明為text/cache-manifest。
以apache為例，我們需要在httpd.conf中加上：AddType text/cache-manifest .manifest
清單文件結構
簡單的清單格式如下：
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
該示例將在指定此清單文件的網(wǎng)頁上緩存四個文件。
您需要注意以下幾點：
- CACHE MANIFEST 字符串應在第一行，且必不可少。
- 網(wǎng)站的緩存數(shù)據(jù)量不得超過 5 MB。不過，如果您要編寫的是針對 Chrome 網(wǎng)上應用店的應用，可使用 unlimitedStorage 取消該限制。
- 如果清單文件或其中指定的資源無法下載，就無法進行整個緩存更新進程。在這種情況下，瀏覽器將繼續(xù)使用原應用緩存。
我們再來看看更復雜的示例：
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
以“#”開頭的行是注釋行，但也可用于其他用途。例如更新緩存
應用緩存只在其清單文件發(fā)生更改時才會更新。例如，如果您修改了圖片資源或更改了 JavaScript 函數(shù)，這些更改不會重新緩存。您必須修改清單文件本身才能讓瀏覽器刷新緩存文件。使用生成的版本號、文件哈希值或時間戳創(chuàng)建注釋行，可確保用戶獲得您的軟件的最新版。
您還可以在出現(xiàn)新版本后，以編程方式更新緩存，如更新緩存部分中所述。
如果頁面引入了緩存清單文件，那么清單文件必須包含當前頁面需要的所有文件（css，js，image...），否則不會被加載，所以除去固定需要緩存的文件，建議在文件中的NETWORK一項加上星號*,表示其余所有文件
清單可包括以下三個不同部分：CACHE、NETWORK 和 FALLBACK。
CACHE：
這是條目的默認部分。系統(tǒng)會在首次下載此標頭下列出的文件（或緊跟在 CACHE MANIFEST 后的文件）后顯式緩存這些文件。
NETWORK：
此部分下列出的文件是需要連接到服務器的白名單資源。無論用戶是否處于離線狀態(tài)，對這些資源的所有請求都會繞過緩存?？墒褂猛ㄅ浞?。
FALLBACK：
此部分是可選的，用于指定無法訪問資源時的后備網(wǎng)頁。其中第一個 URI 代表資源，第二個代表后備網(wǎng)頁。兩個 URI 必須相關，并且必須與清單文件同源?？墒褂猛ㄅ浞?。
請注意：這些部分可按任意順序排列，且每個部分均可在同一清單中重復出現(xiàn)。
以下清單定義了用戶嘗試離線訪問網(wǎng)站的根時顯示的“綜合性”網(wǎng)頁 (offline.html)，也表明了其他所有資源（例如遠程網(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 緩存標頭以及對通過 SSL 提供的網(wǎng)頁設置的緩存限制將被替換為緩存清單。因此，通過 https 提供的網(wǎng)頁可實現(xiàn)離線運行。
更新緩存
應用在離線后將保持緩存狀態(tài)，除非發(fā)生以下某種情況：
- 用戶清除了瀏覽器對您網(wǎng)站的數(shù)據(jù)存儲。
- 清單文件經(jīng)過修改。請注意：更新清單中列出的某個文件并不意味著瀏覽器會重新緩存該資源。清單文件本身必須進行更改。
- 應用緩存通過編程方式進行更新。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
HTML5新標簽兼容——> <!--<if lt IE 9><!endif-->
這篇文章主要介紹了HTML5新標簽兼容——> <!--<if lt IE 9><!endif--> 的兩種方法,需要的朋友可以參考下2018-09-12- frame這個標簽不知大家注意過沒有,它必須放在frameset中使用,而且經(jīng)常容易和iframe混淆,這里我們就來舉例講解HTML中iframe和frame的區(qū)別,需要的朋友可以參考下2016-05-30
- 這篇文章主要介紹了詳解HTML5中的manifest緩存使用,文中同時介紹了相關的一些自動化工具,需要的朋友可以參考下2015-09-09
- 這篇文章主要介紹了HTML中iFrame標簽的兩個用法,分別是作為彈出層鋪底覆蓋 ,和跨域寫入cookie,需要的朋友可以參考下2015-07-09
使用HTML5的Notification API制作web通知的教程
這篇文章主要介紹了使用HTML5的Notification API制作web通知的教程,示例包括需要使用到的相關CSS以及Javascript代碼,需要的朋友可以參考下2015-05-08- 這篇文章主要介紹了html5觸摸事件判斷滑動方向的實現(xiàn)的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-05
- 這篇文章主要介紹了HTML5中判斷橫屏豎屏的方法(移動端)的相關資料,需要的朋友可以參考下2016-08-04
- 長期以來我們一直缺少一個判斷用戶是否正在瀏覽某個指定標簽頁的方法。用戶是否去看別的網(wǎng)站了？他們切換回來了么？2014-05-03
HTML5+CSS3實現(xiàn)超酷登錄窗口(自動隱藏默認文本及判斷必填字段)
輸入框獲取焦點后會自動隱藏默認文本，如果為空會提示必填字段2013-05-21html5中canvas學習筆記2-判斷瀏覽器是否支持canvas
判斷瀏覽器是否支持canvas,本人搜集整理了一些使用方法，感興趣的朋友可以了解下2013-01-06
