HTML5 API

• 15-1 偵測瀏覽器的HTML5支援• 15-2 HTML5的音效與視訊• 15-3 HTML5的繪圖• 15-4 HTML5的客戶端儲存體• 15-5 HTML5的定位服務• 15-6 HTML5的離線應用程式

15

15-1 偵測瀏覽器的 HTML5 支援

• 15-1-1 使用 JavaScript 程式碼偵測 HTML5 的支援

• 15-1-2 使用 JavaScript 函數庫偵測 HTML5 的支援

15-1-1 使用 JavaScript 程式碼偵測 HTML5的支援 - 說明

• 在客戶端可以使用 JavaScript 程式碼偵測 HTML5的支援，即檢查指定物件是否存在、 HTML5 標籤是否允許建立、是否可以執行特定方法和指定特定屬性。

15-1-1 使用 JavaScript 程式碼偵測 HTML5的支援 - 判斷是否支援特定的 HTML5 API

• 對於 HTML5 API 來說，我們可以使用 if/else 條件加上存取 HTML5 API 物件的程式碼來判斷是否支援特定功能，例如：定位服務的 geolocation 物件，如下所示：if (navigator.geolocation)

g.innerHTML = " 支援 ";

else

g.innerHTML = " 不支援 ";

• if 條件如果傳回存在，即 true ，表示支援此功能。

15-1-1 使用 JavaScript 程式碼偵測 HTML5的支援 - 判斷是否支援 HTML5 新增的標籤

• 對於 HTML5 新增的標籤，我們可以使用 createElement() 方法來建立標籤物件後，呼叫其支援的方法，如果成功，就表示支援此標籤，如下所示：if ( document.createElement('canvas'). getContext('2d') ) c.innerHTML = " 支援 ";else c.innerHTML = " 不支援 ";

15-1-1 使用 JavaScript 程式碼偵測 HTML5的支援 - 判斷是否支援 HTML5 新增的屬性

• 如果是 HTML5 新增的屬性，例如： <input> 標籤的 type 屬性，如下所示：var i = document.createElement("input");

i.setAttribute("type", "email");

if (i.type !== "text")

$('#type').html(" 支援 ");

else

$('#type').html(" 不支援 ");

15-1-2 使用 JavaScript 函數庫偵測 HTML5的支援 - 說明

• 除了使用 JavaScript 程式碼偵測 HTML5 的支援外，我們也可以使用一些網路上免費的 JavaScript 函數庫，最著名的是 Modernizr ，其官方網址為：http://www.modernizr.com 。

• 我們只需從官方網站下載 JavaScript 函數庫的程式碼檔案，以本書為例的檔名是 modernizr.custom.94825.js （也可以使用 NuGet 組件安裝），然後使用 <script> 標籤含括此 JavaScript 函數庫，如下所示：<script src="modernizr.custom.94825.js"></script>

15-1-2 使用 JavaScript 函數庫偵測 HTML5的支援 - 使用

• 使用 Modernizr 物件屬性判斷 HTML5 的支援，如下所示：if (Modernizr.geolocation) $('#geo').html(" 支援 ");else $('#geo').html(" 不支援 ");

• if/else 條件判斷是否支援 HTML5 的定位服務。判斷 <input> 標籤是否支援 type 屬性值 email ，如下所示：if (Modernizr.inputtypes.email) $('#type').html(" 支援 ");else $('#type').html(" 不支援 ");

15-2 HTML5 的音效與視訊

• 15-2-1 <audio> 與 <video> 標籤 • 15-2-2 控制音效的播放 • 15-2-3 控制視訊的播放

15-2-1 <audio> 與 <video> 標籤 -<audio> 標籤

• 在 HTML5 之前播放音效或視訊檔案並沒有標準，一般來說，瀏覽器需要安裝外掛程式才能播放音效或視訊檔案，而且，不同瀏覽器需要自行安裝不同的外掛程式，才能在網頁上播放音效或視訊檔案。

• HTML5 的 <audio> 標籤可以讓瀏覽器原生播放音效檔案，支援 3 種音效格式： MP3 、 Wav 和 Ogg ，如下所示：<audio src="Kalimba.mp3" controls></audio>

• 標籤有 controls 屬性，可以顯示控制面板來播放src 屬性值的音效檔案。

15-2-1 <audio> 與 <video> 標籤 -<audio> 標籤屬性

屬性 說明autoplay 指定音效檔案在網頁載入後，就自動播放，屬性值可以不

指定，或是 autoplay

controls 指定顯示播放音效的控制面板，例如：播放或暫停按鈕，屬性值可以不指定，或是 controls

loop 指定音效檔案會循環播放，當播放完畢，就會自動重複播放，屬性值可以沒有，或是 loop

preload 指定當載入網頁同時載入音效檔，如果有指定 autoplay 屬性，此屬性沒有作用，屬性值 none 是不預載； auto 是

自動預載整個檔案； metadata 只預載音效檔案資訊muted 指定目前狀態是靜音，屬性值可以沒有，或是 muted

src 指定音效檔案的 URL 網址，或同一網站的檔案路徑

15-2-1 <audio> 與 <video> 標籤 -<source> 標籤

• 因為瀏覽器支援的音效格式不同，為了跨瀏覽器相容，我們可以使用 <source> 標籤提供 <audio> 和之後的 <video> 標籤有多種檔案格式來選擇，每一個 <source> 標籤指定一個檔案，可以讓瀏覽器依支援的格式選擇播放的檔案，如下所示：<audio controls="controls"> <source src=" Kalimba.ogg" type="audio/ogg" /> <source src=" Kalimba.mp3" type="audio/mpeg" /> <p> 你的瀏覽器不支援 HTML5 的 Audio 元素 </p>.</audio>

• <audio> 標籤擁有 2 個 <source> 子標籤，分別提供 ogg和 mp3 格式的音效檔案， <p> 標籤是當瀏覽器不支援時，顯示的訊息文字。

15-2-1 <audio> 與 <video> 標籤 -<video> 標籤

• HTML5 的 <video> 標籤可以使用原生方式，在瀏覽器播放視訊檔案或串流，如下所示：<video controls autoplay poster="sample.jpg" width="320" height="240"> <source src="sample.ogv"/> <source src="sample.mp4"/> <source src="sample.webm"/> <p> 很抱歉！您的瀏覽器不支援 HTML5 Video.. <a href="sample.mp4"> 下載 MP4 視訊檔 </a></p></video>

• <video> 標籤如同 <audio> 標籤，可以使用 <source> 子標籤指定視訊檔案。

15-2-1 <audio> 與 <video> 標籤 -<video> 標籤屬性

• <audio> 標籤支援的三種視訊格式檔案，即 .mp4 = H.264 + AAC 、 .ogg/.ogv = Theora + Vorbis和 .webm = VP8 + Vorbis 。

• <video> 標籤除了支援之前 <audio> 標籤的屬性外，專屬屬性的說明，如下表所示：屬性 說明

height 指定視訊播放器的高width 指定視訊播放器的寬poster 當視訊檔案在下載時顯示的圖片，或直到使用者按下播

放鈕前顯示的圖片

15-2-1 <audio> 與 <video> 標籤 -瀏覽器支援的視訊和音效檔案格式瀏覽器 視訊 音效

Internet Exporer 9+ mp4 mp3 、 wav

FireFox 3.6+ ogg/ogv 、 webm ogg 、 wav

Opera 10.5+ ogg/ogv 、 webm ogg 、 wav

Chrome 6+ mp4 、 ogg/ogv 、 webm

ogg 、 mp3

Safari 5+ 支援 mp4 mp3 、 wav

15-2-1 <audio> 與 <video> 標籤 -範例

• 在 ASP.NET 程式使用 2 個 <audio> 標籤播放音樂檔案； 1 個<video> 標籤播放視訊檔案，並且使用 <source> 標籤提供多種格式的媒體檔案，如右圖所示：

15-2-2 控制音效的播放 -取得 HTMLAudioElement 物件

• 在 <audio> 標籤可以顯示預設控制面板來控制播放，當然，我們也可以自行使用 JavaScript 的 getElementById() 方法取得 <audio> 標籤的 HTMLAudioElement 物件（這是介面）後，呼叫相關方法來控制音效的播放，如下所示：var myAudio = document.getElementById("myAudio");

• 上述程式碼是 JavaScript 。 jQuery 取得 HTMLAudioElement 物件的程式碼，如下所示：var myAudio = $("#myAudio")[0];

15-2-2 控制音效的播放 -相關方法

• 在取得 HTMLAudioElement 物件後，就可以呼叫相關方法（繼承自 HTMLMediaElement 物件，這是介面），其說明如下表所示：

方法 說明play() 播放音效或音樂檔案

pause() 暫停播放音效或音樂檔案canPlayType(strin

g)檢查是否支援參數 string 的 MIME 類型，支援傳回

true ；否則為 false

15-2-2 控制音效的播放 -相關屬性

• HTMLAudioElement 物件的相關屬性說明（繼承自 HTMLMediaElement 物件），如下表所示：

屬性 說明volume 播放音量，其值是 0~1

currentTime 目前播放位置的秒數duration 音效或音樂檔案的長度，單位是秒數

15-2-2 控制音效的播放 -調整音量

• 調整音量是註冊 change 事件來更改 volume 屬性值，如下所示：$('#volume').bind("change", function () { var myAudio = $("#myAudio")[0]; myAudio.volume = parseFloat(this.value / 10);});

• volume 是 <input type="range"/> 捲動軸欄位，事件處理的匿名函數可以依取得值調整音量。

15-2-2 控制音效的播放 -顯示播放時間

• 顯示播放時間是註冊 HTMLAudioElement 物件的timeupdate 事件，如下所示：$('#myAudio').bind("timeupdate", function () {

var s1 = parseInt(this.currentTime % 60);

var m1 = parseInt((this.currentTime / 60) % 60);

var s2 = parseInt(this.duration % 60);

var m2 = parseInt((this.duration / 60) % 60);

$('#duration').html(m1 + " 分 :" + s1 + " 秒 / " +

m2 + " 分 :" + s2 + " 秒 ");

});

15-2-2 控制音效的播放 - 範例

• 在 ASP.NET 程式建立<audio> 標籤，但沒有控制面板，然後使用標籤物件的相關方法自行控制音效播放，和顯示相關播放資訊（使用 Opera Mobile Emulator ），如右圖所示：

15-2-3 控制視訊的播放 -取得 HTMLVideoElement 物件

• HTML5 的 <video> 標籤是在 DOM樹建立 HTMLVideoElement 物件（繼承自 HTMLMediaElement 物件）的節點，取得此物件的程式碼，如下所示：var myVideo = document.getElementById("myVideo");

var myVideo = $("#myVideo")[0];

• 程式碼分別使用 JavaScript 和 jQuery 取得物件，然後就可以呼叫相關方法來播放視訊和暫停視訊的播放，使用屬性取得目前的播放狀態，或使用DOM 事件來進一步控制視訊的播放。

15-2-3 控制視訊的播放 -相關方法

• 呼叫相關方法來播放視訊和暫停視訊的播放，如下表所示：方法 說明play() 開始播放視訊

pause() 暫停播放視訊

15-2-3 控制視訊的播放 -相關屬性

屬性 說明currentTime 目前播放位置的秒數

paused 檢查目前是否暫停播放，是傳回 true ；否傳回 false

muted 檢查是否是靜音，是傳回 true ；否傳回 false

volume 取得或設定音量值，值是 0~1

ended 檢查是否已經播放到最後，是傳回 true ；否傳回 false

duration 視訊檔案的長度，單位是秒數videoWidth 唯讀屬性，原始視訊尺寸的寬度videoHeight 唯讀屬性，原始視訊尺寸的高度

width 存取 <video> 標籤尺寸的寬度，即標籤的 width 屬性height 存取 <video> 標籤尺寸的高度，即標籤的 height 屬性

15-2-3 控制視訊的播放 -常用事件

• HTMLAudioElement 和 HTMLVideoElement 物件都可以註冊 HTMLMediaElement 的事件，常用事件的說明，如下表所示：

事件 說明ended 當播放至視訊的最後時觸發，並且將 ended 屬性設為 tr

ue

pause 當呼叫 pause() 方法後觸發play 當呼叫 play() 方法後觸發

timeupdate 當 currentTime 屬性值改變時觸發volumechang

e當 volume 或 muted 屬性值改變時觸發

15-2-3 控制視訊的播放 - 範例• 在 ASP.NET 程式建立

<video> 標籤，但沒有控制面板和自動播放後，使用標籤物件的相關方法來自行控制視訊的播放，和顯示播放的相關資訊（使用 Opera Mobile Emulator ），如右圖所示

15-3 HTML5 的繪圖

• 15-3-1 使用 JavaScript 在 Canvas 元素繪圖

• 15-3-2 繪出長方形• 15-3-3 繪出直線與多邊形 • 15-3-4 繪出圓形 • 15-3-5 顯示圖片 • 15-3-6 繪出文字內容

15-3-1 使用 JavaScript 在 Canvas 元素繪圖 -說明

• HTML5 提供繪圖功能，可以讓我們在 <canvas>標籤建立的方框中，使用 JavaScript 程式碼呼叫Canvas API 在網頁上繪出 2D 圖形，即 CanvasRenderingContext2D 物件。

• 因為 HTML5 的 <canvas> 標籤只是定義一個透明的繪圖區域，如同一張指定尺寸的畫布，我們需要使用 JavaScript 或 jQuery 程式碼才能在此畫布上繪圖。

15-3-1 使用 JavaScript 在 Canvas 元素繪圖 -

座標系統• 電腦螢幕的座標系統是使用「像素」（ Pixels ）

為單位， Canvas畫布是一個長方形區域，左上角為原點，其座標是 (0, 0) ， X 軸從左到右， Y軸由上到下，如下圖所示：

15-3-1 使用 JavaScript 在 Canvas 元素繪圖 -

<canvas> 標籤• HTML5 提供 <canvas> 標籤可以建立可繪圖的長

方形區域，讓我們使用 JavaScript 程式碼直接在網頁上繪圖或載入圖片。在 <canvas> 標籤一定要指定 id 屬性，以便 JavaScript 程式碼可以取得DOM 物件，如下所示：<canvas id="myCanvas" width="200" height="150"></ca

nvas>

• 標籤碼建立 id 屬性值為 myCanvas 的 HTMLCanvasElement 物件。

15-3-1 使用 JavaScript 在 Canvas 元素繪圖 -

建立 Canvas畫布• 在 JavaScript 程式建立 Canvas畫布，在取得 id 屬性值為myCanvas 的 HTMLCanvasElement 物件後，呼叫 getContext() 方法取得實際的繪圖物件，如下所示：var myCanvas = document.getElementById("myCanvas");var myContext = myCanvas.getContext("2d");

• 上述方法參數是 "2d" ，可以傳回產生的 CanvasRenderingContext2D 物件，這就是在 Canvas畫布上建立的繪圖環境，例如：替畫布填滿背景色彩，如下所示：myContext.fillStyle = "yellow"; myContext.fillRect(0, 0, myCanvas.width, myCanvas.height);

• 程式碼的 fillStyle 屬性可以指定填滿樣式為黃色，然後呼叫 fillRect() 方法填滿長方形的背景色彩，即黃色的長方形背景。

15-3-1 使用 JavaScript 在 Canvas 元素繪圖 -範例

• 在 ASP.NET 程式建立<canvas> 標籤，然後使用 JavaScript 程式碼填滿此繪圖區域，如右圖所示：

15-3-2 繪出長方形 - 相關方法

• CanvasRenderingContext2D 物件可以使用 strokeRect() 和 fillRect() 方法繪出長方形或填滿長方形，相關方法說明如下表所示：

方法 說明strokeRect(x, y, w, h) 使用 strokeStyle 屬性的樣式繪出一個長方形，

(x, y) 是左上角座標， w 是長方形尺寸的寬；h 是長方形的高

fillRect(x, y, w, h) 使用 fillStyle 屬性的樣式繪出一個填滿的長方形，參數和 strokeRect() 方法相同

clearRect(x, y, w, h) 清除長方形區域的內容，參數和 strokeRect()方法相同

15-3-2 繪出長方形 - 程式碼

• 在 JavaScript 程式碼只需指定 fillStyle 屬性的填滿色彩，就可以使用 fillRect() 方法繪出長方形，如下所示：myContext.fillStyle = "red";

myContext.fillRect(10, 10, 50, 50);

• 程式碼是繪出正方形，因為尺寸的寬和高相同都是 50 。同理，繪出沒有填滿的長方形是使用 strokeStyle 屬性和 strokeRect() 方法，如下所示：myContext.strokeStyle = "blue";

myContext.strokeRect(50, 80, 80, 40);

15-3-2 繪出長方形 - 範例

• 在 ASP.NET 程式建立 <canvas> 標籤後，使用JavaScript 程式碼繪出填滿的紅色正方形和一個長方形，如右圖所示：

15-3-3 繪出直線與多邊形 - 繪出直線• 在 Canvas畫布繪出直線，首先呼叫 moveTo() 方法移至開始的起點（下筆點），然後從此起點開始，呼叫 lineTo() 方法繪出至參數座標的直線（繪至目的點），如下所示：myContext.moveTo(0,0);myContext.lineTo(50,50);myContext.lineTo(100,0);myContext.lineTo(150,50);myContext.lineTo(200,0);myContext.stroke();

• 程式碼建立 5 個端點之間的路徑，最後呼叫 stroke() 方法以 strokeStyle 屬性的樣式繪出 5 個端點之間的 4 條直線。

15-3-3 繪出直線與多邊形 - 繪出多邊形• 如果我們建立的路徑最後回到起點，就可以繪出形狀，例如：

多邊形，因為是在同一張畫布繪出直線和多個形狀，所以需要使用 beginPath() 方法表示建立一個新路徑，如下所示：myContext.beginPath();myContext.moveTo(100, 50);myContext.lineTo(50, 75);myContext.lineTo(100, 100);myContext.lineTo(150, 75);myContext.closePath(); myContext.fill();

• 程式碼建立菱形路徑， closePath() 方法可以將最後一個端點連接至起點來圍成形狀，最後呼叫 fill() 方法填滿形狀。

15-3-3 繪出直線與多邊形 - 範例

• 在 ASP.NET 程式建立<canvas> 標籤後，使用 JavaScript 程式碼繪出 4 條藍色直線、一個紅色菱形和填滿的綠色菱形，如右圖所示：

15-3-4 繪出圓形 - 相關方法

• 在 Canvas畫布繪出圓形或填滿圓形是使用 arc()配合 stroke() 和 fill() 方法，如下所示：myContext.beginPath();

myContext.arc(100,100,30,0,Math.PI*2,true);

myContext.closePath();

myContext.stroke();

• 程式碼使用 arc() 方法繪出圓形，圓心座標是 (100, 100) ，半徑 30 ，弧度是 0~Math.PI*2 即一整圈，所以 stroke() 方法繪出的弧形是一個圓形，如果使用 fill() 方法就是填滿圓形。

15-3-4 繪出圓形 - 範例• 在 ASP.NET 程式建

立 <canvas> 標籤後，使用 JavaScript 程式碼分別繪出重疊的一個圓形和填滿圓形，如右圖所示：

15-3-5 顯示圖片 -drawImage() 方法• 在 Canvas畫布可以顯示圖片檔案，這是使用 Im

age() 建構函數建立 Image 物件後，呼叫 drawImage() 方法來顯示圖片，如下所示：var img = new Image();img.onload = function() { myContext.drawImage(this, 0, 0, 200, 150);}img.src = "Flower.jpg";

• 程式碼建立 Image 物件 img 後，註冊 onload 事件處理函數，當圖片載入後就顯示圖片內容，即呼叫 drawImage() 方法，最後 src 屬性值是圖片檔案的 URL 網址。

15-3-5 顯示圖片 - 範例

• 在 ASP.NET 程式建立<canvas> 標籤後，使用 JavaScript 程式碼在畫布顯示 Flower.jpg 圖片檔案，如右圖所示：

15-3-6 繪出文字內容 - 相關方法• 在 Canvas畫布繪出文字內容是使用 fillText() 或 strokeTe

xt() 方法，在呼叫之前，我們需要指定文字對齊和字型的相關樣式，如下所示：myContext.font = "italic 20px 細明體 ";myContext.textBaseline = "top";myContext.textAlign = "center";

• 程式碼指定字型尺寸、字體、樣式和對齊方式後，就可以繪出文字內容，如下所示：myContext.fillStyle = "red";myContext.fillText("ASP.NET 程式設計 ", 100, 10);

• 程式碼呼叫 fillText() 方法，使用 fillStyle 屬性的樣式，在座標 (100, 10) 繪出第 1 個參數的字串內容，同理， strokeText() 方法是使用 strokeStyle 屬性的樣式。

15-3-6 繪出文字內容 - 範例

• 在 ASP.NET 程式建立<canvas> 標籤後，使用 JavaScript 程式碼在 Canvas畫布顯示 2行文字內容，如右圖所示：

15-4 HTML5 的客戶端儲存體 - 種類

• HTML5 支援客戶端儲存體（ Client-side Storage ）功能，可以讓我們在客戶端儲存鍵值成對的資料。 HTML5版的客戶端儲存體主要分成兩種，其主要差異是資料保存期限的不同，如下所示：– localStorage ： localStorage 的資料保存期限比較長，原則上它需要等到 Javascript 程式碼刪除，或使用者自行清空快取才會消失。

– sessionStorage ： sessionStorage 的資料在關閉瀏覽器視窗或標籤頁就會刪除。

15-4 HTML5 的客戶端儲存體 - 方法

• localStorage 和 sessionStorage 物件使用相同 API 來新增、取得和刪除儲存的資料，其說明如下表所示：

方法 說明setItem(key, value) 新增儲存資料，參數 key 是鍵； value 是值

getItem(key) 取出參數 key鍵的儲存值，傳回的是 setItem() 方法的 value 參數值

removeItem(key) 刪除參數 key鍵的儲存資料

15-4 HTML5 的客戶端儲存體 - 程式碼• 使用 localStorage 儲存訪客的姓名資料，如下所

示：localStorage.setItem("name", "陳會安 ");

• 程式碼建立鍵值為 name 的資料。取出 localStorage 物件儲存的資料有兩種方式，如下所示：alert("姓名 : " + localStorage.getItem("name")); alert("Hello " + localStorage.name);

• 程式碼分別使用 getItem() 方法和屬性來取出儲存的資料。刪除資料是使用 removeItem() 方法，如下所示：localStorage.removeItem("name");

15-4 HTML5 的客戶端儲存體 - 範例

• 在 ASP.NET 程式使用localStorage 儲存訪客的姓名資料，如右圖所示：

15-5 HTML5 的定位服務 - 取得定位資料

• HTML5 提供 Geolocation API幫助我們存取行動裝置目前 GPS 的定位資料，包含：緯度（ Latitude ）和經度（ Longitude ）等資料。

• 在 JavaScript 程式碼是使用 navigator 物件的 geolocation 屬性取得 Geolocation 物件，然後呼叫 getCurrentPosition() 方法取得定位資料，如下所示：navigator.geolocation.getCurrentPosition(

successCallback, errorCallback);

15-5 HTML5 的定位服務 -成功呼叫的回撥函數

• 成功呼叫的回撥函數，如下所示：function successCallback(pos) {

$('#result').html("緯度 : " + pos.coords.latitude +

"<br/>經度 : " + pos.coords.longitude);

}

• 函數可以使用參數取得 Coordinates 物件，此物件的屬性是位置資料的緯度和經度。

15-5 HTML5 的定位服務 -失敗呼叫的回撥函數

function errorCallback(error) { switch(error.code) { case 1: alert("錯誤 ! 應用程式沒有權限使用定位服務 !"); break; case 2: alert("錯誤 ! 在取得位址資料時發生錯誤 !"); break; case 3: alert("錯誤 ! 超過等待時間 ..."); break; default: alert(" 不明錯誤 !"); }}

15-5 HTML5 的定位服務 - 範例

• 在 ASP.NET 程式使用Geolocation API 取得行動裝置目前 GPS 的定位資料，如右圖所示：

15-6 HTML5 的離線應用程式 - 說明• HTML5 的應用程式快取（ Application Cache ）

可以讓我們建立離線應用程式（ Offline Application ），將Web 網站或應用程式儲存在客戶端的應用程式快取，換句話說，就算行動裝置沒有 Internet連線或斷線時，我們一樣可以瀏覽 Web 網站或執行應用程式。

• 雖然，傳統瀏覽器快取也提供離線功能，不過並不可靠，因為它是保留網頁，並不包含此網頁所有相關資源檔案，主要是因為根本不知道有哪些相關資源檔案需要保留，而且，瀏覽器快取只會保留一段時間，並不保證下次瀏覽時，它仍然存在。

15-6 HTML5 的離線應用程式 -優點

• HTML5 的應用程式快取可以提供 Web 網站或應用程式三大好處，如下所示：– 離線瀏覽：使用者可以在離線時，依然使用應

用程式。–快速：因為檔案是保留在快取，所以載入資源

檔案將無比迅速。–減少伺服器的負擔：瀏覽器只需下載更新的資源檔案，可以大幅降低伺服器的負擔。

15-6 HTML5 的離線應用程式 -Manifest 檔案• Manifest 檔案是一個副檔名為 .manifest 的文字檔案，其內容是告訴瀏覽器需要快取哪些資源檔案；不快取哪些資源檔案，和如何替代不存在的資源，如下所示：

CACHE MANIFEST# 2012-12-21 Version 1.0.0/index.html/cache.html/styles/main.css/img/logo.gif/scripts/main.js

NETWORK:/login.cshtml

FALLBACK:/ offline.html

15-6 HTML5 的離線應用程式 -Manifest 檔案說明

• CACHE MANIFEST ：在此區段詳細列出需要快取的檔案清單，包含 HTML 網頁、圖片、 CSS樣式檔和 JavaScript 程式檔。當瀏覽器載入 Manifest 檔案後，瀏覽器就會從網站下載此區段的檔案清單，也就是說，當沒有 Internet連線時，這些資源依然可以順利瀏覽。

• NETWORK ：此區段是需要 Internet連線的資源，所以不會儲存在快取，例如：伺服端網頁技術的程式檔案，在離線時，此區段的資源將無法瀏覽，如果使用「 *」號，表示所有其他資源檔案都需要 Internet連線。

• FALLBACK ：此區段列出如果無法存取指定資源檔案時的替代資源檔案，即在離線時，請求沒有儲存在應用程式快取的資源檔案的替代選擇，例如：請求 NETWORK區段的 login.cshtml 檔案，就是替代載入 offline.html ，空格之前的「 /」符號表示根目錄下的所有檔案，我們也可以指明其他目錄或檔案。

15-6 HTML5 的離線應用程式 -在 HTML5 網頁使用應用程式快取

• 我們需要在 HTML5 網頁啟用應用程式快取，也就是在 <html> 標籤加上 manifest 屬性，如下所示：<!DOCTYPE HTML><html manifest="offline.manifest">...</html>

• <html> 標籤有 manifest 屬性的 Manifest 檔案名稱，每一擁有此屬性的網頁，當使用者請求此網頁時，就會下載至應用程式快取，沒有此屬性的網頁並不會下載至快取，除非網頁列名在 Manifest 檔案的 CACHE MANIFEST區段。