Webプッシュを使ってみる

• 2022/07/13

Webプッシュを使ってみる

Webサービスを運営していると通知機能はとても大事になると思います。

Webサービスだと、サービス内での通知やメールなどが主流でしょうか。

今回はその通知方法の一つとしてWebプッシュを簡単に実装したいと思います。

流れ

1. serviceWorker.jsを読み込み
2. serviceWorker.jsではPushイベントのハンドリングをしておく
3. ユーザーがWebページにアクセス
4. 通知を許可するか聞かれるため許可する
5. Publicキーを利用してサブスクライブ設定をする
6. サブスクライブ設定が成功するとトークン、エンドポイントが発行される
7. トークン、エンドポイントはサーバー側に送信する必要がある
8. サーバー側でPush通知を行いたいタイミングでエンドポイントに向けてトークンを含めてPOSTする(暗号化の必要あり)
9. serviceWorkerが起動している場合、PushイベントをキャッチしてPush通知を実行する。

サンプルコード

https://github.com/hirotoyoshidome/exp-web-push

注意点・ほか

• Privateキーはサーバー側でメッセージのPOST時に利用します。
• Privateキーは公開してはいけません。サーバー側で保管すると良いでしょう。
• ブラウザのシークレットウィンドウではブラウザ通知は利用できないようです。(コンソールにエラーが表示されます。)
• ユーザーが通知を許可しない場合、強制的にでも通知をすることはできません。(エンドポイントやトークンが発行されません。)
• Chromeの場合、開発者モードのApplicationタブよりServiceWokerへメッセージをPUSHすることが可能です。これによりメッセージの検証ができます。
• サーバーからメッセージをPushする場合1つのテキストしか送信できませんでした。
  • Push通知にはタイトルやdataパラメータを使うとURLなどが送信可能です。
  • そのためJSON形式で送信するのが良いと思います。
  • Push通知で表示されたポップアップをクリックした時に画面遷移させることが可能です。

最後に

• Push通知は簡単にできるだろうと思っていましたが、想像以上に多くのステップを踏む必要がありました。
• しかし通知のチャネルを増やすという観点では有効な側面もあると思います。
• サーバー側からPushする場合、トークン等を含めて暗号化する必要があるようです。そのためライブラリを利用することをおすすめします。(Python, Node.js製などググれば出てきます。)