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

最近看到某网站上的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.php54.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()


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

作者:陈佚

原文链接:https://www.php54.com/sdfh.html

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

参与讨论
  • 陈佚:我一直在学习,我也一直在忘记。PHP应该一直在学习,我也一直在忘识最广的一我一直在学习,我也一直在忘记。PHP应该是涉及知识最广的一
  • 伪装的大佬:我一直在学习,我也一直在忘记。PH一直在学习,我也一直在忘一直在学习,我也一直在忘是涉及知识最广的一我一直在学习,我也一直在忘记。PHP应该是涉及知识最广的一
  • 伪装的大佬:我一直在学习,我也一直在忘一直在学习,我也一直在忘记。PHP应该是涉及知识最广的一我一直在学习,我也一直在忘记。PHP应该是涉及知识最广的一
围观 推荐
好文推荐
最新留言
  • 捉 空包网、真实代发网www.danhw.com 2019-09-28 10:18:29
  • 单号网(代理接待) 电商专用快递网站,空包网,单号网www.danhw.com 单号网(代理接待) 2019-09-27 16:33:09
  • 天赐 拼多多商家专用快递单号,不超时,不降权,单号购买链接www.danhw.com 天赐 2019-09-26 08:59:11
  • Foling Dow 电商专用快递网站www.dh5u.com单号无忧 Foling Dow 2019-09-19 09:49:52
  • 糖糖(金牌售后) 用快递找www.dh5u.com单号无忧 糖糖(金牌售后) 2019-09-15 16:47:38

关注PHP54+公众号

关注公众号

添加作者微信

作者微信