HTML5 Web Notifications 桌面推送小记

目录

• 简介
• 常用API
• 手动设置权限

简介

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