js 浏览器桌面通知npm插件 notification-koro1

H5 notification:一个浏览器桌面通知 npm 包,求 Star

轻量:

体积不超过 2KB

安装:

npm i -S notification-koro1

使用:

插件在vue项目中使用的示例:.vue文件

1. 导入 && 初始化:

初始化需要两个参数:title(通知的标题)、options(配置),具体信息查阅wiki文章MDN

import notification from 'notification-koro1'; // 引入npm包
const notificationClass = new notification(title, options); // 初始化
2. 浏览器是否支持: support

notification-koro1初始化完毕之后,可以通过support字段来判断浏览器是否支持notificationAPI

if (notificationClass.support) {
  // 显示通知逻辑,以下所有步骤都要在这里调用
} else {
  // 浏览器不支持
}
3. 注册回调事件:

注册回调事件notificationEvent

notificationEvent接收一个对象参数,对象的每个属性值必须都是函数

下面是栗子:

// 点击弹窗的回调
const eventObj = {
  // 点击通知回调
  onclick: e => {
    console.log("点击通知打开百度", e);
    window.open("https://www.baidu.com/", "_blank");
  },
  // 通知显示回调
  onshow: e => {
    console.log("显示", e);
  },
  // 通知遇到错误回调
  onerror: e => {
    console.log("通知报错", e);
  },
  // 通知关闭回调
  onclose: e => {
    console.log("关闭通知", e);
  }
};
this.notificationClass.notificationEvent(eventObj);

注意:

  1. 注册回调事件需要在请求通知之前触发,否则事件无法绑定到通知上
  2. 有多个通知,想绑定不同的回调事件,再次调用这个API,绑定新的通知
  3. 插件会对对象参数和对象属性的value值进行检测,检测不通过的话,将不会绑定回调。
4. 请求用户授权
const userSelectFn = msg => {
    if (msg === 'already granted' || msg === 'granted') {
        // 随时可以调用通知
       return notificationClass.userAgreed();
    } else if (msg === 'close') {
        // 请求权限通知被关闭
        return notificationClass.initNotification(userSelectFn); // 再次调用
    } else if(msg === 'denied' || msg === 'already denied') {
        // 请求权限当前被拒绝 || 曾经被拒绝
        if (msg === "denied") {
            console.log("您刚刚拒绝显示通知 请在设置中更改设置");
        }else{
            console.log("您曾级拒绝显示通知 请在设置中更改设置");
        }
    }
};
notificationClass.initNotification(userSelectFn); // 请求授权
5. 显示通知

当用户同意的时候(请求授权的第一个判断),就可以在合适的时间,调用下面的方法来显示通知。

我们可以先请求用户授权,然后在需要的时候再发送通知,微博就是这么做的。

notificationClass.userAgreed();
6. 插件提供功能
  1. 不自动关闭的通知自定义时间后自动关闭
  2. 多个通知下,一次性关闭所有通知
  3. 更新通知配置,更方便的发布多个通知

插件wiki文档

  1. 插件API
  2. 插件数据
  3. notification浏览器桌面通知:关于使用notification,有可能会遇到的一些问题
  4. 更新日志

栗子:

.vue文件

求Star

如果觉得还挺好用的,可以给我点个Star

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值