Web Notification
在OS X 10.8 Mountain Lion系统上,通过Safari访问的页面能够发送通知到系统右边栏通知中心,通知(Notification)是通过WebKit Notification
对象发出的,这也是W3C标准实现的一部分。
来自Safari的通知可以在系统偏好设置的“通知”面板内进行设置,有些用户可能希望Safari的通知以提示框(alert)的形式在屏幕上停留一会儿然后再消失,有些人可能就不想在屏幕上显示。另外,用户可以在Safari偏好设置的通知面板内对单个网站(域名)的消息进行设定(Allow or Deny)。
由于用户可以设置将你的通知给屏蔽掉,所以你应该确保提示的通知是提示性的信息而不是非常重要的信息。
请求允许
提示:当你要实现带通知功能的插件时,你不需要检查用户许可级别,因为用户主动的安装插件,默认的许可级别就是允许(granted)。
因为网站的访问者可能运行的是其他系统,发通知前你需要先检查他们的浏览器是否支持,可以通过检查window.Notification
对象是否定义。
如果window.Notification
对象确实有定义,你可以继续通过permission
属性来检查用户对你网站消息的许可级别,一共有三种级别:
- default: 用户还没有设置是否允许来自当前域名的通知。
- granted: 用户允许来自当前域名的通知。
- denied: 用户拒绝来自当前域名的通知。
如果permission级别是default,说明你的网站还没有请求过让用户允许发送通知,所以你需要调用requestPermission()
方法,这时Safari会弹出提示请求用户允许,如果用户允许,会调用你作为参数传入的回调方法。
创建并发送通知
创建一个消息对象:
var n = new Notification(in String title, {in Object options});
除了title作为必须参数以外,还可以作为options对象传入有:
- body: 通知的内容
- tag: 通知的唯一标示,避免在通知中心中重复显示通知。
如果有多个消息会以队列的形式排列,只有当前面没有消息时才会显示。通知的副标题通常是消息来源的域名或者插件名,图标就是Safari应用的图标。
提示:通过网站发送通知并没有频率限制,为了不至于打扰用户,确保只在必要的时候才发通知信息。
通知会一直留在通知中心,直到用户在通知中心清除所以来自Safari的通知或者关掉当前网站页面。可以调用close()
方法关掉某条消息,或者你愿意的话,可以让用户在点击通知提示框时就将通知清除,你只需要在onclick()
事件处理中调用close()
方法,除了onclick()
,还有其他一些可用事件:
事件 | 描述 |
---|---|
onshow | 当通知在屏幕上显示的时候会被调用。 |
onclick | 用户点击通知提示框的时候会被调用,默认情况下点击通知提示框会显示消息来源的界面(网站),即使有另一个程序在前台(显示)。 |
onclose | 通知消失的时候会被调用,主动调用close()也会触发onclose()事件。 |
onerror | 当通知不能展现给用户的时候会被调用,如当前用户允许级别是denied或default。 |
先看效果再看代码:
Send a notification
【Code on Github】
var notify = function() {
// check for notification compatibility
if(!window.Notification) {
// if browser version is unsupported, be silent
return;
}
// log current permission level
console.log(Notification.permission);
// if the user has not been asked to grant or deny notifications from this domain
if(Notification.permission === 'default') {
Notification.requestPermission(function() {
// callback this function once a permission level has been set
notify();
});
}
// if the user has granted permission for this domain to send notifications
else if(Notification.permission === 'granted') {
var n = new Notification(
'1 new friend request',
{
'body': 'Jill would like to add you as a friend',
// prevent duplicate notifications
'tag' : 'unique string'
}
);
// remove the notification from Notification Center when it is clicked
n.onclick = function() {
this.close();
};
// callback function when the notification is closed
n.onclose = function() {
console.log('Notification closed');
};
}
// if the user does not want notifications to come from this domain
else if(Notification.permission === 'denied') {
// be silent
return;
}
};
结束
现在通知还不是很普及,W3C和HTML5貌似也在做这方面推广,Google Chrome好像也支持一种通知机制叫做webkitNotification
,相信后面会越来越普及。这种原生的通知比起用JQuery各种插件做出来的体验还是要好很多,所以如果能合理利用,一定会为网站增色不少。
Posted by TracyYih - Aug 22 2013
如需转载,请注明: 本文来自 Esoft Mobile
Web Notification的更多相关文章
- 简单了解HTML5中的Web Notification桌面通知
原文:http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/ 需要注意的是,消息通知只有通过Web服务访问该页 ...
- 聊聊HTML5中的Web Notification桌面通知
有的时候我们会在桌面右下角看到这样的提示: 这种桌面提示是HTML5新增的 Web Push Notifications 技术. Web Notifications 技术使页面可以发出通知,通知将被显 ...
- web notification api
Web Notifications API 使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异) 要显示一条通知,你需要先 ...
- HTML5中的Web Notification桌面通知
大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.本篇博客就在这里简单的介绍一下如何实现这样的功能. ...
- HTML5中的Web Notification桌面通知(右下角提示)
html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...
- HTML5开启浏览器桌面通知 Web Notification
说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...
- 浏览器开启桌面通知Web Notification
本文主要描述如何开启各个浏览器的桌面通知功能 一.谷歌浏览器(chrome) 点击地址栏前面的图标
- HTML5桌面通知(Web Notifications)实例解析
先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...
- 转:Spine.JS+Rails重客户端Web应用技术选型思路:『风车』架构设计
原文来自于:http://www.infoq.com/cn/articles/fengche-co-architecture 风车这个项目开始于 2011 年 11 月份,之前叫做 Pragmatic ...
随机推荐
- lintcode:Palindrome Partitioning 分割回文串
题目: 分割回文串 给定一个字符串s,将s分割成一些子串,使每个子串都是回文串. 返回s所有可能的回文串分割方案. 样例 给出 s = "aab",返回 [ ["aa&q ...
- static int和static final int的区别
1.static变量 按照是否静态的对类成员变量进行分类可分两种:一种是被static修饰的变量,叫静态变量或类变量:另一种是没有被static修饰的变量,叫实例变量.两者的区别是: 对于静态变量在内 ...
- HTML5入门2---js获取HTML元素的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HackDemo.java
import java.io.*; import java.awt.*; public class HackDemo{ public static void main(String args[]) t ...
- VIM树状文件列表NERDTree
下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方法 ...
- Eclipse,IDEA自动生成相应对象接收方法返回值的快捷键
@Service public class ItemServiceImpl implements ItemService { @Autowired private TbItemMapper itemM ...
- 如何查看linux是32位还是64位
可以用命令“getconf LONG_BIT”查看,如果返回的结果是32则说明是32位,返回的结果是64则说明是64位. 此外还可以使用命令“uname -a”查看,输出的结果中,如果有x86_64就 ...
- WPF中Timer与DispatcherTimer类的区别
前几天在WPF中写了一个轨迹回放的功能,我想稍微做过类似项目的,都晓得采用一个时间控件或者时间对象作为调度器,我在这么做的时候,出现了问题,于是将程序中的Timer换成了DispatchTimer,然 ...
- Map集合案例
1.获取字符串中每一个字母出现的次数. 比如"aababcabcdabcde",结果为:a(5)b(4)c(3)d(2)e(1) 分析如下: package mapexercise ...
- opencv绘制灰度直方图
代码之一: #include <cv.h> #include <highgui.h> #pragma comment( lib, "cv.lib" ) #p ...