前面已經(jīng)總結(jié)了主要的API擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知),下面的幾個(gè)只有在特定的場(chǎng)合才能發(fā)揮它的潛質(zhì)，無(wú)一例外，IE均不支持,桌面通知目前只有Chrome支持,感興趣的朋友可以了解下，或許對(duì)你有所幫助
應(yīng)用緩存
很多時(shí)候，我們需要緩存一些不經(jīng)常改變的頁(yè)面來(lái)提高訪問(wèn)速度；而且對(duì)于某些應(yīng)用，我們也希望在離線的情況下也可以使用。在HTML5中，你可以通過(guò)一個(gè)稱之為“應(yīng)用緩存”的技術(shù)很方便的實(shí)現(xiàn)這些功能。
在應(yīng)用緩存的實(shí)現(xiàn)中，HTML5允許我們創(chuàng)建一個(gè)緩存manifest文件來(lái)方便的生成一個(gè)離線版的應(yīng)用。
實(shí)現(xiàn)步驟：
1. 啟用頁(yè)面的緩存，很簡(jiǎn)單，只需要在document的html中包含manifest屬性：
代碼如下:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每一個(gè)包含這個(gè)manifest屬性的頁(yè)面當(dāng)用戶訪問(wèn)的時(shí)候都會(huì)被緩存。如果manifest屬性沒(méi)有指定的話，將不會(huì)緩存（除非網(wǎng)頁(yè)被直接在manifest文件中指定）。manifest文件擴(kuò)展名還沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)，推薦的擴(kuò)展名是".appcache"。
2. 服務(wù)器端配置manifest文件的MIME類型
一個(gè)manifest文件需要被正確的MIME-type支持，這種文件類型為"text/cache-manifest"。必須在所使用的web服務(wù)器上進(jìn)行配置。例如：Apache 中可在 .htaccess 中添加： AddType text/cache-manifest manifest。
3.編寫(xiě)manifest文件
manifest文件是一個(gè)簡(jiǎn)單的文本文件，告訴了瀏覽器去緩存什么內(nèi)容（或者不緩存什么內(nèi)容）。
manifest文件包含下面三個(gè)部分：
• CACHE MANIFEST - 在這個(gè)列表標(biāo)題下的文件將會(huì)在下載后被緩存。
• NETWORK - 在這個(gè)列表標(biāo)題下的文件將要求連接到服務(wù)器，不會(huì)進(jìn)行緩存。
• FALLBACK - 在這個(gè)列表標(biāo)題下的文件如果不能訪問(wèn)時(shí)，則顯示特定的頁(yè)面。
完整的一個(gè)文件如下面的例子所示：
代碼如下:
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /offline.html
提示：
#開(kāi)頭的代表注釋。
*可以用表示所有的其它資源或者文件。例如：
代碼如下:
NETWORK:
*
表示所有的資源或者文件都不會(huì)緩存。
4.更新緩存
一旦一個(gè)應(yīng)用被緩存，它將保持緩存除非一下情況發(fā)生：
• 用戶刪除了緩存
• manifest文件被修改
• 應(yīng)用緩存被程序修改
所以一旦文件被緩存，除了人為的修改情況，瀏覽器將會(huì)持續(xù)的顯示緩存版本內(nèi)容，即使你修改了服務(wù)器文件。為了讓瀏覽器更新緩存，你只能去修改manifest文件。
：以"#"開(kāi)始的行是注釋行，但是可以有其它用處。如果你的修改只涉及到一個(gè)圖片或者javascript功能，那些變化是不會(huì)被重新緩存的。在注釋中更新日期和版本是讓瀏覽器重新緩存你的文件的一個(gè)方法
：瀏覽器可以有很多不同大小限制的緩存數(shù)據(jù)（有些瀏覽器允許5M的緩存數(shù)據(jù)）。
代碼如下:
<strong>服務(wù)端消息</strong>
還有一個(gè)經(jīng)常使用的場(chǎng)景是：當(dāng)服務(wù)端的數(shù)據(jù)發(fā)生變化時(shí)，如何讓客戶端知道？這在以前的做法是：頁(yè)面主動(dòng)去查詢服務(wù)端是否有更新。根據(jù)前面的介紹，我們知道，使用WebSocket可以實(shí)現(xiàn)雙向通訊。這里再介紹另外一個(gè)HTML5中新特性：服務(wù)端消息(Server-Sent Events)。
在HTML5中，承載這項(xiàng)特性的對(duì)象是EventSource對(duì)象。
使用步驟如下：
1.檢查瀏覽器對(duì)EventSource對(duì)象的支持性，這個(gè)大家都知道了：
代碼如下:
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}else {
// Sorry! No server-sent events support..
}
2.服務(wù)器端的發(fā)送消息代碼
服務(wù)器端的發(fā)送更新消息很簡(jiǎn)單：設(shè)置content-type頭信息為”text/event-stream"后，你就可以發(fā)送事件。以ASP代碼為例：
代碼如下:
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> 服務(wù)器時(shí)間" & now())
Response.Flush()
%>
3.瀏覽器端的接收消息代碼
代碼如下:
var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data + "
";
};
代碼說(shuō)明：
• 創(chuàng)建一個(gè)EventSource對(duì)象，指定發(fā)送更新的頁(yè)面URL （這里是demo_see.jsp）
• 每一次一個(gè)更新接收后，onmessage事件就觸發(fā)
• 當(dāng)onmessage時(shí)間觸發(fā)，將得到的數(shù)據(jù)設(shè)置到id="result"的元素中
EventSource對(duì)象除了onmessage事件外，還有處理錯(cuò)誤的onerror事件，連接建立的onopen事件等。
桌面通知 - 準(zhǔn)HTML5特性
桌面通知功能能夠讓瀏覽器即使是最小化狀態(tài)也能將消息通知給用戶。這和WebIM是最為天然的結(jié)合。不過(guò)，目前支持該特性的瀏覽器只有Chrome。彈窗是大家深惡痛絕的東西，所以開(kāi)啟這項(xiàng)特性需要得到用戶的許可。
代碼如下:
<script>
function RequestPermission(callback) {
window.webkitNotifications.requestPermission(callback);
}
function showNotification() {
//通過(guò)window.webkitNotifications判斷瀏覽器是否支持notification
if (!!window.webkitNotifications) {
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(showNotification);
} else {
var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");
notification.ondisplay = function() {
setTimeout('notification.cancel()', 5000);
}
notification.show();
}
}
}
</script>
瀏覽器中打開(kāi)此頁(yè)面，就會(huì)看到桌面的右下角彈出一個(gè)持續(xù)5秒鐘的消息窗口。
這項(xiàng)特性使用起來(lái)很簡(jiǎn)單，但是在實(shí)際操作的過(guò)程中，應(yīng)該盡量減少通知功能對(duì)用戶的干擾，最大程度的減少通知功能的出現(xiàn)。
下面是網(wǎng)上高手做這個(gè)應(yīng)用的一些經(jīng)驗(yàn)：
1. 收到多條消息時(shí)確保只出現(xiàn)一條通知;
這個(gè)問(wèn)題比較好解決，因?yàn)橥ㄖ獙?duì)象擁有一個(gè)名為"replaceId"的屬性。指定該屬性后，只要是相同replaceId的通知窗口彈出，都會(huì)覆蓋之前彈出的窗口。在實(shí)際項(xiàng)目中是給所有的彈出窗口賦了一個(gè)相同的replaceId。不過(guò)需要注意的是，這種覆蓋行為只在同域下有效。
2. 當(dāng)用戶處于IM出現(xiàn)的頁(yè)面中時(shí)(頁(yè)面處于Focus狀態(tài))將不出現(xiàn)通知;
這個(gè)問(wèn)題主要是在于判斷瀏覽器窗口是否處于Focus狀態(tài)，目前除了監(jiān)聽(tīng)window的onfocus和onblur事件之外，貌似沒(méi)有更好的方式。在項(xiàng)目中就是通過(guò)這種方式來(lái)記錄窗口的Focus狀態(tài)，然后當(dāng)消息到達(dá)時(shí)根據(jù)Focus狀態(tài)來(lái)判斷是否彈出窗口。
代碼如下:
$(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);
使用該方法需要注意的地方是，事件注冊(cè)的事件點(diǎn)應(yīng)該盡可能的靠前，如果注冊(cè)太晚則當(dāng)用戶打開(kāi)頁(yè)面后再離開(kāi)就會(huì)很容易出現(xiàn)狀態(tài)的誤判。
3. 當(dāng)用戶使用多Tab開(kāi)啟多個(gè)存在IM的頁(yè)面時(shí)，只要有一個(gè)頁(yè)面處于Focus狀態(tài)將不出現(xiàn)通知;
多頁(yè)面間的狀態(tài)共享可以通過(guò)本地存儲(chǔ)來(lái)實(shí)現(xiàn)：
• 瀏覽器窗口Focus時(shí)修改本地存儲(chǔ)中指定key的值為"focus"
• 瀏覽器窗口Blur時(shí)修改本地存儲(chǔ)中指定key的值為"blur"。
需要注意的是，Chrome下從一個(gè)Tab切換到另一個(gè)Tab時(shí)，Blur有可能比Focus后寫(xiě)入存儲(chǔ)中，因此修改Focus狀態(tài)時(shí)需要異步處理。
代碼如下:
/*window on focus事件*/
//用延時(shí)是為了解決多個(gè)Tab之間切換時(shí)，始終讓Focus覆蓋其他Tab的Blur事件
//注: 如果在點(diǎn)擊Tab之前沒(méi)有Focus到document上則點(diǎn)擊Tab是不會(huì)觸發(fā)Focus的
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100);
/*window on blur事件*/
Storage.setItem( 'kxchat_focus_win_state', 'blur' );
實(shí)現(xiàn)以上狀態(tài)共享后，新的消息到達(dá)后，只需要查看本地存儲(chǔ)中’kxchat_focus_win_state’的值是否為blur，如果為blur才彈出窗口。
4. 如何讓用戶點(diǎn)擊通知浮動(dòng)層即可定位到具體的聊天窗口
通知窗口支持onclick等事件響應(yīng)，而響應(yīng)函數(shù)中的作用范圍屬于創(chuàng)建該窗口的頁(yè)面。如下代碼：
代碼如下:
var n = dn.createNotification(
img,
title,
content
);
//確保只有一個(gè)提醒
n.replaceId = this.replaceId;
n.onclick = function(){
//激活彈出該通知窗口的瀏覽器窗口
window.focus();
//打開(kāi)IM窗口
WM.openWinByID( data );
//關(guān)閉通知窗口
n.cancel();
};
在onclick的響應(yīng)函數(shù)中訪問(wèn)的window對(duì)象即屬于當(dāng)前創(chuàng)建頁(yè)面，因此可以很方便的與當(dāng)前頁(yè)面進(jìn)行交互。以上代碼便實(shí)現(xiàn)了點(diǎn)擊彈出窗口會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的瀏覽器窗口和打開(kāi)IM窗口。
頁(yè)面中的相關(guān)事件很多時(shí)候具有不確定的時(shí)序性，所以我們的代碼盡量不要假設(shè)某些事件觸發(fā)的順序是一定的。比如上面的blur和focus事件
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試