上一篇文章:使用 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設定檔!
執行步驟如下:
左上方的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