瀏覽器桌面通知功能詳解

什么是 Notification？

• Notification 是瀏覽器最小化后在桌面顯示消息的一種方法

• 類似于 360 等流氓軟件在桌面右下角的彈窗廣告

• 它與瀏覽器是脫離的，消息是置頂?shù)?/p>

一、彈窗授權(quán)

• 授權(quán)當前頁面允許通知

• 可以通過檢查只讀屬性 Notification.permission 的值來查看你是否已經(jīng)有權(quán)限

• default： 用戶還未被詢問是否授權(quán)，可以通過 Notification.requestPermission() 可以詢問用戶是否允許通知

• granted： 用戶點擊允許后的狀態(tài)

• denied： 用戶點擊拒絕后的狀態(tài)，通知框不可用

Notification.requestPermission()

二、彈窗使用

• 可以通過 new Notification($title, $options) 使用通知推送功能

• title： 一定會被顯示的通知標題

• options： 可選，一個被允許用來設(shè)置通知的對象。它包含以下屬性：

• dir： 文字的方向；它的值可以是 auto（自動）, ltr（從左到右）, or rtl（從右到左）

• lang： 指定通知中所使用的語言。

• body： 通知中額外顯示的字符串

• tag： 賦予通知一個ID，以便在必要的時候?qū)νㄖM行刷新、替換或移除。

• icon： 一個圖片的URL，將被用于顯示通知的圖標。

new Notification("溫馨提醒", { 
    body: "木芒果", 
    icon: "https://profile-avatar.yssmx.cn/238b721d51d44069986d5004489dcbd3_m0_63823719.jpg!1", 
    data: "https://blog.csdn.net/m0_63823719/" 
});

三、瀏覽器支持檢測

• 使用通知推送功能前，需要先檢查瀏覽器是否支持

• 可以通過 "Notification" in window 方法去檢測

• 在瀏覽器支持的前提下，判斷用戶是否授權(quán)允許通知，如果還未授權(quán)，可以彈出授權(quán)框

• 如果用戶已經(jīng)拒絕過，我們就不去打擾用戶了

function notify() {
    // 先檢查瀏覽器是否支持
    if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
    }

    // 檢查用戶是否同意接受通知
    else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        var notification = new Notification("Hi there!");
    }

    // 否則我們需要向用戶獲取權(quán)限
    else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(function (permission) {
            // 如果用戶接受權(quán)限，我們就可以發(fā)起一條消息
            if (permission === "granted") {
                var notification = new Notification("Hi there!");
            }
        });
    }

    // 最后，如果執(zhí)行到這里，說明用戶已經(jīng)拒絕對相關(guān)通知進行授權(quán)
    // 出于尊重，我們不應(yīng)該再打擾他們了
}

四、授權(quán)回調(diào)

• 該通知有四個回調(diào)方法

• onshow： 在通知展示的時候調(diào)用

• onclose： 在通知關(guān)閉的時候調(diào)用

• onclick： 在通知點擊的時候調(diào)用

• onerror： 在通知出錯的時候調(diào)用

var notification = new Notification("溫馨提醒", { 
    body: "木芒果", 
    icon: "https://profile-avatar.yssmx.cn/238b721d51d44069986d5004489dcbd3_m0_63823719.jpg!1", 
    data: "https://blog.csdn.net/m0_63823719/" 
});

notification.onshow = function (event) {
    console.log("show : ", event);
};

notification.onclose = function (event) {
    console.log("close : ", event);
};

notification.onclick = function (event) {
    console.log("click : ", event);
    // 當點擊事件觸發(fā)，打開指定的url
    window.open(event.target.data)
    notification.close();
};

notification.onerror = function (event) {
    console.log("close : ", event);
};

五、3秒后關(guān)閉彈窗

• 實現(xiàn)3秒后關(guān)閉彈窗的功能

var notification = new Notification('標題');
notification.onshow = function () {
    setTimeout(function () {
        notification.close();
    }, 3000);
}

六、最佳實踐

notification.js

/**
 * 瀏覽器發(fā)送通知方法
 * Author：木芒果
 * @param {Object} title 通知標題
 * @param {Object} options 可選參數(shù)body(消息體)、icon(通知顯示的圖標路徑)、data(點擊通知后跳轉(zhuǎn)的URL)
 * 示例：
 * createNotify("新的消息", {
 *		body: "你有一個獎品待領(lǐng)取",
 *		icon: "https://www.baidu.com/favicon.ico",
 *		data: "https://www.baidu.com/"
 *	});
 */
function createNotify(title, options) {
	var PERMISSON_GRANTED = "granted";
	var PERMISSON_DENIED = "denied";
	var PERMISSON_DEFAULT = "default";

	// 如果用戶已經(jīng)允許，直接顯示消息，如果不允許則提示用戶授權(quán)
	if (Notification.permission === PERMISSON_GRANTED) {
		notify(title, options);
	} else {
		Notification.requestPermission(function(res) {
			if (res === PERMISSON_GRANTED) {
				notify(title, options);
			}
		});
	}

	// 顯示提示消息
	function notify($title, $options) {
		var notification = new Notification($title, $options);
		// console.log(notification);
		notification.onshow = function(event) {
			// console.log("show : ", event);
		};
		notification.onclose = function(event) {
			// console.log("close : ", event);
		};
		notification.onclick = function(event) {
			// console.log("click : ", event);
			// 當點擊事件觸發(fā)，打開指定的url
			window.open(event.target.data)
			notification.close();
		};
	}
}
/* 依次打印
 * show:   Event Object(事件對象)，事件的type為"show"
 * click:  Event Object(事件對象)，事件的type為"click"。點擊消息后消息被關(guān)閉，跳到close事件。
 * close:  Event Object(事件對象)，事件的type為"close"
 */

 index.html

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<script src="notification.js"></script>
		<script>
			createNotify("新的消息", {
				body: "你有一個獎品待領(lǐng)取",
				icon: "https://www.baidu.com/favicon.ico",
				data: "https://www.baidu.com/"
			});
		</script>
	</body>
</html>

七、兼容性

常用的Edge、Google Chrome都支持！

該圖出自："Notification" | Can I use... Support tables for HTML5, CSS3, etc

值得注意的是：你必須使用網(wǎng)絡(luò)服務(wù)器進行掛載才能正確顯示該通知，直接打開HTML是無效的，例如使用Nginx、Nodejs、HBuilder X開發(fā)工具、WebStorm開發(fā)工具去運行此程序，如需將此通知功能應(yīng)用到線上的業(yè)務(wù)，需使用HTTPS協(xié)議方可使用！文章來源地址http://www.zghlxwxcb.cn/news/detail-517431.html

到了這里，關(guān)于瀏覽器使用Notification桌面通知消息推送的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！