HTML5 中的 JavaScript Web Notification API 允許桌面和移動瀏覽器顯示包含自定義內(nèi)容的通知隘冲。JavaScript Web Notification API 現(xiàn)在與大多數(shù)現(xiàn)代瀏覽器兼容践叠，我們已經(jīng)看到它在許多網(wǎng)站和應(yīng)用程序中實現(xiàn)。
在本文中荒澡，我們將向您展示使用開源 Push.js 庫設(shè)置瀏覽器通知的最快方法。
實現(xiàn)思路
我們想要構(gòu)建一個簡單的演示應(yīng)用程序官紫，要求獲得權(quán)限驼鹅，然后在按鈕點擊時發(fā)送通知。為簡單起見纽门，我們將使用內(nèi)聯(lián)腳本在單個 index.html 文件中工作重绷。
我們需要做的第一件事就是引用庫。Push.js 可以通過 npm 或本地文件安裝膜毁，但實現(xiàn)它的最簡單方法是通過 CDN ：
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>
Push.js 庫不是使用 Web Notifications 所必需的，但它提供了一個干凈的 API 愤钾，與本機 Notification API 相比瘟滨，它更容易使用。Push.js 會處理權(quán)限問題能颁，服務(wù)工作者和跨瀏覽器的不一致性等問題杂瘸，因此我們可以省掉很多不必要的麻煩。
獲取用戶許可
用戶需要先授予權(quán)限才能發(fā)送通知伙菊。
當(dāng)我們嘗試發(fā)送第一個通知時败玉，Push.js 會自動請求權(quán)限。但是镜硕，在許多情況下运翼，我們希望事先手動詢問用戶：
Push.Permission.request();
這將打開內(nèi)置瀏覽器對話框，提示用戶接受或拒絕接收通知兴枯。如果已授予或拒絕權(quán)限血淌，則將忽略上述代碼。
創(chuàng)建通知
要顯示通知，我們只需調(diào)用 Push.create 方法悠夯，該方法需要一個標(biāo)題和一個包含各種有用首選項和回調(diào)的可選對象：
// 開始調(diào)用 Push.create 方法癌淮， Hello world! 是通知的標(biāo)題
Push.create("Hello world!", {
// body 選項是通知的內(nèi)容
body: "How's it hangin'?",
// icon 選項是通知的圖片
icon: './icon.png',
// timeout 選項是通知停留時間
timeout: 4000
});
下面的演示中，我給一個按鈕綁定了上面的方法沦补，只要點擊按鈕就可以彈出通知窗口乳蓄。
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Push.js</title>
</head>
<body>
<button id="demo-button">點擊測試</button>
<script src="https://cdn.bootcss.com/push.js/1.0.5/push.js"></script>
<script>
var button = document.getElementById("demo-button");
Push.Permission.request();
button.onclick = function () {
Push.create("Hello world!", {
body: "How's it hangin'?",
icon: './icon.png',
timeout: 4000
});
};
</script>
</body>
</html>
在這里可以看到所有可用選項：
https://pushjs.org/docs/options
確保不要打擾用戶太多夕膀。僅當(dāng)想要更新重要內(nèi)容（如新短信或新朋友請求）時才發(fā)送通知虚倒。
瀏覽器兼容性
大多數(shù)現(xiàn)代瀏覽器都支持 Notification API。
要查看您選擇的瀏覽器是否支持它店诗，請嘗試運行我們的演示應(yīng)用程序裹刮。
它應(yīng)該在桌面 Chrome，F(xiàn)irefox 和 Safari 以及 Chrome for Android 中沒有問題庞瘸。
此列表中唯一缺少的流行客戶端是 iOS Safari捧弃，它不提供任何形式的 Web 通知。
另一個需要注意的重要事項是擦囊，為了在 Android 中顯示通知违霞，Web 應(yīng)用程序需要通過 HTTPS 托管。
進(jìn)一步了解
通知是瀏覽器世界的一個相對較新的補充瞬场，但我們可以期待看到越來越多买鸽，特別是當(dāng) Progressive Web Apps 變得更受歡迎時。如果您想了解有關(guān) JavaScript 通知的更多信息贯被，建議可以查看以下資源：
Push.js 的創(chuàng)建者的博客文章眼五，討論他創(chuàng)建項目的原因以及他未來的計劃。
Push API - 一個新的 API彤灶，允許用戶即使在 Web 應(yīng)用程序未打開時也能收到通知看幼。
https://developer.mozilla.org/zh-CN/docs/Web/API/Push_API
如何發(fā)一個好的通知？- Google Developers 有關(guān)如何更好地發(fā)布通知的文章幌陕。
https://developers.google.com/web/fundamentals/push-notifications/common-notification-patterns
希望分享的內(nèi)容對大家有幫助诵姜，也可以分享給你們的小伙伴，感謝你們的關(guān)注與支持搏熄。
點個關(guān)注棚唆，就是一份支持。
