離線訪問對基於網絡的應用而言越來越重要。雖然所有瀏覽器都有緩存機制,但它們並不可靠,也不一定總能起到預期的作用。 HTML5 使用ApplicationCache 接口解決了由離線帶來的部分難題。
下面是講解html5離線緩存manifest文件的應用及代碼實用案例的相關內容,文章教程主要講述與html5 離線緩存manifest 相關的一些技術與知識,更多的內容歡迎大家訪問http://www.VeVb.com,獲取更多最新教程,下面是教程講解:
什麼是manifest? manifest是一個後綴名為minifest的文件,在文件中定義那些需要緩存的文件,支持manifest的瀏覽器,會將按照manifest文件的規則,像文件保存在本地,從而在沒有網絡鏈接的情況下,也能訪問頁面。
離線訪問對基於網絡的應用而言越來越重要。雖然所有瀏覽器都有緩存機制,但它們並不可靠,也不一定總能起到預期的作用。 HTML5 使用ApplicationCache 接口解決了由離線帶來的部分難題。
使用緩存接口可為您的應用帶來以下三個優勢:
離線瀏覽- 用戶可在離線時瀏覽您的完整網站
速度- 緩存資源為本地資源,因此加載速度較快。
服務器負載更少- 瀏覽器只會從發生了更改的服務器下載資源。
應用緩存(又稱AppCache)可讓開發人員指定瀏覽器應緩存哪些文件以供離線用戶訪問。即使用戶在離線狀態下按了刷新按鈕,您的應用也會正常加載和運行。
引用清單文件要啟用某個應用的應用緩存,請在文檔的html 標記中添加manifest 屬性:
manifest 屬性可指向絕對網址或相對路徑,但絕對網址必須與相應的網絡應用同源。清單文件可使用任何文件擴展名,但必須以正確的MIME 類型提供(參見下文)。
<html manifest=/cache.manifest> ...</html>或<html manifest=http://www.example.com/example.mf> ...</html>
您應在要緩存的網絡應用的每個頁面上都添加manifest 屬性。如果網頁不包含manifest 屬性,瀏覽器就不會緩存該網頁(除非清單文件中明確列出了該屬性)。
這就意味著用戶瀏覽的每個包含manifest 的網頁都會隱式添加到應用緩存。因此,您無需在清單中列出每個網頁。
清單文件必須以text/cache-manifest MIME類型提供。文件後綴名可以自定義(建議為.manifest)所以我們需要現在服務端將.manifest後綴的文件類型聲明為text/cache-manifest。
以apache為例,我們需要在httpd.conf中加上: AddType text/cache-manifest .manifest
簡單的清單格式如下:
CACHE MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
該示例將在指定此清單文件的網頁上緩存四個文件。
您需要注意以下幾點:
CACHE MANIFEST 字符串應在第一行,且必不可少。
網站的緩存數據量不得超過5 MB。不過,如果您要編寫的是針對Chrome 網上應用店的應用,可使用unlimitedStorage 取消該限制。
如果清單文件或其中指定的資源無法下載,就無法進行整個緩存更新進程。在這種情況下,瀏覽器將繼續使用原應用緩存。
我們再來看看更複雜的示例:
CACHE MANIFEST# 2010-06-18:v2# Explicitly cached 'master entries'.CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# Resources that require the user to be online.NETWORK:login.php/myapihttp://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 filesFALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html
以#開頭的行是註釋行,但也可用於其他用途。例如更新緩存
應用緩存只在其清單文件發生更改時才會更新。例如,如果您修改了圖片資源或更改了JavaScript 函數,這些更改不會重新緩存。您必須修改清單文件本身才能讓瀏覽器刷新緩存文件。使用生成的版本號、文件哈希值或時間戳創建註釋行,可確保用戶獲得您的軟件的最新版。
您還可以在出現新版本後,以編程方式更新緩存,如更新緩存部分中所述。
如果頁面引入了緩存清單文件,那麼清單文件必須包含當前頁面需要的所有文件(css,js,image...),否則不會被加載,所以除去固定需要緩存的文件,建議在文件中的NETWORK一項加上星號*,表示其餘所有文件
清單可包括以下三個不同部分:CACHE、NETWORK 和FALLBACK。
CACHE:這是條目的默認部分。系統會在首次下載此標頭下列出的文件(或緊跟在CACHE MANIFEST 後的文件)後顯式緩存這些文件。
NETWORK:此部分下列出的文件是需要連接到服務器的白名單資源。無論用戶是否處於離線狀態,對這些資源的所有請求都會繞過緩存。可使用通配符。
FALLBACK:此部分是可選的,用於指定無法訪問資源時的後備網頁。其中第一個URI 代表資源,第二個代表後備網頁。
End. 教程到這裡講完了,閱讀是否有所收穫呢?本站還提供有html5 離線緩存manifest 相關的內容,歡迎繼續閱讀。