快速提示：顯示瀏覽器通知的最簡單方法
JavaScript Web Notification API 允許桌面和移動瀏覽器顯示帶有自定義內容的通知。雖然它的支持曾經相當不一致，但該 API 現在與大多數現代瀏覽器兼容，我們已經看到它在許多網站和應用程序中實現。
在本文中，我們將向您展示使用開源 Push.js 庫設置瀏覽器通知的最快方法。
項目設置
我們想要構建一個簡單的演示應用程序，它會請求許可，然後在按鈕單擊時發送通知。為簡單起見，我們將在單個 index.html 中工作 帶有內聯腳本的文件。完整源代碼可在 GitHub 上獲得。
我們需要做的第一件事是包含庫。 Push.js 可以通過 npm 或本地文件安裝，但最簡單的實現方式是通過 CDN：
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>
Push.js 庫對於使用 Web 通知不是必需的，但它提供了一個乾淨的 API，與本機通知 API 相比，它更容易使用。 Push.js 會處理權限、Service Worker 和跨瀏覽器的不一致，所以我們不必這樣做。
請求權限
用戶需要先授予權限，然後我們才能向他們發送通知。這是通過您可能已經看過的內置瀏覽器對話框完成的：
當我們嘗試發送第一個通知時，Push.js 會自動請求許可。但是，在很多情況下，我們希望事先手動詢問用戶：
Push.Permission.request();
這將打開內置瀏覽器對話框，提示用戶接受或拒絕接收通知。如果權限已經被授予或拒絕，上述代碼將被忽略。
創建通知
要顯示通知，我們只需調用 Push.create 方法，它需要一個標題和一個包含各種有用首選項和回調的可選對象：
Push.create('Hi there!', {
body: 'This is a notification.',
icon: 'icon.png',
timeout: 8000, // Timeout before notification closes automatically.
vibrate: [100, 100, 100], // An array of vibration pulses for mobile devices.
onClick: function() {
// Callback for when the notification is clicked.
console.log(this);
}
}); 您可以在此處查看所有可用選項。
在我們的演示中，我們會在按鈕單擊時顯示通知，但不需要用戶交互 - 可以隨時創建新通知，包括此時選項卡未處於活動狀態時。
確保不要過多地打擾用戶。僅當您想要更新重要消息（例如新短信或新朋友請求）時才發送通知。
瀏覽器兼容性
大多數現代瀏覽器都支持通知 API。要查看您選擇的瀏覽器是否支持它，請嘗試運行我們的演示應用程序。它應該可以在桌面 Chrome、Firefox 和 Safari 以及 Android 版 Chrome 中正常工作。此列表中唯一缺少的流行客戶端是 iOS Safari，它不提供任何形式的網絡通知。
這裡要注意的另一件重要事情是，為了在 Android 中顯示通知，需要通過 HTTPS 託管網絡應用程序。
進一步閱讀
通知是瀏覽器世界中一個相對較新的補充，但我們可以期待看到越來越多的通知，尤其是隨著漸進式 Web 應用程序變得越來越流行。如果您想了解有關 JavaScript 通知的更多信息，我們建議您查看以下一些很棒的資源：
- Push.js 的創建者的一篇博文，討論了他創建該項目的原因以及他的未來計劃 - 在這裡。
- Push API - 一個很棒的新 API，即使網絡應用未打開，用戶也可以接收通知 - 在這裡。
- 什麼才是好的通知？ - 關於如何更好地通知通知的 Google Developers 文章 - 在這裡。
