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