不能听命于自己者,就要受命于他人。网站首页学海无涯

高大上的web桌面通知Notification详解

陈佚2018-12-16 15:55:213人围观暂无分类
简介最近看到某网站上的Notification桌面通知,然后又想起来写个文章了,其实很多年前已经玩过,相对现在的话还是没有什么变化,只是要求一定在https域名下使用,不然会报安全性错误!

首先我们来看下效果

image.png

就是这样一个简单的桌面通知,可以在电脑桌面上显示。

https://developer.mozilla.org/zh-CN/docs/Web/API/notification

这个是火狐开发notification的相关资料

下面直接上一个demo实例,注:一定要在https域名下才有效

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<button onclick="Notify('PHP54技术博客','欢迎加入PHP54技术博客!','https://www.abcdefgxyz.com/Public/Home/img/php54.png')">Notify!</button>
<script>
function Notify(title,body,icon) {
  // 先检查浏览器是否支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // 检查用户是否同意接受通知
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification(title,{body:body,icon:icon});
    notification.onclick=function(){
     window.focus();
    }
  }

  // 否则我们需要向用户获取权限
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // 如果用户同意,就可以向他们发送通知
      if (permission === "granted") {
        var notification = new Notification(title,{ body:body,icon:icon});
      }
    });
  }
  // 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权
  // 出于尊重,我们不应该再打扰他们了
}
</script>
</body>
</html>

下面来详细讲解notification的构造

1.方法参数(详细可以参考demo)

var notification = new Notification(title, options)
//title也就是通知的标题,其他的参数(内容,图片等)都包含着options中
//dir : 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)
//lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
//body: 通知中额外显示的字符串
//tag: 赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。
//icon: 一个图片的URL,将被用于显示通知的图标。


2.属性(获取相应的属性值)

Notification.title   标题
Notification.dir     文字方向
Notification.lang  语言
Notification.body 内容
Notification.tag    通知标签
Notification.icon  图片


3.事件(触发事件)

Notification.onclick=function(){};
//处理 click 事件的处理。每当用户点击通知时被触发。
Notification.onshow
//处理 show 事件的处理。当通知显示的时候被触发。
Notification.onerror
//处理 error 事件的处理。每当通知遇到错误时被触发。
Notification.onclose
//处理 close 事件的处理。当用户关闭通知时被触发。


4.静态方法

//向用户申请通知权限
Notification.requestPermission(function(){
});


5.实例方法

//通过close方法关闭通知
Notification.close()


上面就是全部的相关知识,有疑问可以在文章下留言。

上一篇:PHP实现QQ第三方登录

下一篇:无

文章评论

    共有0条评论来说两句吧...