Notification告诉实际
平安上下文: 此项性能仅在平安上下文(HTTPS), 一些 反对的浏览器.
Notifications API 的告诉接口用于向用户配置和显示桌面告诉。
在线示例
见文末代码
构造方法
let notification = new Notification(title, options)参数
title
定义一个告诉的题目，当它被触发时，它将显示在告诉窗口的顶部。
options 可选
options对象蕴含利用于告诉的任何自定义设置选项。选项有：
dir: 显示告诉的方向。默认是auto，追随浏览器语言设置行为，你也能够通过设置ltr和rtl的值来笼罩该行为（尽管大多数浏览器仿佛疏忽这些设置）
lang: 告诉的语言，如应用代表一个BCP 47语言标签的 DOMString 指定的。请参阅Sitepoint ISO 2字母语言代码页面，以取得简略的参考。
badge: 一个 USVString 蕴含用于示意告诉的图像的URL, 当没有足够的空间来显示告诉自身时。
body: 一个 DOMString 示意告诉的注释，将显示在题目下方。
tag: 一个 DOMString 代表告诉的 一个辨认标签。
icon: 一个 USVString 蕴含要在告诉中显示的图标的URL。
image: 一个 USVSTring蕴含要在告诉中显示的图像的URL。
data: 您想要与告诉相关联的任意数据。这能够是任何数据类型。
vibrate: 一个振动模式 vibration pattern 设施的振动硬件在告诉触发时收回。
renotify: 一个 Boolean (en-US) 指定在新告诉替换旧告诉后是否应告诉用户。默认值为false，这意味着它们不会被告诉。
requireInteraction: 示意告诉应放弃无效，直到用户点击或敞开它，而不是主动敞开。默认值为false。
以下选项列在最新标准中，但在任何浏览器中都不反对.
silent: 一个 Boolean (en-US) 指明告诉是否应该是无声的,即,不须要发出声音或振动，无论设施设置如何。默认值为false，这意味着它不会放弃静默。
sound:一个 USVString 蕴含告诉触发时要播放的音频文件的URL。
noscreen: 一个 Boolean (en-US) 指定告诉触发是否应启用设施的屏幕。 默认值为false，这意味着它将启用屏幕。
sticky: 一个 Boolean (en-US) 指明告诉是否应该是“粘”, 即不易被用户清理。默认值为false，这意味着它不会粘。
检测浏览器是否反对
if (!("Notification" in window)) { alert("道歉，此浏览器不反对桌面告诉！");}获取受权
在应用桌面告诉前咱们须要获取用户运行以后起源告诉的权限requestPermission()办法能够做此事件，返回值有三个 granted（容许）， denied（回绝） 或者 default（默认）。
留神：当用户回绝告诉后须要在浏览器零碎-隐衷设置和安全性-告诉从新关上，chrome从新关上参考
Notification.requestPermission().then(function(result) { if (result === 'denied') { console.log('用户回绝'); return; } if (result === 'default') { console.log('用户未受权'); return; } // 批准告诉});发送告诉
let notification = null;const title = "巨蟹座-00年";const options = { dir: "auto", // 文字方向 body: "这是我的好姐妹，能够介绍给你", // 告诉主体 requireInteraction: true, // 不主动敞开告诉 image: "https://gitee.com/Wzhichao/img/raw/master/uPic/IMG_xxxxx327356%20.png", icon: "https://gitee.com/Wzhichao/img/raw/master/uPic/QlkqKm47%20.jpg", // 告诉图标};notification = new Notification(title, options);这样就不会错过某些重要的信息了window谷歌会显示image的图片展现
火狐
谷歌mac上image图片不会进行显示
事件
敞开告诉
close() 办法用于敞开一个以前显示的告诉。
这段代码会在4秒后主动敞开告诉
let notification = new Notification(title, options);setTimeout(notification.close.bind(notification), 4000);点击告诉
当用户点击告诉后，能够做一些自定义的事件。
let notification = new Notification(title, options);notification.onclick = () => { alert(1);};示例代码
在浏览器新开一个标签页，关上控制台，粘贴以下代码即可体验
notify()function notify() { if (!("Notification" in window)) { alert("道歉，此浏览器不反对桌面告诉！"); } Notification.requestPermission().then(function (result) { if (result === "denied") { console.log("用户回绝"); return; } if (result === "default") { console.log("用户未受权"); return; } // 批准告诉 sendMesg(); });}function sendMesg() { let notification = null; const title = "巨蟹座-00年"; const options = { dir: "auto", // 文字方向 body: "这是我的好姐妹，能够介绍给你", // 告诉主体 data: { originUrl: `https://developer.mozilla.org/zh-CN/docs/Web/API/notification`, }, requireInteraction: true, // 不主动敞开告诉 image: "https://gitee.com/Wzhichao/img/raw/master/uPic/IMG_xxxxx327356%20.png", icon: "https://gitee.com/Wzhichao/img/raw/master/uPic/QlkqKm47%20.jpg", // 告诉图标 }; notification = new Notification(title, options); //setTimeout(notification.close.bind(notification), 4000); notification.onclick = ({ currentTarget: { data } }) => { notification.close(); window.focus(); window.location.href = data.originUrl; };}