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呀