🔔

Web Notifications APIで通知を送信

2023/02/25に公開5

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のブラウザ互換性
Notifications API ブラウザーの互換性

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

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

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

https://r1l6m.csb.app/

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

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

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

通知の許可を求めています→「ブロック」=denied、「許可する」=granted、「×」=default

通知の作成

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

new Notification(title, option);

なおtitleは必須です。

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

名前 項目
body 本文
icon 通知の画像アイコンURL
new Notification("テスト", {
	body: "テストです
});

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

注意点

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

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

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

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

Firefoxのアドレスばーの右端にメッセージのアイコンが表示されている

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

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 ↩︎

Discussion

neji_bitneji_bit

記事、大変参考になりました!
私も「iPhone(iOS16.4)で、ホーム画面に配置したPWAから通知を送ろう」としているものなのですが、よろしければ質問してもよろしいでしょうか?
現時点(2023/05/04)で最新のiOSで上記にトライしてみたところ、Notification.requestPermission() のところでつまずいてしまいました。「許可しますか?」のダイアログが出ず、暗黙のうちにdeniedになってしまい。。
appareさんのケースではiPhoneのPWAで通知の許可ダイアログ、ちゃんと出たでしょうか?成功例があるかな?だけまずは知りたく。
参考までに「通知の許可ダイアログがでるかどうかだけ確認できるPWAコード」をGithubPagesに配置したので、共有させていただきます。(https://neji-bit.github.io/pages/)

neji_bitneji_bit

↑解決しました!

appareappare

最近忙しく、なかなか返信できておらずすみません
解決したようでよかったです

ぺんぎん@自作PCぺんぎん@自作PC

自分もダイアログが出ない人です。
どうすればいいのでしょう(´・ω・`)

Alinco8Alinco8

僕も出なかったのですが、ボタンを押したらrequestPremission()するようにしたらできました!
試してみてはいかがでしょうか?

ログインするとコメントできます