利用JavaScript推送Web Notification

作者 Calpa 日期 2017-02-22 共225字
Web

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

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

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

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

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

Imgur

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

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

Imgur

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

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

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

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

參考資料

  1. Using the Notification API