Web Notifications APIで通知を送信

iOS、iPad OS 16.4よりSafariで、Notifications APIが使えるようになります^[1]。

この記事では、Web NotificationのAPI・iOS上での挙動について解説します。

こちらから実際の挙動を体験できます。

https://r1l6m.csb.app/

Web Notifications API の概要

Notifications API はJavaScriptを使いブラウザ上で通知を送信できるAPIです。

デスクトップブラウザではIEを除く最新のブラウザでサポートされています。モバイルブラウザではiOSでは16.3からサポートされます。

Notifications API ブラウザーの互換性

Web Notifications APIで通知を送信するには

1. ユーザーから権限を取得する
2. 通知を作成する
   という流れになります。

こちらから実際の挙動を体験できます。

https://r1l6m.csb.app/

通知を送信する権限の取得

権限の取得にはNotification.requestPermission()を利用します。

Notification.requestPermission().then(
	console.log
)
// > granted （許可された場合）
// > denied （許可されなかった場合）
// > default （どちらでもない場合）

通知の作成

通知は Notificationオブジェクトを作成することで送信されます。

new Notification(title, option);

なおtitleは必須です。

optionでは次のことを指定できます

名前	項目
body	本文
icon	通知の画像アイコンURL

new Notification("テスト", {
	body: "テストです
});

closeイベントで通知が閉じられたことを検知、openイベントで通知が開かれたことを検知できます。

注意点

シークレットモードでは通知がブロックされる

シークレットモードで開いているページがNotification.requestPermission()を実行してもユーザーにダイアログは表示されません。

Firefoxではユーザーアクションに起因しない通知権限の取得はブロックされる

Firefoxではユーザーのインタラクションを待たずにNotification.requestPermission()を実行するとアドレスバーにメッセージのアイコンが表示されます。しかし、このアイコンは地味なので通常のユーザーは気づかないと思います。

Firefoxでは再度Notification.requestPermission()を実行すれば、許諾を求めるポップアップが表示されます。

Microsoft Edgeでは通知は自動的にブロックされる

Microsoft Edgeでユーザーのインタラクションの有無に関わらずNotification.requestPermission()を実行するとアドレスバーに通知がブロックされましたと表示され自動的にブロックされます。

iOS、iPad OSにおけるNotification APIの挙動

iOS、iPad OS（以下iOS）ではウェブアプリがホーム画面上に追加されなければ、通知を送信する権限を取得できません。

通知を送信する権限が与えられると、ネイティブアプリと同様に設定の通知画面から通知の権限を管理できます。

他のネイティブアプリと同様に、通知はロック画面・通知センター、Apple Watchで表示されます。

脚注

1. Web Push for Web App on iOS and iPad OS