iT邦幫忙

DAY 23
6

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 23

MIS2000Lab.的「HTML5 認證考試,從零開始」#23-- 使用Application Cache加入離線支援

  • 分享至 

  • xImage
  •  

上一篇文章:使用 Indexed Database API 儲存結構化資料
http://ithelp.ithome.com.tw/question/10160292

Session storage、local storage與IndexedDB API提供程式設計師可以儲存與管理「使用者設備(user’s device)」裡的資料。

HTML5(或是傳統網頁)技術都可以把您觀賞的網頁與其他資源(例如圖片、影片)放在您自己(使用者)的設備上(這種動作稱為「快取」,cache),下載的資訊可供重複使用而不需每次都得上網擷取相同的資料。

如此一來,資料已經存放在用戶端(Client-side),便可以減少重複存取的動作與網路流量,加速使用者的瀏覽經驗。

這些離線的資源(已經存放在使用者的設備上),能讓JavaScript與Application Cache API直接存取,不需要每次使用都要連網。

也可以透過JavaScript偵測連網狀態(目前是否連線中?)以便上網擷取最新版本的資源 或是沿用既有(快取)的資源即可。

==== 設定Applicatiion Cache ====

快取清單檔案(cache manifest file)定義了哪些資源必須被瀏覽器放在Application Cache裡面。

設定檔區分了這些離線資源應該被放在CACHE、NETWORK或是FALLBACK的區域裡面,

讓網頁或程式可以在連線時(On-line)、離線時(Off-line)去存取哪些資源。

基本的清單檔案(manifest file)內容如下,副檔名為 .manifest

CACHE MANIFEST   
#註解:共有CACHE、NETWORK或是FALLBACK三個區塊
#      副檔名為 .manifest。

CACHE:
index.html
verification.js
site.css
graphics/logo.jpg

NETWORK:
login
#在此寫上對應的URL網址
#註解:請用「#」符號加入註解文字

FALLBACK:
ajax/account/ noCode.html
#註解:AJAX/account/ 路徑中的所有URL都被替換為noCode.htm網頁。

搭配了manifest設定檔的網頁:

<!doctype html>

<html manifest="appcache.manifest">
 
     <title>A Web Page</title>
  <script src="library.js"></script>
  <link rel="stylesheet" href="stylesheet.css">
 

 <body onload="doSomething();">
  <p>Results go here: <span id="results">Unknown</span></p>
 

[img=604,446]http://ithelp.ithome.com.tw/upload/images/20141018/2014101821072854426610386a3_resize_600.jpg[/img]

您必須修改Web Server的設定,

下圖以Windows 7的IIS為例(Windows VISTA與後續新版本的IIS操作都差不多)。

請看下面兩張圖片的連續說明,

「MIME類型」必須設定「text/manifest」才能啟動網頁的Application Cache離線功能。

[img=604,525]http://ithelp.ithome.com.tw/upload/images/20141018/20141018211056544266e01f4d3_resize_600.jpg[/img]

[img=604,420]http://ithelp.ithome.com.tw/upload/images/20141018/20141018211108544266ec7f86a_resize_600.jpg[/img]

重點!如果Web Server(如IIS)不做好上圖的設定,MIME型態改為「text/manifest」。

瀏覽器將不會使用快取清單裡面的Manifest設定檔!

執行步驟如下:

  1. 先瀏覽網頁(Manifest_01.html)。
  2. 將網站關閉。模擬「離線(off-line)」的狀態,網站已經關閉,任何瀏覽器”理論上”無法連網(如下圖,左上方Chrome瀏覽器的畫面出現錯誤訊息)。
  3. 故意重新瀏覽網頁(瀏覽器裡面按下F5按鍵),您可以發現下圖的狀態。(右下方的IE瀏覽器)原本網頁仍可運作,圖片也可以切換。

左上方的Chrome瀏覽器連不上網站,證明此時為「離線」狀態。因此離線快取的功能的確運作中!

[img=604,603]http://ithelp.ithome.com.tw/upload/images/20141018/20141018211541544267fd85674_resize_600.jpg[/img]

抱歉,因為今天到外地上課,比較晚回家,臨時整理的文章稍嫌亂了一點

不要走開,馬上回來

下一篇文章:自適應使用者介面(Adaptive User Interface)#1
http://ithelp.ithome.com.tw/question/10160610

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#22-- 使用 Indexed Database API
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#24-- 自適應使用者介面 #1
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言