Webのプッシュ通知とは何か、それを支える3つのブラウザーAPI、iPhoneのホーム画面のルールを解説。ブラウザーで試せる許可のデモ付きです。
プッシュ通知とは、ウェブサイトやアプリが端末に送る短いメッセージで、サイトを閉じていても表示されます。Webでは、訪問者が同意した後に、3つのブラウザー機能が必要です。バックグラウンドで動くService Worker、メッセージを受け取るPush API、それを表示するNotifications APIです。
Webプッシュの構成要素
プッシュ通知を使えば、ショップは注文の発送を、予約サイトは明日の予約のリマインダーを、メールなしで顧客に伝えられます。うまく使えば歓迎されますが、早すぎるタイミングで許可を求めると永久にブロックされてしまいます。下のデモでは、ローカル通知だけを使って許可の状態を確認できます。
はい。iOSとiPadOS 16.4以降で、ホーム画面に追加したウェブアプリで使えます。WebKitによると、そうしたアプリは許可を求めることができ、そのリクエストはボタンのタップなど、ユーザーの直接の操作から行う必要があります。
いいえ。MDNでは、Push APIはウェブアプリがフォアグラウンドにあるかどうか、さらには読み込まれているかどうかに関係なくメッセージを受け取れるものと説明しています。メッセージはService Workerが処理します。
granted（訪問者が許可した）、denied（ブロックした）、default（未決定）です。defaultの状態では、ブラウザーはdeniedと同じように振る舞います。
はい。MDNでは、通知の許可リクエストは安全なコンテキストでのみ利用可能とされており、Service Workerも安全なコンテキストでのみ使えるとしています（開発中はhttp://localhostも対象になります）。
pushManager.subscribe()のオプションで、すべてのプッシュがユーザーに見える何かを表示することを約束するものです。MDNによると、ChromeとEdgeではtrueに設定しないと購読が拒否されます。
訪問者がボタンをタップしたときにだけ実行されます。公開鍵はサーバーのVAPID鍵ペアから取得します。
Service Workerはpushイベントで起動し、それに対して通知を表示しなければなりません。
お使いのブラウザーが何に対応しているかを確認し、自分宛てにローカル通知を1件表示できます。購読は行われず、サーバーも関与しません。
このブラウザーの対応状況
Notifications API
Service Worker
Push API（PushManager）
安全なページ（HTTPS）
はい
いいえ
現在の通知の許可状態：
まだ尋ねていません（default）
許可済み（granted）
ブロック済み（denied）
このブラウザーでは非対応
許可を求める
テスト通知を表示
ご注文の準備ができました
これはwe.incのガイドからのローカルテストです。サーバーからは送信されていません。
システムに送信しました。何も表示されない場合は、端末の通知設定を確認してください。
このブラウザーではページからの通知を表示できませんでした。多くのスマートフォンでは、通知はService Worker経由でしか届きません。
このサイトの通知をブロックしています。元に戻せるのはあなただけで、アドレスバーの横にあるサイト設定から行えます。
注文の発送時にお知らせを受け取りますか？
お送りするのは発送のお知らせだけです。いつでもオフにできます。
はい、通知を受け取る
今はしない
ブラウザーのプロンプトは表示されていないため、ブロックされることなく後で改めて尋ねられます。
無料で始める · クレジットカード不要