chrome浏览器window.Notification的使用

window.Notification是浏览器最小化后在桌面显示消息的一种方法，结合web-push就生成类似360等流氓软件在桌面右下角的弹窗广告，跟浏览器是脱离的，消息是置顶的。这里只介绍如何使用window.Notification的使用。

Notifications API

Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该API被设计成与不同平台上的现有通知系统兼容。

Notifications用法

1.授权当前页面允许通知

1、检测当前页面权限状态
你可以通过检查只读属性 Notification.permission 的值来查看你是否已经有权限。该属性的值将会是下列三个之一：

default用户还未被询问是否授权，所以通知不会被显示。
granted表示之前已经询问过用户，并且用户已经授予了显示通知的权限。
denied用户已经明确的拒绝了显示通知的权限。
示例

Notification.requestPermission()

浏览器会弹出授权弹窗

image.png
参考https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API

2、通过 new Notification(title, options)修改通知标题和内容

let notification = new Notification(title, options)

title一定会被显示的通知标题

options 可选
一个被允许用来设置通知的对象。它包含以下属性：

• dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
• lang: 指定通知中所使用的语言。
• body: 通知中额外显示的字符串
• tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
• icon: 一个图片的URL，将被用于显示通知的图标。

示例

new Notification('我是标题', {'body':'这里是通知内容'})

这样在桌面的右下角就会弹出通知弹窗

image.png

具体的详情请参考https://developer.mozilla.org/zh-CN/docs/Web/API/notification。这篇只起到抛砖引玉的作用。