https://developer.mozilla.org/zh-CN/docs/Web/API/notification
使用方法
var notification = new Notification(title, options)
参数:
title: 标题
option: 可选
dir
: 文字的方向;它的值可以是auto(自动)
,ltr(从左到右)
, orrtl
(从右到左)lang
: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。body
: 通知中额外显示的字符串tag
: 赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。icon
: 一个图片的URL,将被用于显示通知的图标。
属性:
静态属性 - 这些属性仅在 Notification
对象上有效。
Notification.permission: 一个用于表明当前通知显示授权状态的字符串。可能的值包括:
denied
(用户拒绝了通知的显示),granted
(用户允许了通知的显示), 或default
(因为不知道用户的选择,所以浏览器的行为与 denied 时相同)
实例属性 - 这些属性仅在 Notification
的实例中有效。
- Notification.title 在构造方法中指定的 title 参数 (只读)
- Notification.dir 知的文本显示方向。在构造方法的 options 中指定(只读)。
- Notification.lang 通知的语言。在构造方法的 options 中指定(只读)。
- Notification.body 通知的文本内容。在构造方法的 options 中指定(只读)。
- Notification.tag 通知的 ID。在构造方法的 options 中指定(只读)。
- Notification.icon 通知的图标图片的 URL 地址。在构造方法的 options 中指定(只读)。
事件处理:这些事件 在 Notification
的实例中有效
Notification.onclick
处理click
事件的处理。每当用户点击通知时被触发。Notification.onshow
处理show
事件的处理。当通知显示的时候被触发。Notification.onerror
处理error
事件的处理。每当通知遇到错误时被触发。Notification.onclose
处理close
事件的处理。当用户关闭通知时被触发。
方法:
静态方法 - 这些方法仅在 Notification
对象中有效
Notification.requestPermission()
用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。
实例方法 - 这些方法仅在 Notification
实例或其 prototype
中有效
Notification.close()
用于关闭通知。
实例:
html
<button onclick="notifyMe()">Notify me!</button> <button id="btn">关闭通知</button>
js
function notifyMe() { // 先检查浏览器是否支持 if (!("Notification" in window)) { alert("This browser does not support desktop notification"); } // 检查用户是否同意接受通知 else if (Notification.permission === "granted") { tz(); } // 否则我们需要向用户获取权限 else if (Notification.permission !== 'denied') { Notification.requestPermission(function (permission) { // 如果用户同意,就可以向他们发送通知 if (permission === "granted") { tz(); } }); } function tz() { var notification = new Notification("Hi there!"); notification.onshow = function(){ console.log('通知显示'); } notification.onclick = function(){ console.log('点击通知'); } var $btn = document.querySelector('#btn'); $btn.onclick = function(){ console.log('关闭通知'); notification.close(); } $btn = null; } // 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权 // 出于尊重,我们不应该再打扰他们了 }