如果要推送通知的話,我們首先要請求權限:Notification.requestPermission()

之後檢查Notification.permission來查看是否擁有權限。該值會是下面三個其中之一:

  1. default: 從未詢問用戶
  2. granted: 用戶授權顯示通知的權限
  3. denied: 用戶不授權。。。

創造一個通知很簡單,new Notification(text)可以了。

var text = "Hello, world";
new Notification(text);

沒有圖片的話會比較空虛,可以加入options。

function push() {
  var title = "這是一個標題。。。";
    var options = {
        body: "Calpa 寫了一篇文章XD",
        icon: "https://calpa.github.io/img/profile.png"
    }
    var n = new Notification(title, options);
}

push();

如果要增加與用戶的互動,可以利用Notification的事件:

  1. onshow
  2. onclick
  3. onclose
  4. onerror

我們可以監聽onclick,當用戶點擊通知,瀏覽器就會跳到目標頁面。

n.onclick = (event) => {
    event.preventDefault();
    window.open('https://calpa.github.io/', '_blank');
}

參考資料

  1. Using the Notification API
如果你覺得我的文章對你有幫助的話,希望可以推薦和交流一下。歡迎關注和 Star 本博客或者關注我的 Github