概要
Web Pushをトライした時の情報を整理する目的です
ブラウザを立ち上げるとFacebookやGmailからプッシュ通知をよく目にすると思いますが、あれを実装します
基本的な仕組みは以下のエントリでわかりやすく解説されていますので、ご参照ください
ざっくりとした処理の流れ
プッシュ通知登録時
ブラウザ（プッシュ通知許可） -> アプリケーションサーバ（ユーザのプッシュ通知キーを保存）プッシュ通知する時
アプリケーションサーバ（通知情報）-> Google Firebase Cloud Messaging(FCM) -> ブラウザ（通知内容の表示）
さっそくコード
以下の説明はこちらのサンプルコードで説明します
このコードはGoogleのウエブアプリへのプッシュ通知をベースに実装したものです
構成
- static # クライアント
- js
- webpush.js # プッシュ通知の購読是非などの処理
- webpush-sw.js # プッシュ通知を許可した際に、対象のブラウザに保存されるスクリプト
- index.html # プッシュ通知購読を求めるページ
- success.html # プッシュ通知を押下時に遷移するページ
- subscriptions
- subscription.json # ユーザがプッシュ通知を許可した際に購読キーを保存する（ストレージとしての仮置き）
- .env # 環境変数
- app.js # Webアプリケーション(プッシュ通知を送る)
- subscription.js # プッシュ通知の購読キーを保存や取り出す処理
実行手順
Googleのcompanion-siteで秘密鍵と公開鍵を生成する
-
手順1で生成した公開鍵と秘密鍵を.envファイルに追加します
APP_PUB_KEY=<public-key> APP_PRV_KEY=<private-key> -
手順1で生成した公開鍵をwebpush.jsに追加します
'use strict'; const applicationServerPublicKey = '<public key>'; -
nodejsライブラリのインストール
> npm install -
サンプルアプリの起動
> npm start プッシュ通知ページにアクセスし、「プッシュ通知を有効」を押下
＊ブラウザがプッシュ通知に対応していない場合は「Push messaging is not supported」が表示されます-
プッシュ通知を許可した場合は、手順1で生成した公開鍵をもとに購読キーが生成されます
許可した時点でsubscription.jsonにこの購読キーが保存されます
あとは好きなタイミングでサーバサイドでその購読キーを用いてユーザにプッシュ通知を送ることができます
今回はユーザの識別子としてuseridという文字列を用いていますが、システムに応じて一意のユーザ識別子で保存してください
また、それと同時にwebpush-sw.jsがブラウザのserviceworkerに登録されます
chromeのアドレスバーにchrome://serviceworker-internalsを入力することで確認できます
＊webpush-sw.jsを更新した場合は、手動で登録済みのserviceworkerを削除するか、更新する処理を追加してください！
「Push Nortification」ボタンを押して、プッシュ通知を送る
今回はクライアント側にトリガーを置きましたが、システムに応じてサーバ側から送信してくださいプッシュ通知が表示され、クリックするとsuccess.htmlに遷移します
ハマったところ
前述でも書きましたが、webpush-sw.jsを更新したのに反映されないところで少々ハマりました。
それ以外はGoogle公式のチュートリアルで一通り試したので問題なく実装できました