【Web開発】「push通知」の基本、設計のポイント

対応端末

スマホ

iPhone

ブラウザ

Chrome

対応しています。

Safari

まだ対応してくれないです。

ユースケース

• LINEでメッセージが届いた時
• メルカリで出品が売れた時
• yahoo天気で雨雲が近づいてきた時
• 「お知らせ」があるタイミング
• twitterやyoutubeのいいねが押されたタイミング

メリット

Webサイトへのアクセス数を増やせる。（リストマーケティングの一種）

種類

ローカル通知

• リマインダーとか、レポート通知などが当たります。
• オフラインでも対応可能です。

リモート通知

• Webサービスからの通知になります。
• インターネットに接続してないと受け取れません。

設計

プッシュ通知を受け取るかどうか確認する。

初めてサイトにアクセスした時に「プッシュ通知を受け取りますか？」と小さいウインドウを出して確認する設計にする。

プッシュ通知サービス

無料だとPCのブラウザにしか対応していないものが多い。

Push7

メリット

• iPhone(iOS)に対応している。
• WordPress対応（専用プラグインがある。）

デメリット

• ユーザーのスマホにpush7というアプリをインストールしてもらう必要がある。

Firebase Cloud Messaging(FCM)

• 管理画面から一括で送れる。
• 各プラットフォーム（AndroidとiOS、Webブラウザ）への通知送信を統一できる。
• ピクシブなど様々なプロダクトで活用されている。

FCMでも全てを解決できるわけじゃない

100万ユーザーに同じ内容を1つずつ送る。

ユーザー固有の内容を全ユーザーにまとめて送付する。

プッシュ通知設計のポイント

• トークンという概念を理解する。
• トピックという概念を理解する。

トークンとは？

端末を識別する。端末IDのようなもの。これによってプッシュ通知を送信する端末を判定できる。基本的に、一人のユーザーが複数端末を保持していることを考えて1人に付き複数トークンを保持できるような設計にします。

注意点

• 機種変更したら更新される。
• iPhoneとiPadそれぞれ使っている人がいる場合は、それぞれのトークンが必要になる。
• アプリを再インストールしたら更新される。

トピックとは？

例えば、「ALL_USERS」という通知ごとに名前を付けられます。

トピックに対して複数トークンを紐づけることが可能です。

メリット

• トピックに登録されている人（トークン）全員にまとめてプッシュ通知を送ることができます。
• クライアントからトークンを送ってもらわなくても送信することができる。

実装

クライアント側の実装

• トークンを保存する。
• ログアウト時にデバイストークンを消す。

バックエンド側の実装

• トークンを読み取ってプッシュ通知を送る。
• トークンの数がかなり多い場合があるので、「最新10個のトークンに対して送付する。」みたいな設計にするか、トピックを用いてまとめて送信する設計にします。
• ログアウトされていた場合は、プッシュ通知を送ってはいけないので、削除する。