{{DefaultAPISidebar("Web Notifications")}}
Notifications API允許網頁控制向終端用戶顯示系統通知 — 它在網頁瀏覽器的視圖之外，因此使用者切換顯示卡或移至不同的應用程式也能顯示。此 API 設計為在相容於不同平台與現有的通知系統相容。
在受到支持的平台上，顯示系統通知通常涉及兩件事。 首先，用戶需要授予當前的來源權限才能顯示系統通知，通常在應用程式或網站初始化完成後使用{{domxref("Notification.requestPermission()")}} 方法。
btn.addEventListener('click', function() {
let promise = Notification.requestPermission();
// wait for permission
})
這不僅是最佳實踐 — 您不應向用戶發送他們不同意的通知，並且在未來瀏覽器將明確禁止沒有響應用戶請求允許通知對話框的通知。Firefox 72 開始已遵循這項約定。使用此方法將產生一個請求對話框，如下所示：
用戶可以從此處選擇允許、屏蔽來自此來源的通知，也可以不做選擇。 一旦選定，該設置通常將在當前會話中保持不變。
注意: 從 Firefox 44 開始，Notifications 和 Push 的權限已合併。如果授予通知權限則推送也將被啟用。
下一步，使用 {{domxref("Notification.Notification","Notification()")}} 構造函數創建一個新通知。 這必須要傳遞一個標題參數(title)，並且可以選擇性的傳遞選擇物件指定諸如文字方向、正文、圖標、撥放通知的聲音等等。
{{AvailableInWorkers}}
另外，Notifications API規範指定了 ServiceWorker API 的許多附加功能，以允許服務人員觸發通知。
注意: 要了解有關在自己的應用程序中使用通知的更多信息，請閱讀 Using the Notifications API。
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Living standard |
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 5{{property_prefix("webkit")}}[1] 22 |
{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}[2] {{CompatGeckoDesktop("22.0")}} |
{{CompatNo}} | 25 | 6[3] |
| Available in workers | {{CompatUnknown}} | {{CompatGeckoDesktop("41.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Service worker additions |
{{CompatChrome(42.0)}} |
{{CompatGeckoDesktop("42.0")}}[4] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | {{CompatUnknown}} |
{{CompatVersionUnknown}} |
{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}[2] {{CompatGeckoMobile(22.0)}} |
1.0.1{{property_prefix("moz")}}[2] 1.2 |
{{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} |
{{CompatVersionUnknown}} |
| Available in workers | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile(41.0)}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Service worker additions | {{CompatNo}} | {{CompatNo}} | {{CompatGeckoMobile(42.0)}}[4] | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(42.0)}} |
[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification. Before Chrome 32, {{domxref("Notification.permission")}} was not supported.
[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification was done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification() method. In addition, the Notification was displayed when calling the show() method and supported only the click and close events (Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.)
[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).
[4] Firefox 42 has shipped with web notifications from Service Workers disabled.
When using notifications in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above:
"permissions": {
"desktop-notification": {}
}