Download - HTML5 API
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區段。