通知 API

注: この機能は Web Worker 内で利用可能です。

安全なコンテキスト用

この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

通知 API を使えば、ウェブページがエンドユーザーに表示するシステム通知を制御できるようになります。これらのシステムは、最上位の閲覧コンテキストのビューポートの外にあるため、ユーザーがタブを切り替えたり、別のアプリに移動していても表示されます。また、この API は既存の通知システムと互換性を持つように設計されているので、異なるプラットフォームでも動作します。

概念と使い方

対応済みのプラットフォームでは、システム通知を表示するには、一般的に2つのことが必要です。まず、ユーザーが現在のオリジンに対して一ステム通知を表示する許可を与える必要があります。これは一般的にアプリやサイトが初期化されたとき、 Notification.requestPermission() を使用して行われます。これは、例えばボタンをクリックするなど、ユーザーの操作に反応して行う必要があります。

btn.addEventListener('click', function() {
  let promise = Notification.requestPermission();
  // wait for permission
})

これはベストプラクティスで、ユーザーが同意していない通知でユーザーに迷惑をかけるべきではありません。しかし、今後ブラウザーはユーザーの操作から起動されていない通知を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っています。

これは以下のようにリクエストダイアログを起動します。

ここでは、ユーザーはこのオリジンからの通知を許可するかどうかを選択できます。一度決定がなされると、現在のセッションの間はその設定が保存されます。

: Firefox 44 からは、通知とプッシュの許可が統合されました。通知に許可が与えられれば、プッシュも同時に有効になります。

つぎに、新しい通知は Notification() コンストラクターを使って作られます。このコンストラクターには、必須の title 引数と、オプションを指定する引数として options オブジェクトを与えることができます。オプションには、テキストの方向、本文テキスト、表示アイコン、通知サウンドなどが指定可能です。

さらに、通知 API の仕様には、いくつかのサービスワーカー API が定義されており、サービスワーカーが通知を発行できるようになっています。

: 自分のアプリでの通知の詳しい使い方については、通知 API の使用を参照してください。

通知インターフェイス

Notification
通知オブジェクトを定義する

サービスワーカーの追加要素

ServiceWorkerRegistration
ServiceWorkerRegistration.showNotification() および ServiceWorkerRegistration.getNotifications() メソッドが含まれており、通知の表示の制御に使用できます。
ServiceWorkerGlobalScope
ServiceWorkerGlobalScope.onnotificationclick ハンドラが含まれており、通知がクリックされた時にカスタム関数を実行させることができるようになります。
NotificationEvent
ExtendableEvent に基づく、特定のタイプのイベントオブジェクトです。すでに実行された通知を表現します。

仕様書

仕様書 状態 備考
Notifications API 現行の標準 Living standard

ブラウザーの互換性

BCD tables only load in the browser

関連情報