[html5] (Notification) 桌面通知

前几天要做一个桌面通知的功能,翻查以前做的笔记,发现webkitNotifications这个已经不能用了,baidu了下,基本都是介绍webkitNotifications的,后来在SOF上找到答案,现在chrome支持的是Notification,估计是W3C标准化了。api也变了,mark之。


Notification

Properties

title:"别动神仙说:" body:"这里是body" icon:"http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40" tag:"1"// 通知框ID,相同id可替换,而不是出现新的通知框lang:""// 语言 dir:"auto"// 文字方向

new Notification(‘别动神仙说:‘, {
 body: ‘这里是body‘,
 icon: ‘http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40‘,
 tag: 1
});

onshow: null // 显示通知框时调用 onclick: null // 点击通知框时调用 onclose: null // 点击通知框关闭按钮时调用 onerror: null

例如实现通知弹出一段时间后自动关闭

var notification = new Notification(‘标题‘);
notification.onshow = function () {
 setTimeout(function () {
notification.close();
 }, 3000);
}

Notification.permission 有三种状态

  • default:未设置过为这个状态,通过Notification.requestPermission()可以询问用户是否允许通知
  • granted:用户点击允许后的状态
  • denied: 用户点击拒绝后的状态,通知框不可用

Methods

Notification.requestPermission()  一般在Notification.permission === ‘default‘时,用户通过点击等操作调用

document.onclick = function() {
Notification.requestPermission()
}

使用回调

Notification.requestPermission(function (permission) {
 // 可在确认后直接弹出
 if (permission === ‘granted‘) {
 var notification = new Notification(‘弹窗‘);
}
});

Notification.close() 通知框关闭

function notify() {
 if (!("Notification"in window)) {
 alert("This browser does not support desktop notification");
return;
}

 if (Notification.permission ==="granted") {
 var notification = new Notification("Hi there!");
}
 else if (Notification.permission === ‘default‘) {
 Notification.requestPermission(function (permission) {
 if (permission ==="granted") {
 var notification = new Notification("Hi there!");
}
});
}
}

References:

https://developer.mozilla.org/en-US/docs/Web/API/Notification.tag

from :http://www.thinksaas.cn/group/topic/347544/

时间: 2024-11-05 15:58:30

[html5] (Notification) 桌面通知的相关文章

HTML5桌面通知:notification api

1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不知道人人网有消息推送过来给我的,而必须要等我把当前页面切到人人网才知道有消息推送了.这种方式的消息推送它是基于页面存活的, 但是我们需要这么一种策略:无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题. Notification生成的消息不依附

关于HTML5的桌面提醒——Notification

说明测试环境如下:IE: 11版本firefox:34版本chrome: 39版本 声明: 百度网上搜索的大部分资料,几乎都是错误的! 几乎千篇一律的都是 要检测浏览器是否支持 “桌面提醒”需要用到如下代码: //判断浏览器是否支持Notificationsfunction supported(){ if(window.webkitNotifications){    alert('浏览器支持Notifications'); } else {    alert('浏览器不支持Notificati

HTML5实战之桌面通知

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户.这和WebIM是最为天然的结合.不过,目前支持Desktop Notification功能的浏览器只有Chrome5+. 关于通知的基础知识可以参考以下文档: W3C标准:http://dev.w3.org/2006/webapi/WebNotifications/publish/Notifications.html 使用教程:http://www.html5rocks.com/en/tutorials/notifications/q

Chrome浏览器扩展开发系列之十:桌面通知Notification

Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为W3C推荐标准,网址https://www.w3.org/TR/notifications/.每个通知对话框都包括title, direction, language和origin.通知对话框还可以有body, tag, icon URL和icon image. 通知必须获得用户的授权才能够显示,从

h5桌面通知Notification

H5中的桌面通知Notification 前言: 对于一个前段开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下这个H5功能... 1. 实例一个Notification let n = new Notification( "这是一个通知消息", //这是必选Title 一定会显示的通知标题 { icon: "xxx.png", // 这个icon是用来显示通知中的左边图片 bo

chrome浏览器的桌面通知

最近在使用朋友网(不加链接,避免有打广告的嫌疑),发现会出现提示“是否允许网站显示桌面通知?”,如下图所示: 这种做法,在页面加载完时直接调用请求,比起开心网的这种提示感觉有些野蛮了.开心网的桌面通知提示如下: 先检查用户是否已经允许了本站的桌面通知,在未允许的情况下:点击后Chrome才出现提示,感觉更人性化一些,起码这个通知出现是由用户主动触发的. 这两个网站,发现桌面通知主要用于webIM的消息提醒.查了下资料,大概了解和掌握了Chrome桌面通知的.做了如下图所示的一个Demo: 完整的

兼容 谷歌、火狐、360系列浏览器桌面通知()有用

兼容 谷歌.火狐.360系列浏览器桌面通知(有用) 本文从总结工作,并且参照大量的网络资源的.我们希望有同样需求的朋友来帮忙. (部分): http://xsk.tehon.org/den/index.php/category/tech/html5-audio-notifications.html http://ttsvetko.github.io/HTML5-Desktop-Notifications/# http://www.cnblogs.com/meteoric_cry/archive/

浏览器桌面通知(notifications)

近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌面的通知区域内显示一个提示框,而且显示在桌面的最前面,非常方便就能看到了.我就将它简单的封装一下,使其符合经常使用的使用场景. 功能效果类似webQQ的消息提示通知. 项目地址:https://github.com/rentiansheng/notification chrome 浏览器桌面通知 简

JavaScript 兼容新旧版chrome和firefox的桌面通知

1.新/旧版本的chrome和firefox都可支持,IE下不支持因此设置为了在最小化窗口处闪烁显示提示文字. 2.设置为提示窗口显示5秒即关闭. 3.可设置图标和点击提示窗口要跳转到的页面(见输入参数). var timer = null, title = $('title').text(); $('body').on('click', function() { clearInterval(timer); $('title').text(title); }); function showMsg