HTML5桌面通知知识点总结

2019-1-28 一诺 html+css

H5 Web Notification桌面推送消息

特点
    可以直接脱离浏览器,在桌面提醒(类似微信及系统提醒)。
    不能直接本地运行,需要服务器
    需要用户允许方可使用
    win系统提醒在右下角,mac提醒在右上角

浏览器兼容性
    Firefox (支持)
    Chorome (支持)
    Safari (支持)
    Opera   (支持)
    IE   (全军覆没)
    移动端   (几乎全军覆没)

应用场景
    社交类网站
    资讯类网站
    网页版邮件服务
    即时通知类网站
    ...

判断浏览器是否支持桌面提醒
  if(window.Notification){
    console.log("浏览器支持Notification");
    // 业务代码
  }else{
    console.log("浏览器不支持Notification");
  }

判断用户允许状态
  Notification.permission取值为一下三个值
    "granted" 用户曾经同意接受通知
    "default" 用户还未选择,可以询问用户是否同意发送通知
    "denied"  用户曾经拒绝显示通知
 if(Notification.permission === 'granted') {
    console.log('用户曾经同意接受通知');
  }else if(Notification.permission === 'default'){
    console.log('用户还未选择,可以询问用户是否同意发送通知');
  }else{
    console.log('用户曾经拒绝显示通知');
  }

询问用户是否同意发送通知
  Notification.requestPermission() 返回是一个promise
    "granted" 用户同意授权
    "default" 用户关闭授权 未刷新页面之前 可以再次请求授权
    "denied"  用户拒绝授权 不能显示通知
Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      console.log('用户同意授权');
      var notification = new Notification(title, options); // 显示通知
    } else if (permission === 'default') {
      console.warn('用户关闭授权 未刷新页面之前 可以再次请求授权');
    } else {
      // denied
      console.log('用户拒绝授权 不能显示通知');
    }
  });

显示通知方法
  new Notification(title, options)
    title   是必须参数,表示推送消息框的标题内容
    options 是可选参数 是一个对象 一下是常用选项
      {
        dir:  水平展示顺序 默认'auto',可以是ltr或rtl
        lang:提示的语言
        bady:提示消息的主体内容
        tag:标记当前通知的标签
        icon:左边的显示头像或者图标
        silent:通知是否静音。非必须,默认为false,表示无声
        sound: 'mp3',通知声源文件地址。非必须,默认为空
        noscreen: 是否不在屏幕上显示通知信息。非必须,默认为false表示要显示
        renotify:是否替换之前的通知项
        timestamp: 通知显示延迟的时间。非必须,默认通知实例创建完成就显示
        data: 可以是任意数据类型 通常用于方法的回调,传参
        requireInteraction false自动关闭,true不自动关闭保持活性,默认为false
      }
  const n = new Notification('XX网站消息通知', {
    body: '你的朋友有新状态啦,快去围观吧!',
    tag: 'testTag',
    icon: 'https://static.cnblogs.com/images/adminlogo.gif',
    requireInteraction: true // 不自动关闭通知
  });

事件及事件钩子
  Notification.onclick
    处理 click 事件的处理。每当用户点击通知时被触发。
  Notification.onshow
    处理 show 事件的处理。当通知显示的时候被触发。
  Notification.onerror
    处理 error 事件的处理。每当通知遇到错误时被触发。
  Notification.onclose
    处理 close 事件的处理。当用户关闭通知时被触发。
  n.onshow = function () {
    console.log('通知显示了!');
  }
  n.onclick = function (e) {
    // 可以直接通过实例的方式获取data内自定义的数据
    // 也可以通过访问回调参数e来获取data的数据
    window.open(n.data.url, '_blank');
    n.close();
  }
  n.onclose = function () {
    console.log('关闭了!!');
  }
  n.onerror = function (err) {
    console.log('出错了,检查一下吧');
    throw err;
  }

最后一个完整的demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HTML5桌面通知</title>
</head>
<body>
  <button id="btnNotify">点我模拟收到桌面通知</button>
  <p id="text" style="color: orange"></p>
  <script>
    var btnNotify = document.getElementById('btnNotify');
    var text = document.getElementById('text');
    const NotificationInstance = Notification || window.Notification;
    NotificationInit();
    btnNotify.onclick = function() {
      NotificationInit();
    }
    // 初始化
    function NotificationInit(){
      if (NotificationInstance) {
        const permissionNow = NotificationInstance.permission;
        //允许通知
        if (permissionNow === 'granted') {
          CreatNotification();
        } else if (permissionNow === 'denied') {
          text.innerHTML = '用户之前拒绝了桌面提醒!';
        } else {
          setPermission();
        }
      }else{
        alert("浏览器不支持Notification");
      }
    }
    //请求获取通知权限
    function setPermission() {
      NotificationInstance.requestPermission(function (PERMISSION) {
        if (PERMISSION === 'granted') {
          CreatNotification();
        } else {
          text.innerHTML = '用户拒绝了你!';
        }
      });
    }
    function CreatNotification() {
      const n = new Notification('XX网站消息通知', {
        body: '你的朋友有新状态啦!',
        tag: 'testTag',
        icon: 'https://gitee.com/yinuocode/blogsImg/raw/master/img/avatar.jpg',
        data: {
          url: 'https://yuanqiao.pw'
        },
        requireInteraction: true // 不自动关闭通知
      });
      n.onshow = function () {
        text.innerHTML = '通知显示了!';
      }
      n.onclick = function (e) {
        window.open(n.data.url, '_blank');
        n.close();
      }
      n.onclose = function () {
        text.innerHTML = '关闭了!';
      }
      n.onerror = function (err) {
        text.innerHTML = '出错了!';
        throw err;
      }
    }
  </script>
</body>
</html>


分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by emlog