突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌

2019-01-28 19:09:19刘景俊

:以"#"开始的行是注释行,但是可以有其它用处。如果你的修改只涉及到一个图片或者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>