HTML5 Web Notifications 实现桌面消息推送

HTML & CSS 专栏收录该内容
11 篇文章 0 订阅

简介



  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用户请在 "设置->隐私设置->内容设置->通知"选择网站域名点击允许

  其他浏览器类似


  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值