用于显示桌面通知。可以用来提示用户网站信息已更新（当用户长时间未关闭网页时），也可以提醒用户某些内容如：某个电视剧更新了两级等等
Notification
let notification = new Notification(title, options)
- title:标题
- options: 配置项（可选）
| 属性 | 作用 |
|---|---|
| dir | 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or |
| lang | 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。 |
| body | 通知中额外显示的字符串 |
| tag | 赋予通知一个 ID，以便在必要的时候对通知进行刷新、替换或移除。 |
| icon | 一个图片的 URL，将被用于显示通知的图标。 |
兼容性
image
image
完整代码
const options = {
dir: "auto",
body: "剑来更新了一章",
requireInteraction: true,
icon: "https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/h%3D452/sign=bdba7c9fb3a1cd111ab673258b13c8b0/aec379310a55b319aea21ada4aa98226cefc17c1.jpg"
};
notifyMe('剑来', options);
function notifyMe(title, options) {
// 先检查浏览器是否支持
if (!window.Notification) {
alert('浏览器不支持通知');
} else {
// 检查用户曾经是否同意接受通知
if (Notification.permission === 'granted') {
const notification = new Notification(title, options); // 显示通知
} else if (Notification.permission === 'default') {
// 用户还未选择，可以询问用户是否同意发送通知
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
console.log('用户同意授权');
const notification = new Notification(title, options); // 显示通知
} else if (permission === 'default') {
console.warn('用户关闭授权 未刷新页面之前 可以再次请求授权');
} else {
// denied
console.log('用户拒绝授权 不能显示通知');
}
});
} else {
// denied 用户拒绝
console.log('用户曾经拒绝显示通知');
}
}
}
效果
image
