HTML5 Web Notifications 桌面推送小记
简介
Web Notifications目前在w3c的协议中已经是“推荐”(REC:Recommendation)阶段,除了iE外,各大现代浏览器都对这个桌面推送有了基本的支持。这都代表我们现在可以很好的在应用中使用桌面推送的特性。在移动端浏览器方面,可能因为平台的权限限制的原因目前只有firefox积极地支持这个属性。Web Notifications也能很好的工作在web workers中。
常用API
Notification.permission
使用 Web Notifications之前要向用户申请权限,Notification.permission属性是一个只读属性表示当前站点Web Notifications的状态,它有三个值default
、granted
和denied
,在用户没有给予权限时,即站点的默认状态一般是default,仅在这个状态时,可以使用Notification.requireInteraction
向用户申请权限,用户会在浏览器上看到一个 Web Notifications权限的确认框,选择Notification.permission属性改变为granted
表示用户允许使用Web Notifications,Notification.permission属性改变为denied
表示用户禁止使用Web Notifications,并且不可再向用户申请权限。
Safari (较旧版)和 Chrome (在 32 版本之前) 还没有实现 permission 属性。
Notification.requestPermission
向用户申请权限函数,仅在Notification.permission
状态为default
时候生效。其他状态浏览器为了友好的用户体验不会再向用户请求权限,用户如果想要修改权限需要手动设置权限。
Notification.requestPermission
有两种写法:对于比较新的浏览器,使用基于promise的语法
Notification.requestPermission().then(function(permission) { ... });
对于比较旧的浏览器,使用回调函数(Safari某些较新版本也需要使用回调函数)
Notification.requestPermission(callback);
Notification 实例常用属性
首先这里是一个简单的Notification实例:
var notification = new Notification(title, {
body: '...',
icon: '...',
sound :'...'
});
Notification.title
消息的主题
Notification.icon
消息体的图标
Notification.body
消息体的内容
Notification.sound
消息体提示的声音(支持性很低)Notification 实例相关事件
Notification.onclick<br>
Notification.onerror<br>
Notification.onclose<br>
Notification.onshow<br>
一个demo的代码
if (window.Notification) {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
// Chrome
Notification.requestPermission().then(function(permission) {
if (permission == "granted") {
var notification = new Notification('桌面推送', {
body: '这是我的第一条桌面推送',
icon: 'some/icon/url'
});
notification.onclick = function() {
console.log('点击');
notification.close();
};
} else {
Notification.requestPermission();
console.log('没有权限,用户拒绝:Notification');
}
});
} else {
// Safari
Notification.requestPermission(function(permission) {
if (permission == "granted") {
var notification = new Notification('桌面推送', {
body: '这是我的第一条桌面推送',
icon: 'some/icon/url'
});
notification.onclick = function() {
console.log('点击');
notification.close();
};
} else {
Notification.requestPermission();
console.log('没有权限,用户拒绝:Notification');
}
})
}
}
} else {
console.log('不支持Notification');
}
手动设置权限
chrome用户请在 "设置->隐私设置->内容设置->通知"选择网站域名点击允许
其他浏览器类似,请自己google
最新文章
- Hibernate(Control)
- Xcode8控制台乱码的解决方式
- 【cocos2d-x 手游研发----目录】
- 基于AE连通性分析
- .NET微信支付(H5仅限公众号支付)
- Java中对List集合的排序
- 在Azure中使用Load Runner测试TCP最大并发连接数
- codevs 2149 矩形周长(暴力扫描线)
- nim
- shell [ff: 未找到命令
- Hybris 6.4 + Jrebel
- 使用EHPC实现“完美并行”的高效批处理方案
- SQL server 查询出现:---“子查询返回的值不止一个。当子查询跟随在 =、!=、<;、<;=、>;、>;= 之后,或子查询用作表达式时,这种情况是不允许的。”SQL查询错误解析---
- SOAPdenovo组装软件使用记录
- Python-制作抖音图片
- Contain的使用
- python笔记02:列表与元素
- make: *** No rule to make target `/thread_native.h&#39;, needed by `ossl.o&#39;. Stop
- iOS 真机调试 Xcode 显示 device Error: device unavailable
- 腾讯云服务器linux centOS7.4 搭建ftp服务器 vsftpd