扣丁學堂HTML5開發manifest離線快取示例詳解

　　今天扣丁學堂老師給大家介紹一下關於HTML5開發manifest離線快取示例詳解，目前來說離線訪問對基於網路的應用而言越來越重要。雖然所有瀏覽器都有快取機制，但它們並不可靠，也不一定總能起到預期的作用。HTML5使用ApplicationCache介面解決了由離線帶來的部分難題，下面我們一起來看一下吧。

　　使用快取介面可為您的應用帶來以下三個優勢：

　　離線瀏覽-使用者可在離線時瀏覽您的完整網站

　　速度-快取資源為本地資源，因此載入速度較快。

　　伺服器負載更少-瀏覽器只會從發生了更改的伺服器下載資源。

　　應用快取（又稱AppCache）可讓開發人員指定瀏覽器應快取哪些檔案以供離線使用者訪問。即使使用者在離線狀態下按了重新整理按鈕，您的應用也會正常載入和執行。

　　引用清單檔案

　　要啟用某個應用的應用快取，請在文件的html標記中新增manifest屬性：

　　manifest屬性可指向絕對網址或相對路徑，但絕對網址必須與相應的網路應用同源。清單檔案可使用任何副檔名，但必須以正確的MIME型別提供（參見下文）。

　　

　　或

　　

　　您應在要快取的網路應用的每個頁面上都新增manifest屬性。如果網頁不包含manifest屬性，瀏覽器就不會快取該網頁（除非清單檔案中明確列出了該屬性）。

　　這就意味著使用者瀏覽的每個包含manifest的網頁都會隱式新增到應用快取。因此，您無需在清單中列出每個網頁。

　　清單檔案必須以text/cache-manifestMIME型別提供。檔案字尾名可以自定義（建議為.manifest）所以我們需要現在服務端將.manifest字尾的檔案型別宣告為text/cache-manifest。

　　以apache為例，我們需要在httpd.conf中加上：AddTypetext/cache-manifest.manifest

　　清單檔案結構

　　簡單的清單格式如下：

　　CACHEMANIFEST

　　index.html

　　stylesheet.css

　　images/logo.png

　　scripts/main.js

　　該示例將在指定此清單檔案的網頁上快取四個檔案。

　　您需要注意以下幾點：

　　CACHEMANIFEST字串應在第一行，且必不可少。

　　網站的快取資料量不得超過5MB。不過，如果您要編寫的是針對Chrome網上應用店的應用，可使用unlimitedStorage取消該限制。

　　如果清單檔案或其中指定的資源無法下載，就無法進行整個快取更新程式。在這種情況下，瀏覽器將繼續使用原應用快取。

　　我們再來看看更復雜的示例：

　　CACHEMANIFEST

　　#2018-08-14:v2

　　#Explicitlycached'masterentries'.

　　CACHE:

　　/favicon.ico

　　index.html

　　stylesheet.css

　　images/logo.png

　　scripts/main.js

　　#Resourcesthatrequiretheusertobeonline.

　　NETWORK:

　　login.php

　　/myapi

　　

　　#static.htmlwillbeservedifmain.pyisinaccessible

　　#offline.jpgwillbeservedinplaceofallimagesinimages/large/

　　#offline.htmlwillbeservedinplaceofallother.htmlfiles

　　FALLBACK:

　　/main.py/static.html

　　images/large/images/offline.jpg

　　*.html/offline.html

　　以“#”開頭的行是註釋行，但也可用於其他用途。例如更新快取

　　應用快取只在其清單檔案發生更改時才會更新。例如，如果您修改了圖片資源或更改了JavaScript函式，這些更改不會重新快取。您必須修改清單檔案本身才能讓瀏覽器重新整理快取檔案。使用生成的版本號、檔案雜湊值或時間戳建立註釋行，可確保使用者獲得您的軟體的最新版。

　　您還可以在出現新版本後，以程式設計方式更新快取，如更新快取部分中所述。

　　如果頁面引入了快取清單檔案，那麼清單檔案必須包含當前頁面需要的所有檔案（css，js，image...），否則不會被載入，所以除去固定需要快取的檔案，建議在檔案中的NETWORK一項加上星號*,表示其餘所有檔案

　　清單可包括以下三個不同部分：CACHE、NETWORK和FALLBACK。

　　CACHE：

　　這是條目的預設部分。系統會在首次下載此標頭下列出的檔案（或緊跟在CACHEMANIFEST後的檔案）後顯式快取這些檔案。

　　NETWORK：

　　此部分下列出的檔案是需要連線到伺服器的白名單資源。無論使用者是否處於離線狀態，對這些資源的所有請求都會繞過快取。可使用萬用字元。

　　FALLBACK：

　　此部分是可選的，用於指定無法訪問資源時的後備網頁。其中第一個URI代表資源，第二個代表後備網頁。兩個URI必須相關，並且必須與清單檔案同源。可使用萬用字元。

　　請注意：這些部分可按任意順序排列，且每個部分均可在同一清單中重複出現。

　　以下清單定義了使用者嘗試離線訪問網站的根時顯示的“綜合性”網頁(offline.html)，也表明了其他所有資源（例如遠端網站上的資源）均需要網際網路連線。

　　CACHEMANIFEST

　　#2018-08-14:v3

　　#Explicitlycachedentries

　　index.html

　　css/style.css

　　#offline.htmlwillbedisplayediftheuserisoffline

　　FALLBACK:

　　//offline.html

　　#Allotherresources(e.g.sites)requiretheusertobeonline.

　　NETWORK:

　　*

　　#Additionalresourcestocache

　　CACHE:

　　images/logo1.png

　　images/logo2.png

　　images/logo3.png

　　請注意：系統會自動快取引用清單檔案的HTML檔案。因此您無需將其新增到清單中，但我們建議您這樣做。

　　請注意：HTTP快取標頭以及對透過SSL提供的網頁設定的快取限制將被替換為快取清單。因此，透過https提供的網頁可實現離線執行。

　　更新快取

　　應用在離線後將保持快取狀態，除非發生以下某種情況：

　　使用者清除了瀏覽器對您網站的資料儲存。清單檔案經過修改。請注意：更新清單中列出的某個檔案並不意味著瀏覽器會重新快取該資源。清單檔案本身必須進行更改，應用快取透過程式設計方式進行更新。

　　以上就是扣丁學堂HTML5開發manifest離線快取示例詳解的全部內容，希望對大家的學習有所幫助，也希望大家多多支援扣丁學堂。

作者：扣丁學堂
連結：