2013年2月23日 星期六

HTML5離線功能中如何判定現在是否處於online




這邊使用的是利用離線功能中在上線狀態下applicationCache有可能發生的兩種Event:
一、有更新資料並更新完成:cached
二、無更新資料:noupdate

使用標準javascript的做法:

function online()
{
        //online狀態要做的動作寫在這裡......
}



window.applicationCache.addEventListener("cached", function(e)
{
        online();
}, false);




window.applicationCache.addEventListener("noupdate", function(e)
{
        online();
}, false);




使用jQuery的做法:

var appCache = window.applicationCache;

function online()
{
        //online狀態要做的動作寫在這裡......
}

$(appCache).bind("cached",function( event )
{
online();
});

$(appCache).bind("noupdate",function( event )
{
online();
});




HTML5離線實做

一、在網頁所在資料夾下新增一檔名為.htaccess的檔案,內容如下:

AddType text/cache-manifest .manifest

二、在網頁所在資料夾下新增一檔名為offline.manifest的檔案,內容如下:


CACHE MANIFEST
#This is a comment

CACHE:
index.html
tasklist.js
jquery-1.8.0.min.js
jquery.mobile-1.1.1.min.css
jquery.mobile-1.1.1.min.js

PS.紅色部分為要在離線時使用的檔案列表......

三、在一定會存取的HTML檔案中(例如:index.html)修改內容如下:

將:
<html>
改成:
<html manifest="offline.manifest">

如此一來就大功告成了,值得注意的是當有修改到上面紅色列表中的檔案時,要記得將瀏覽器執行“清除瀏覽資料”的動作,否則很容易會因為修改尚未即時update而誤以為是BUG!