iT邦幫忙

DAY 25
8

HTML5試試看系列 第 25

[HTML5試試看-25] 離線程式

HTML5引入了一個離線運作的機制,這個機制可以讓我們在離線的狀態下還也以使用設定好的網頁,並且在恢復連線時可以更新資料。這些只要在html標籤增加一個屬性,搭配設定檔案就可以做到。
從規格書看起來,這個機制分成三個部份:

  1. 在html標籤裡面指定manifest檔案
  2. 在manifest檔案裡面指定離線資源
  3. API及相關的事件

第一件要做的事情,就是在html標籤上設定manifest屬性,例如:

<html lang="zh-TW" manifest="test642.manifest">

然後編輯好manifest檔案。manifest檔案結構大致上是這樣的:

  1. 第一行:CACHE MANIFEST
  2. CACHE區塊:在「CACHE:」這一行之後就是CACHE區塊,放置明確宣告的資源URL(如果不在任何區塊內,預設就是CACHE區塊)
  3. NETWORK區塊:在「NETWORK:」這一行之後就是NETWORK區塊,指定需要有網路連線到伺服器才能使用的資源
  4. FALLBACK區塊:在「FALLBACK:」這一行之後就是FALLBACK區塊,指定某個namespace(網址)發生錯誤(EX. 要使用必須連得上網站才能使用的資源)時,要顯示的資源

規格對於伺服器傳送manifest檔案有特殊要求,就是Content-Type檔頭必須設定為「text/cache-manifest」,否則無法正常運行。

不過即使有資源更新,不見得就可以顯示在頁面上。測試碰到的情況常常是,改過網頁,但是重新載入時卻沒有更新...常常要清掉cache,重啟瀏覽器XD 所以在開發時會比較麻煩。也許可以考慮,測試初期,把會變動的資源先放到NETWORK區塊,等測試無誤再來修正manifest檔案,不過這對cache host(也就是設定manifest那個網頁)沒作用Orz

在離線應用上,HTML5制定了ApplicationCache介面:

interface ApplicationCache {
  // update status
  const unsigned short UNCACHED = 0;
  const unsigned short IDLE = 1;
  const unsigned short CHECKING = 2;
  const unsigned short DOWNLOADING = 3;
  const unsigned short UPDATEREADY = 4;
  const unsigned short OBSOLETE = 5;
  readonly attribute unsigned short status;
  // updates
  void update();
  void swapCache();
  // events
	attribute Function onchecking;
	attribute Function onerror;
	attribute Function onnoupdate;
	attribute Function ondownloading;
	attribute Function onprogress;
	attribute Function onupdateready;
	attribute Function oncached;
	attribute Function onobsolete;
};
ApplicationCache implements EventTarget;

要測試瀏覽器是否支援ApplicationCache,只要測試看看有沒有window.applicationCache這個物件存在就可以。不過...通常只要在需要時refresh網頁就可以,呼叫update()通常沒作用(因為該做的事情,在載入網頁時就做好了),而swapCache()還會導致INVALID_STATE_ERR錯誤。

在一般的使用狀況下,通常只要設定好manifest檔案就可以離線運作了,複雜的應用程式,可能還需要搭配locationStorage、sessionStorage還有Web SQL等等方式,來存放應用程式需要的資料。接下來用一個簡單的例子,觀察一下applicationCache的事件及使用狀況:

照例網頁程式塞不進來...所以還是放到gist:
https://gist.github.com/663725

test642.manifest:

CACHE MANIFEST
#test642.html
test642a.html
NETWORK:
test642.js

test642.js:

var data = {
	"currentTime": new Date().getTime(),
 	"currentPos": [92,12],
	"mu": "so be it"
};

可以用這個連結測試:http://www.fillano.idv.tw/test642.html

一開始進入網頁時,會出現下載資源並且cached的訊息:

如果有更新,他會出現下載資源並且updateready的訊息:

如果都沒更新,那載入網頁就出現noupdate的訊息:

點選update按鈕,同樣會出現noupdate訊息。(需要的資源在網頁更新時候應該都更新過了,所以手動update沒有什麼作用)點選game按鈕,會跳出一個視窗,裡面使用到比較多的圖片資源:

可以用滑鼠操作人物,走到左下方兩個樹之間的缺口,進入另一個網頁。這些網頁使用過後,使用的資源都會特別放進ApplicationCache,所以即使無法連線,在瀏覽器網址列打上網址,同樣可以操作。

明天再接再厲,來測試一下GeoLocation吧。

參賽文章


上一篇
[HTML5試試看-24] 儲存 - Web SQL及其他資料庫
下一篇
[HTML5試試看-26] GeoLocation
系列文
HTML5試試看30

1 則留言

0
fillano
iT邦超人 1 級 ‧ 2010-11-05 14:43:40

補充一下,沒有看到IE9 Beta...因為他還不支援applicationCache。

我要留言

立即登入留言