突襲HTML5之Javascript API擴充5—其他擴充(應用程式快取/服務端訊息/桌面通知)_html5教學技巧

前面已經總結了主要的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 - 在這個清單標題下的檔案如果無法存取時，則顯示特定的頁面。
完整的一個檔案如下面的例子所示：

複製程式碼

程式碼如下:

程式碼如下:



程式碼如下:



程式碼如下:

程式碼如下:

CACHE MANIFEST

# 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWOWORKRK: <: asp>FALLBACK:

/html5/ /offline.html

提示：
#開頭的代表註解。

*可以用表示所有的其它資源或文件。例如：





複製程式碼


程式碼如下:

NETWORK:

表示所有的資源或檔案都不會快取。

4.更新快取

一旦一個應用程式被緩存，它將保持快取除非一下情況發生：

• 用戶刪除了快取
• manifest檔案被修改
• 應用快取被程式修改
所以一旦檔案被緩存，除了人為的修改情況，瀏覽器將會持續的顯示快取版本內容，即使你修改了伺服器檔案。為了讓瀏覽器更新緩存，你只能去修改manifest檔。
：以"#"開始的行是註解行，但是可以有其它用處。如果你的修改只牽涉到一個圖片或javascript功能，那些變化是不會被重新快取的。在註解中更新日期和版本是讓瀏覽器重新快取你的檔案的一個方法
：瀏覽器可以有很多不同大小限制的快取資料（有些瀏覽器允許5M的快取資料）。

複製程式碼程式碼如下: 服務端訊息 還有一個常用的場景是：當服務端的資料發生變化時，如何讓客戶端知道？這在以前的做法是：頁面主動去查詢服務端是否有更新。根據前面的介紹，我們知道，使用WebSocket可以實現雙向通訊。這裡再介紹另一個HTML5中新功能：服務端訊息(Server-Sent Events)。 在HTML5中，承載這項特性的物件是EventSource物件。 使用步驟如下： 1.檢查瀏覽器對EventSource物件的支持性，這個大家都知道了：

複製程式碼

程式碼如下:

if(typeof(SourceSource)! "undefined")
{
// Yes! Server-sent events support!
// Some code.....
}else {
// Sorry! No server-sent events support..
}

2.伺服器端的傳送訊息代碼
伺服器端的傳送更新訊息很簡單：設定content-type頭訊息為」text/event-stream"後，你就可以發送事件。以ASP代碼為例：

複製代碼代碼如下:

Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> 伺服器時間" & now())
Response.Flush()
%>

3.瀏覽器端的接收消息代碼

複製代碼程式碼如下:

var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
document.getElementById("result"). innerHTML =event.data "
";
};

代碼說明：
• 建立一個EventSource對象，指定發送更新的頁面URL （這裡是demo_see.jsp）
• 每一個更新接收後，onmessage事件就會觸發
• 當onmessage時間觸發，將得到的資料設定到id="result"的元素中
EventSource物件除了onmessage事件外，還有處理錯誤的onerror事件，連線建立的onopen事件等。

桌面通知 - 準HTML5特性 桌面通知功能能讓瀏覽器即使是最小化狀態也能將訊息通知使用者。這和WebIM是最天然的結合。不過，目前支援該特性的瀏覽器只有Chrome。彈跳窗是大家深惡痛絕的東西，所以開啟這項特性需要得到使用者的許可。

複製程式碼程式碼如下:

<script> <mistion🎜> callback) { <div class="msgborder" id="phpcode192">window.webkitNotifications.requestPermission(callback); <br />} <br />function showNotification() { <br />//透過window.webkitNotifications判斷瀏覽器是否支援 (!!window .webkitNotifications) { <br />if (window.webkitNotifications.checkPermission() > 0) { <br />RequestPermission(showNotification); <br />} else { <br />var notification =window.web🎜>} else { <br />var notification =window.webkitNotifications. ","Title","Body"); <br />notification.ondisplay = function() { <br />setTimeout('notification.cancel()', 5000); <br />} <br />notification.show() ; <br />} <br />} <br />} <br /></script>


瀏覽器中開啟此頁面，就會看到桌面的右下角彈出一個持續5秒鐘的訊息視窗。
這項特性使用起來很簡單，但是在實際操作的過程中，應該盡量減少通知功能對使用者的干擾，最大程度的減少通知功能的出現。

以下是網上高手做這個應用的一些經驗
：
1. 收到多個訊息時確保只出現一條通知; 這個問題比較好解決，因為通知對象擁有一個名為"replaceId"的屬性。指定該屬性後，只要是相同replaceId的通知視窗彈出，就會覆寫先前彈出的視窗。在實際專案中是給所有的彈出視窗賦了一個相同的replaceId。不過要注意的是，這種覆蓋行為只在同域下才有效。 2. 當使用者處於IM出現的頁面中時(頁面處於Focus狀態)將不出現通知;
這個問題主要是在於判斷瀏覽器視窗是否處於Focus狀態，目前除了監聽window的onfocus和onblur事件之外，貌似沒有更好的方式。在專案中就是透過這種方式來記錄視窗的Focus狀態，然後當訊息到達時根據Focus狀態來判斷是否有彈出視窗。

複製程式碼

程式碼如下:

$(window). ', this.windowBlur).bind( 'focus', this.windowFocus);

使用該方法需要注意的地方是，事件註冊的事件點應該盡可能的靠前，如果註冊太晚則當用戶打開頁面後再離開就會很容易出現狀態的誤判。
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/