H5 notification:一个浏览器桌面通知 npm

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

体积不超过 2KB

npm i -S notification-koro1 使用：

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

初始化需要两个参数: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);

注意：

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. 插件提供功能 不自动关闭的通知自定义时间后自动关闭 多个通知下，一次性关闭所有通知 更新通知配置，更方便的发布多个通知 插件wiki文档 插件API 插件数据 notification浏览器桌面通知：关于使用notification，有可能会遇到的一些问题 更新日志 栗子：

.vue文件

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