🐩

「Web プッシュ通知」について少し調べてみた

2023/05/29に公開

はじめに

この記事では、Web プッシュ通知について調査した結果を書いています。技術的な部分を深掘りしようと思いましたが、Web 周りの知識が乏しく結果的には「ふーん」って感じで終わってしまいました。深掘りしたい方は、より詳細な記事があったのでそちらを参照してください[1][2][3]

Web プッシュ通知とは

Web プッシュ通知は、ブラウザを経由して PC やスマートフォンにプッシュ通知を送信する機能です。ユーザが一度「通知を許可」すると、定期的に通知が飛んでくるようになります。ニュースサイトやショッピングサイト、チャットなどで Web プッシュ通知が使用されます。新しいニュースが更新されたとき、新製品が発売されたとき、友達からメッセージが届いたとき、ユーザに通知するようなイメージです。[4][5]

通知の許可とは、PC のブラウザでネットサーフィンをしていたときに左上に表示される次のようなものです。意外とちゃんと確認せず、許可ボタンを押している方も多いと思います。

Web プッシュ通知は「通知」という意味では、メールマガジンと似た性質と言えます。Web プッシュ通知はメールマガジンとは異なり、通知を許可する上で個人情報を渡す必要がないというメリットがあります。ただし、通知に使用できる文字数が少ないというデメリットがあります。メールマガジンと比べて、Web プッシュ通知の開封率はかなり高いことから、Web マーケティングとして注目されています。

Web プッシュ通知の仕組み

Web プッシュ通知の仕組みは以下のようになっています。

  1. ユーザが Web プッシュ通知の JavaScript コードが埋め込まれた Web サイトにアクセスする
  2. JavaScript による通知許可のポップアップを表示する
  3. ユーザが Web プッシュ通知を許可すると Web サイトに通知用 ID が渡される
  4. 通知用 ID を処理して、サーバに保存する
  5. サーバから通知用 ID をもとに通知を送信する
  6. ユーザにバックグラウンドで通知する(Service Worker)

技術的な詳細については、参考文献を参照してください。

通知状況の確認

Chrome の設定から「プライバシーとセキュリティ」>「サイトの設定」>「通知」から、許可している通知とブロックしている通知を確認できます。私の場合は、Google や Twitter などの通知が許可されていることがかりました。

https://scan.netsecurity.ne.jp/ にアクセスすると「通知の可否」に関するポップアップが出ました。今回は意図的に通知を許可します。

通知の許可

通知を許可します。Chrome の通知一覧に反映されたことを確認しました。

通知のブロック

Chrome の設定画面から、Web サイトを選択してブロックをすることができます。

参考文献

脚注
  1. https://zenn.dev/s_takashi/articles/b01980461f3b21 ↩︎

  2. https://zenn.dev/appare45/articles/web-notification ↩︎

  3. https://qiita.com/hira3/items/9ef08337b329f3d2f019 ↩︎

  4. https://www.webcas.jp/browserpush/knowhow/webpush/ ↩︎

  5. https://kigyolog.com/article.php?id=1048 ↩︎

Discussion