離線存取對基於網路的應用而言越來越重要。雖然所有瀏覽器都有快取機制,但它們並不可靠,也不一定總是能起到預期的作用。 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# 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.html images/offline.jpg*.html /offline.html
以#開頭的行是註解行,但也可用於其他用途。例如更新快取
應用程式快取只在其清單檔案發生變更時才會更新。例如,如果您修改了圖片資源或變更了JavaScript 函數,則這些變更不會重新快取。您必須修改清單檔案本身才能讓瀏覽器刷新快取檔案。使用產生的版本號碼、檔案雜湊值或時間戳記建立註解行,可確保使用者獲得您的軟體的最新版。
您也可以在出現新版本後,以程式設計方式更新緩存,如更新快取部分所述。
如果頁面引入了快取清單文件,那麼清單文件必須包含當前頁面需要的所有文件(css,js,image...),否則不會被加載,所以除去固定需要快取的文件,建議在文件中的NETWORK一項加上星號*,表示其餘所有文件
清單可包括以下三個不同部分:CACHE、NETWORK 和FALLBACK。
CACHE:這是條目的預設部分。系統會在首次下載此標頭下列出的檔案(或緊接在CACHE MANIFEST 後的檔案)後明確快取這些檔案。
NETWORK:此部分所列的文件是需要連接到伺服器的白名單資源。無論用戶是否處於離線狀態,對這些資源的所有請求都會繞過快取。可使用通配符。
FALLBACK:此部分是可選的,用於指定無法存取資源時的後備網頁。其中第一個URI 代表資源,第二個代表後備網頁。兩個URI 必須相關,並且必須與清單檔案同源。可使用通配符。
請注意:這些部分可依任意順序排列,且每個部分均可在同一清單中重複出現。
以下清單定義了使用者嘗試離線存取網站的根時所顯示的綜合網頁(offline.html),也顯示了其他所有資源(例如遠端網站上的資源)均需要網路連線。
CACHE MANIFEST# 2010-06-18:v3# Explicitly cached entriesindex.htmlcss/style.css# offline.html will be displayed if the user is offlineFALLBACK:/ /offline.html# All 可be online.NETWORK:*# Additional resources to cacheCACHE:images/logo1.pngimages/logo2.pngimages/logo3.png
請注意:系統會自動快取引用清單檔案的HTML 檔案。因此您無需將其添加到清單中,但我們建議您這樣做。
請注意:HTTP 快取標頭以及透過SSL 提供的網頁設定的快取限制將被替換為快取清單。因此,透過https 提供的網頁可離線運作。
更新快取應用程式在離線後將保持快取狀態,除非發生以下某種情況:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。