本文摘自PHP中文网,作者黄舟,侵删。
前言
Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。
用户权限
想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。只有用户允许的权限下,Notification 才能起到作用,避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的?
Notification.permission 该属性用于表明当前通知显示的授权状态,可能的值包括:
default :不知道用户的选择,默认。
granted :用户允许。
denied :用户拒绝。
1 2 3 4 |
|
请求权限
当用户还没选择的时候,我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。
以前基于回调的语法已经弃用(当然在现在的浏览器中还是能用的),最新的规范已将此方法更新为基于 promise 的语法:
1 2 3 4 5 6 |
|
推送通知
获取用户授权之后,就可以推送通知了。
1 |
|
参数如下:
title:通知的标题
options:通知的设置选项(可选)。
body:通知的内容。
tag:代表通知的一个识别标签,相同tag时只会打开同一个通知窗口。
icon:要在通知中显示的图标的URL。
image:要在通知中显示的图像的URL。
data:想要和通知关联的任务类型的数据。
requireInteraction:通知保持有效不自动关闭,默认为false。
还有一些其他的参数,因为用不了或者没什么用这里就没必要说了。
1 2 3 4 5 |
|
通知消息的效果图如下:
相关阅读 >>
html5 figure标签是什么意思?html5 figure标签的使用方法详解
h5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter
基于 html5 canvas 的 3d 渲染引擎界面以及吸附等效果的运用
更多相关阅读请进入《Notification》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者