Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

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

About

H5 notification:一个浏览器桌面通知 npm 包,觉得不错的话,点击右上角给个Star⭐️呀~

Resources

Releases

No releases published

Packages

No packages published