Notification 浏览器桌面通知API使用理解及心得Notification 浏览器桌面通知API使用理解及心得

54 阅读 0 评论 36 点赞

我是靠谱客的博主呆萌咖啡，最近开发中收集的这篇文章主要介绍Notification 浏览器桌面通知API使用理解及心得Notification 浏览器桌面通知API使用理解及心得，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Notification 浏览器桌面通知API使用理解及心得

之前的项目中用到notification的桌面通知api，这里写一下自己的使用理解，虽然不是很麻烦，这里记录一下以防下次再去找。

notification是通过向浏览器授权，向桌面推送通知的api，因为类似于一些重要消息，可能会被用户忽略，发起桌面通知更为明显，在这种业务场景下，我们就可以使用notification

Notification介绍

首先再发起Notification前首先就是要先向用户授权,授权方法是Notification.permission


Notification.requestPermission(function (permission) {
//当用户选择了拒绝或同意的时候执行回调
if (permission === "granted") { //判断是否授权成功
var notification = new Notification("ha ha");
}
});

授权的状态分为四种：

granted : 用户允许了通知
denied ：用户拒绝了通知（这种情况下不应该再弹出来，不过也可以变态一点每次都弹出来让他授权）
default: 用户还没有选择过

需要注意的是：这个授权必须再用户点击过该网页或者操作过该网页的时候，所以一般情况下可以写个监听事件只要点击过这个网页就发起授权

经过允许之后就可以发起创建Notification实例发送通知了，

let notification = new Notification(title, options) //title就是通知的标题，options是通知的内容设置

options中的有很多选项，这里我只写下一些常用的，其他的如果有需求可以直接看文档

body:通知的主体内容
tag: 相当于通知的id，如果你不写，每条通知都是独立了，如果有需要重复覆盖的通知，只要使用相同的tag就行了
icon：显示时通知的图片
requireInteraction： boolean类型控制是否不自动关闭，只有主动关闭或点击的时候才会关闭，true时不自动关闭
url：显示网站的地址

最后notification还有提供了一些事件

Notification.onclick

处理 click 事件的处理。每当用户点击通知时被触发。
Notification.onshow

处理 show 事件的处理。当通知显示的时候被触发。
Notification.onerror

处理 error 事件的处理。每当通知遇到错误时被触发。
Notification.onclose

处理 close 事件的处理。当用户关闭通知时被触发。

这些事件非常有用，可以用来触发用户点击时跳转到某个功能模块，还有在方法内没有办法使用外部的this

下面是一个官方的使用实例的：

function notifyMe() {
// 先检查浏览器是否支持
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// 检查用户是否同意接受通知
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification(('你好',{
icon:'http://xxxxx/haha.jpg',
tag:'info',
body:'你有xxx条新消息',
url:'http://www.xxx.com',
requireInteraction:true
}));
}
// 否则我们需要向用户获取权限
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// 如果用户同意，就可以向他们发送通知
if (permission === "granted") {
var notification = new Notification(('你好',{
icon:'http://xxxxx/haha.jpg',
tag:'info',
body:'你有xxx条新消息',
url:'http://www.xxx.com',
requireInteraction:true
}));
}
});
}
}