トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

Webプッシュ通知のUIなどについて調べる

 

サイト

Webのプッシュ通知って、たまに出てきては即ブロックするから使ったことなかった。

いざ、どのサイトがプッシュ通知送ってくれるか思い出そうとしても思い出せない。

2週間ぐらいWebプッシュ通知許可しまくったけど、ほぼ送ってきてくれない。夜とかに送ってるから昼間PCで作業してるときに気付かないのかな・・・?

以下のふたつは結構送ってきてくれた

・Qiita

・Insta360

その他プッシュ通知があるもの(なお送られたことはない)

・旅色

当サイトのプッシュ通知について|旅色LIKES

・徳島新聞

徳島新聞デジタル|徳島県のニュース、イベント情報

・Pintarest

・Instagram

Googleカレンダーとかslackとかもあるけど、自分に関する行動でそのサービス使ってないと送られてこないよな~

 

あとこちらのサイトは好きなタイミングでプッシュ通知送れる!ただし1日1回?かな

ramen-sender.vercel.app

qiita.com

通知許可

Qiitaが毎日定期的に通知送ってくれて研究に良かった。

この右下の受け取るを押すと、

(PC↑、スマホ↓)

 

おなじみのこれが出る。

Android Chromeだとこんな感じ(Qiitaじゃないけど)

AndroidでPWA化してアプリ開くとこれが出た

iOSではPWA化しないと通知送れない。しかもsafariだけしか送れないっぽい。iOSのchromeとかではどうやっても送れないっぽい?

zenn.dev

設定でオンオフできる。

根本的にはブラウザの設定で通知の許可やブロックを変更する

chrome://settings/content/notifications?search=%E9%80%9A%E7%9F%A5

 

 

出すタイミング

Macのsafariでは「クリックやキーボード操作といったユーザーの能動的なアクションがあって初めて出現」するらしい。

www.suzukikenichi.com

 

Webプッシュ通知ではじめのころの2018年の記事の予言が当たってる・・・

たとえば、事前のコンセントがなくいきなり「プッシュ通知を有効にしますか」と出てくる。これは、ユーザーからすると何故通知が出たのかわからないので拒否されてしまう。
こういったサイトが増えてくるとユーザーの通知拒否が増え、Webプッシュ通知が廃れてしまう恐れがある。伊藤氏は、「Webプッシュ通知の発展がこれからというこの立ち上がりの時期にこそ、導入企業に気を付けて欲しいことがある」と語った。それは、必ずユーザーに何の通知かを知らせること。これは有効化率を上げるためによくとられているフローだ。

webtan.impress.co.jp

Instagramはワンクッションあった。

すぐ出す派の主張

ユーザーがあなたのWebサイトに訪問した際、まずファーストビューでサービス内容のよしあし、自分にとって有益かどうか、瞬時に判断します。
この瞬間はわずか1秒〜3秒といわれています。ここでユーザーの心を瞬時につかみ、直帰してしまわないようなタイミングでポップアップ許諾枠を表示することを推奨しています。
私たちのベストプラクティスは3秒です。

www.pushcode.jp

確かにそのサイトにとってはワンクッション挟むよりオンにする人増えるかもだけど、Web全体で見たら即ブロックする人を増やすだけだよな~

正直よく使うツール系以外で、Webプッシュ通知をオンにする人ほぼいなそう。

 

即出さないとしたらいつがいいか。

note.com

ログインした後など

 

PWA

iOSではPWAが必要ということでPWAもついでに調べた。

Androidだとこういうのを出せるらしい

Androidで手動で追加するとき

PCだとこれ

デスクトップにこういうショートカットができる

肝心のiOSでは出せないのかな~見たことない。手動だと共有マーク>ホーム画面に追加

出すタイミング制御しずらいらしい

qiita.com

でもこちらの記事ではこのポップアップを出すためのボタン作ってる!

demi-urge.com

って思ったけどサンプルサイト見たらPCだと出せたけどAndroid&Chromeだとボタンでないから対応しなくなったのかな・・・?

https://demi-urge.com/apps/Counter/app.html

 

他にPWA対応しているサービスだとワークマンの各店舗のページが対応してた。通知なさそうだけど。他にも何かあった気がするけど忘れた

www.workman.co.jp

通知のスタイル

OSとかによって出せる項目や上限の全然違う。

この記事がとっても詳しい

www.pushcode.jp

Android Chromeから

AndroidPWAからだとベルマークになる。あとChrome開いてなくても送れるとかの違いがあった気がする。

画像アリバージョン

 

Windows

iOSのPWAからの通知

送る頻度や時間

週1or毎日 毎日送るのって送る側も大変だよな。自動で送るんだろうけど・・・

prtimes.jp

React Next.jsでの実装(途中)

AIに聞いてボタンを押したら許可ダイアログを出すところまではできた。

service workerで何か発行して、通知を送る画面も作って、AIの言うとおりに実装したつもりだけど通知が送られない。

簡易テストだから同じ画面で送ろうとしてるけど、普通のサービスはどうやって通知送ってるんだろう~~

 

あとv0でもやってみてるけど、許可ダイアログも出ない。さすがに無理なのか?