溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關HTML5中Javascript API如何擴展應用緩存和服務端消息及桌面通知，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
應用緩存和服務端消息在其他的主流瀏覽器中都是支持的。桌面通知目前只有Chrome支持。
應用緩存
很多時候，我們需要緩存一些不經常改變的頁面來提高訪問速度；而且對于某些應用，我們也希望在離線的情況下也可以使用。在HTML5中，你可以通過一個稱之為“應用緩存”的技術很方便的實現這些功能。
在應用緩存的實現中，HTML5允許我們創建一個緩存manifest文件來方便的生成一個離線版的應用。
實現步驟：
1. 啟用頁面的緩存，很簡單，只需要在document的html中包含manifest屬性：
代碼如下:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每一個包含這個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
NETWORK:
login.asp
FALLBACK:
/html5/ /offline.html
提示：
#開頭的代表注釋。
*可以用表示所有的其它資源或者文件。例如：
代碼如下:
NETWORK:
*
表示所有的資源或者文件都不會緩存。
4.更新緩存
一旦一個應用被緩存，它將保持緩存除非一下情況發生：
• 用戶刪除了緩存
• manifest文件被修改
• 應用緩存被程序修改
所以一旦文件被緩存，除了人為的修改情況，瀏覽器將會持續的顯示緩存版本內容，即使你修改了服務器文件。為了讓瀏覽器更新緩存，你只能去修改manifest文件。
：以"#"開始的行是注釋行，但是可以有其它用處。如果你的修改只涉及到一個圖片或者javascript功能，那些變化是不會被重新緩存的。在注釋中更新日期和版本是讓瀏覽器重新緩存你的文件的一個方法
：瀏覽器可以有很多不同大小限制的緩存數據（有些瀏覽器允許5M的緩存數據）。
代碼如下:
<strong>服務端消息</strong>
還有一個經常使用的場景是：當服務端的數據發生變化時，如何讓客戶端知道？這在以前的做法是：頁面主動去查詢服務端是否有更新。根據前面的介紹，我們知道，使用WebSocket可以實現雙向通訊。這里再介紹另外一個HTML5中新特性：服務端消息(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.服務器端的發送消息代碼
服務器端的發送更新消息很簡單：設置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>
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>
瀏覽器中打開此頁面，就會看到桌面的右下角彈出一個持續5秒鐘的消息窗口。
這項特性使用起來很簡單，但是在實際操作的過程中，應該盡量減少通知功能對用戶的干擾，最大程度的減少通知功能的出現。
下面是網上高手做這個應用的一些經驗：
1. 收到多條消息時確保只出現一條通知;
這個問題比較好解決，因為通知對象擁有一個名為"replaceId"的屬性。指定該屬性后，只要是相同replaceId的通知窗口彈出，都會覆蓋之前彈出的窗口。在實際項目中是給所有的彈出窗口賦了一個相同的replaceId。不過需要注意的是，這種覆蓋行為只在同域下有效。
2. 當用戶處于IM出現的頁面中時(頁面處于Focus狀態)將不出現通知;
這個問題主要是在于判斷瀏覽器窗口是否處于Focus狀態，目前除了監聽window的onfocus和onblur事件之外，貌似沒有更好的方式。在項目中就是通過這種方式來記錄窗口的Focus狀態，然后當消息到達時根據Focus狀態來判斷是否彈出窗口。
代碼如下:
$(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);
使用該方法需要注意的地方是，事件注冊的事件點應該盡可能的靠前，如果注冊太晚則當用戶打開頁面后再離開就會很容易出現狀態的誤判。
3. 當用戶使用多Tab開啟多個存在IM的頁面時，只要有一個頁面處于Focus狀態將不出現通知;
多頁面間的狀態共享可以通過本地存儲來實現：
• 瀏覽器窗口Focus時修改本地存儲中指定key的值為"focus"
• 瀏覽器窗口Blur時修改本地存儲中指定key的值為"blur"。
需要注意的是，Chrome下從一個Tab切換到另一個Tab時，Blur有可能比Focus后寫入存儲中，因此修改Focus狀態時需要異步處理。
代碼如下:
/*window on focus事件*/
//用延時是為了解決多個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 = dn.createNotification(
img,
title,
content
);
//確保只有一個提醒
n.replaceId = this.replaceId;
n.onclick = function(){
//激活彈出該通知窗口的瀏覽器窗口
window.focus();
//打開IM窗口
WM.openWinByID( data );
//關閉通知窗口
n.cancel();
};
在onclick的響應函數中訪問的window對象即屬于當前創建頁面，因此可以很方便的與當前頁面進行交互。以上代碼便實現了點擊彈出窗口會跳轉到對應的瀏覽器窗口和打開IM窗口。
：頁面中的相關事件很多時候具有不確定的時序性，所以我們的代碼盡量不要假設某些事件觸發的順序是一定的。比如上面的blur和focus事件
以上就是HTML5中Javascript API如何擴展應用緩存和服務端消息及桌面通知，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
