前面已經總結了主要的API擴展,下面幾個擴展只有在專用的場合才會發揮最大的作用,這裡簡單了解一下。以下這些特性無一例外,IE均不支援。應用程式快取和服務端訊息在其他的主流瀏覽器中都是支援的。桌面通知目前只有Chrome支援。
應用快取
很多時候,我們需要快取一些不常改變的頁面來提高存取速度;而且對於某些應用,我們也希望在離線的情況下也可以使用。在HTML5中,你可以透過一個稱為「應用程式快取」的技術很方便的實作這些功能。
在應用程式快取的實作中,HTML5允許我們建立一個快取manifest檔案來方便的產生一個離線版的應用程式。
實作步驟:
1. 啟用頁面的緩存,很簡單,只需要在document的html中包含manifest屬性:
.. .
每一個包含這個manifest屬性的頁面當使用者造訪的時候都會被快取。如果manifest屬性沒有指定的話,將不會快取(除非網頁直接在manifest檔中指定)。 manifest檔案副檔名還沒有統一的標準,推薦的副檔名是".appcache"。
2. 伺服器端設定manifest檔案的MIME類型
一個manifest檔案需要被正確的MIME-type支持,這種檔案類型為"text/cache-manifest"。必須在所使用的web伺服器上進行設定。例如:Apache 中可在 .htaccess 中新增: AddType text/cache-manifest manifest。
3.寫manifest檔
manifest檔是一個簡單的文字文件,告訴了瀏覽器去緩存什麼內容(或不緩存什麼內容)。
manifest檔案包含以下三個部分:
• CACHE MANIFEST - 在這個清單標題下的檔案將會在下載後被快取。
• NETWORK - 在這個清單標題下的檔案將要求連接到伺服器,不會進行快取。
• FALLBACK - 在這個清單標題下的檔案如果無法存取時,則顯示特定的頁面。
完整的一個檔案如下面的例子所示:
程式碼如下:
程式碼如下:
程式碼如下:
程式碼如下:
以下是網上高手做這個應用的一些經驗
:
1. 收到多個訊息時確保只出現一條通知;
這個問題比較好解決,因為通知對象擁有一個名為"replaceId"的屬性。指定該屬性後,只要是相同replaceId的通知視窗彈出,就會覆寫先前彈出的視窗。在實際專案中是給所有的彈出視窗賦了一個相同的replaceId。不過要注意的是,這種覆蓋行為只在同域下才有效。 2. 當使用者處於IM出現的頁面中時(頁面處於Focus狀態)將不出現通知;
這個問題主要是在於判斷瀏覽器視窗是否處於Focus狀態,目前除了監聽window的onfocus和onblur事件之外,貌似沒有更好的方式。在專案中就是透過這種方式來記錄視窗的Focus狀態,然後當訊息到達時根據Focus狀態來判斷是否有彈出視窗。
使用該方法需要注意的地方是,事件註冊的事件點應該盡可能的靠前,如果註冊太晚則當用戶打開頁面後再離開就會很容易出現狀態的誤判。
3. 當使用者使用多Tab開啟多個存在IM的頁面時,只要有一個頁面處於Focus狀態將不出現通知;
多重頁間的狀態共用可以透過本機儲存來實現:
• 瀏覽器視窗Focus時修改本機儲存體中指定key的值為"focus"
• 瀏覽器視窗Blur時修改本機儲存指定key的值為"blur"。
要注意的是,Chrome下從一個Tab切換到另一個Tab時,Blur有可能比Focus後寫入儲存中,因此修改Focus狀態時需要非同步處理。
/*window on fo資料*/
//用延遲是為了解決多個Tab之間切換時,總是讓Focus覆蓋其他Tab的Blur事件
//註: 如果在點擊Tab之前沒有Focus到document上則點擊Tab是不會觸發Focus的
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100);
/*window on blur> Storage.setItem( 'kxchat_focus_win_state', 'blur' );
實現以上狀態共用後,新的訊息到達後,只需要查看本地儲存中'kxchat_focus_win_state'的值是否為blur,如果為blur才彈出視窗。
4. 如何讓使用者點擊通知浮動層即可定位到具體的聊天視窗
通知視窗支援onclick等事件回應,而回應函數中的作用範圍屬於建立該視窗的頁面。如下程式碼:
var n = NotmNotation (
img,
title,
content
);
//確保只有一個提醒
n.replaceId = this.replaceId;
n.onclick = function() {
//啟動彈出該通知視窗的瀏覽器視窗
window.focus();
//開啟IM視窗
WM.openWinByID( data );
//關閉通知視窗
n.cancel();
};
在onclick的回應函數中存取的window物件即屬於目前建立頁面,因此可以很方便的與目前頁面進行互動。以上程式碼便實現了點擊彈出視窗會跳到對應的瀏覽器視窗和開啟IM視窗。
:頁面中的相關事件很多時候具有不確定的時序性,所以我們的程式碼盡量不要假設某些事件觸發的順序是一定的。例如上面的blur和focus事件
實用參考:官方文件:
http://www.w3schools.com/html5/html5的一個中文教學:
http: //www.gbin1.com/tutorials/html5-tutorial/