遺忘技術的角落: HTML5

顯示具有 HTML5 標籤的文章。顯示所有文章

2012年12月7日星期五

How to use HTML Offline Application Cache(HTML5中的離線應用程式快取)

一般來說，在開發手機或是行動裝置的應用程式大部份都會遇到離線的問題，假設不想要在離線時出現錯誤的UI畫面，那麼可以使用HTML5 Offline Application Cache機制來解決此問題，剛好之前上了星星老師的課，稍微做了一下筆記，設計方式如下：

1.先準備一份HTML，用來呈現一張圖片，HTML TAG如下：

瀏覽HTML看起來如下：

模擬一下網路通訊離線，把網路通訊先斷線，則預設瀏覽起來的畫面如下：

2.接著新增一個用來快取網頁離線資料和內容的manifest定義檔，這邊命名為：offline.manifest，第一行一定要撰寫：CACHE MANIFEST，且前面不可以有空白或是將此行放在第二行，如果這樣的話CACHE將會失效，然後想要快取的內容放在CACHE:這行之下，範例manifest內容如下：

3.將離線快取的manifest定義檔引用至網頁中，作法為在html標籤中加入manifest屬性，設定如下：<html manifest="offline.manifest">

4.因為亞當斯是使用Visual Srudio 2010開發ASP.NET測試功能，所以先把此網頁執行起來，接著把Web 開發伺服器停止，用來模擬連線

5.最後，重新refresh一下網頁，可以看到圖片和網頁已經被CACHE快取了，大功告成，這功能真是太強大了，將來運用在手機的網頁上是非常好用的功能!

JavaScript navigator.onLine連線或離線偵測模式

JavaScript 的navigator.onLine屬性是一個唯讀的布林值，主要的功能目的為判斷系統是否處於連線或是離線模式，假設運用在手機的網頁上就可以進行判斷手機目前的狀況是否可以進行網路通訊，以達到不同狀態時的處理情況。

以下是簡易的設計方式以及執行結果，操作步驟如下：

1. 先準備HTML，有一個span和一個button，如下內容：

<span id="status" class="offline">Unknow</span>
<button id="check"> Check Connection </button>

並準備css來用呈現UI，有Online和Offline兩個畫面，分別呈現字型綠色和紅色：

2.撰寫JavaScript先判斷瀏覽器的onLine屬性定義是否瀏覽器有支援，使用typeof(navigator.onLine) != "undefined" 去判斷字串是否相同會比較保險一點，程式也比較不容易出錯：

3.在按鈕上註冊click事件後，進行判斷，此時使用navigator.onLine進行判斷瀏覽器是否連線或是離線：

4.開啟瀏覽器執行：

但是以上的程式碼必須每一次都手動去按下按鈕才能知道是否連線，那麼是否有辦法可以隨時讓網頁自動去判斷目前系統是否連線呢？答案是可以的，做法就是在init事件中，先進行註冊online和offline事件，並搭配checkHandler() 檢核函式，就可以在往後系統通訊網路連線或離線時，自動去觸發並進行UI的更新，程式碼修改如下：

2012年9月4日星期二

通用的 JavaScript 事件註冊判斷程式

今天星星老師在介紹HTML5內容時，恰好有提到註冊JavaScript的事件，然而現今瀏覽器有很多，而每個不同瀏覽器都支援不同的JavaScript運作機制，不見得每一個都相同，因此假設想要讓所有瀏覽器去判斷是否支援某一個屬性或功能，且盡量可以支援通用的設計方式，以下有一段事件註冊判斷程式，可以用來註冊事件!!

以下這段Scrip可用來判斷瀏覽器是否支援contentEditable 這個屬性功能，判斷是否IE支援，也有支援舊版本瀏覽器的語法!

目前大部分的瀏覽器都支援：window.addEventListener，若是IE不支援的話，那麼可以使用window.attachEvent，更舊的版本則是使用：window.onload ，請參考以下程式碼：

function init() {
    if (document.createElement("span").contentEditable != undefined) {
      document.getElementById("status").innerHTML = "This browser is support.";
    }
    else {
      document.getElementById("status").innerHTML = "This browser is not support.";
    }
}
</script>