在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的更多相关文章

  1. 简单了解HTML5中的Web Notification桌面通知

    原文:http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/ 需要注意的是,消息通知只有通过Web服务访问该页 ...

  2. 聊聊HTML5中的Web Notification桌面通知

    有的时候我们会在桌面右下角看到这样的提示: 这种桌面提示是HTML5新增的 Web Push Notifications 技术. Web Notifications 技术使页面可以发出通知,通知将被显 ...

  3. web notification api

    Web Notifications API 使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异) 要显示一条通知,你需要先 ...

  4. HTML5中的Web Notification桌面通知

    大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.本篇博客就在这里简单的介绍一下如何实现这样的功能. ...

  5. HTML5中的Web Notification桌面通知(右下角提示)

    html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...

  6. HTML5开启浏览器桌面通知 Web Notification

    说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...

  7. 浏览器开启桌面通知Web Notification

    本文主要描述如何开启各个浏览器的桌面通知功能 一.谷歌浏览器(chrome) 点击地址栏前面的图标

  8. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  9. 转:Spine.JS+Rails重客户端Web应用技术选型思路:『风车』架构设计

    原文来自于:http://www.infoq.com/cn/articles/fengche-co-architecture 风车这个项目开始于 2011 年 11 月份,之前叫做 Pragmatic ...

随机推荐

  1. 恢复被win7覆盖的Ubuntu Grub

    情景:本本装有Ubuntu 12.04 + Win7 32.重装Win7 64后,Ubuntu启动菜单被覆盖. 恢复的方法有多种,思路都一样.第一步,进入Linux环境:第二步.修改Grub使其重新覆 ...

  2. 李洪强iOS开发之OC[012] -类的声明实现小结

    // //  main.m //  11 - 内容总结 // //  Created by vic fan on 16/7/9. //  Copyright © 2016年 李洪强. All righ ...

  3. Project Euler 79:Passcode derivation

    Passcode derivation A common security method used for online banking is to ask the user for three ra ...

  4. Git教程之管理修改(6)

    Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件.你会问,什么是修改?比如你新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了 ...

  5. JodaTime初体验

    前段时间用JDK自带的Calendar类来处理日期,需要获取年.季,月,星期的起始日期,被折腾得要死要活.看了这篇文章 http://www.blogbus.com/dreamhead-logs/22 ...

  6. 关于java.lang.NoClassDefFoundError: com/sun/mail/util/LineInputStream解决办法

    吉林的一个项目有个错误找了一天,有段报错是:   java.lang.NoClassDefFoundError: com/sun/mail/util/LineInputStream 1.遇到过两次,第 ...

  7. Android 下log的使用总结

    Android 下log的使用总结 一:在源码开发模式下 1:包含头文件: #include <cutils/log.h> 2:定义宏LOG_TAG #define LOG_TAG &qu ...

  8. SQLserver临时表

    IF EXISTS (SELECT * FROM SYSOBJECTS WHERE NAME='#temp') DROP TABLE #tempGOSELECT ID,XM,ADDDW INTO #t ...

  9. ASP.NET Web API上实现 Web Socket

    1. 什么是Web Socket Web Socket是Html5中引入的通信机制,它为浏览器与后台服务器之间提供了基于TCP的全双工的通信通道.用以替代以往的LongPooling等comet st ...

  10. Codeforces Beta Round #9 (Div. 2 Only)D

    短小精悍的代码 dp[i][j] +=dp[k][j-1]*[i-k-1][j-1] i个结点 J层 #include <iostream> #include<cstdio> ...