Chrome内置支持Notifications，Firefox需要安装插件（插件下载地址：http://code.google.com/p/ff-html5notifications/）。
注意，必须在服务器中运行才会有桌面通知效果！
一个Notifications使用的小例子，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
// 检查客户端（一般是浏览器）对Notifications的支持
//Chrome内置支持，Firefox需要安装插件
if (window.webkitNotifications) {
console.log("浏览器支持Notifications！");
// alert("浏览器支持Notifications！");
}
else {
console.log("浏览器不支持Notifications！");
// alert("浏览器不支持Notifications！");
}
});
$(document).ready(function(){
function createNotification(options) {
if (options.notificationType == 'simple') {
// 创建一个文本通知:
return window.webkitNotifications.createNotification(
'images/rails.png', // 图标路径 - 可以是相对路径
'通知', // 通知的标题
'哈哈，你中彩咯！' // 通知的内容
);
}
else if (options.notificationType == 'html') {
// 或者创建一个HTML通知:
return window.webkitNotifications.createHTMLNotification(
// HTML路径 - 可以是相对路径
'xxx.html'
);
}
}
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) {
// 0 表示允许Notifications
notification = createNotification({notificationType: 'simple'});
notification.ondisplay = function() {
console.log("display");
};
notification.onclose = function() {
console.log("close");
};
notification.show();
setTimeout('notification.cancel()', 4000)
} else {
window.webkitNotifications.requestPermission();
}
}, false);
});
</script>
</head>
<body>
<button id="show_button" type="button">点我看效果</button>
</body>
</html>
附上源代码。
分享到：
相关推荐
### HTML5新手入门指南 #### 一、HTML5概述与技术组成 HTML5不仅是一种标记语言，它还代表了一个全新的网络应用开发框架。这个框架涵盖了HTML、CSS和JavaScript这三个核心部分，共同推动着现代网络应用的发展。...
HTML5是新一代的超文本标记语言标准，它不仅更新了HTML4的部分，还引入了许多新的技术和特性，使得网页开发变得更加高效、强大且适应性更强。HTML5的核心在于它结合了HTML、CSS3和JavaScript，提供了丰富的功能，为...
- 以Stack的方式显示Notifications：实现多个Notification以堆栈形式显示。 - **创建可穿戴的应用** - 创建并执行可穿戴应用：了解如何创建并部署可穿戴设备的应用。 - 创建自定义的布局：掌握为可穿戴设备定制...
- 赋予Notification可穿戴特性，创建Notification、接收语音输入、添加显示页面、以Stack方式显示Notifications。 - 创建可穿戴的应用，执行应用、创建自定义布局、添加语音能力、打包可穿戴应用和通过蓝牙进行...
#### 一、Android入门基础 **1. 建立第一个App** - **创建Android项目：** 使用Android Studio或其他开发工具来创建一个新的Android项目。 - **执行Android程序：** 在模拟器或真机上运行App。 - **建立简单的用户...
### 5. Palm Synergy Palm Synergy 是WebOS的一项重要功能，它整合了多个在线服务，如Google、Facebook和Microsoft Exchange，将联系人、日历和邮件等信息同步到设备上。这一特性让用户体验到了无缝的跨平台同步。 ...
1. **赋予Notification可穿戴特性**：创建Notification，并在Notification中接收语音输入，为Notification添加显示页面，以及以Stack的方式显示Notifications。 2. **创建可穿戴的应用**：创建并执行可穿戴应用，...