Skip to content
H5 notification:一个浏览器桌面通知 npm 包,求star⭐️
Branch: master
Clone or download
Latest commit 900f90a Feb 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
README.md 1.1.1 Feb 18, 2019
deploy.sh
example.vue 1.1.0wiki文档 Feb 18, 2019
package.json

README.md

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

You can’t perform that action at this time.