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

DAY 23

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

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

cache html asp.net 快取鐵人賽 html5 mis2000lab manifest 網頁application 緩存 html

mis2000lab

2014-10-18 21:15:44

4181 瀏覽

上一篇文章：使用 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設定檔！

執行步驟如下：