通知 API

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

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

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

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

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

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

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

Notification

通知オブジェクトを定義します。

ServiceWorkerRegistration

ServiceWorkerRegistration.showNotification() および ServiceWorkerRegistration.getNotifications() メソッドが含まれており、通知の表示の制御に使用できます。

ServiceWorkerGlobalScope

onnotificationclick ハンドラーが含まれており、通知がクリックされた時にカスタム関数を実行させることができるようになります。

NotificationEvent

ExtendableEvent を基本とした、特定の型ののイベントオブジェクトです。すでに実行された通知を表現します。

• 通知 API の使用