PWAにプッシュ通知つけてみた

PWA

今回は前回のPWAに続いて、プッシュ通知です

ソースはPWA作った時のものを流用するので、作ってない人は参考にしてください。

修正するのは、この3つ

index.html:プッシュ通知用にfirebaseのconfigの追加とプッシュ通知用のsub操作

service_worker.js:プッシュ通知のイベント処理追加

manifest.json:プッシュ通知用に送信者IDプロパティを追加

では、やってきます。

まずindex.html

修正箇所はよーけあるんやけど、まず①〜③に関しては全てコメントアウトです。

前回、②に関してもコメントアウトしてなかったんやけど、これよくよく考えたらfirebaseの使うサービスによって読み込むやつっぽいんで今回Hostingしかしないんで入りません。

①をコメントアウトする理由は、firebaseのコンソールで該当プロジェクトのSettingってとこ行くと、そこの下の方にindex.htmlに貼るスクリプトが用意されていて

このscriptのなかにfirebase_app.jsも入ってるし、firebase.initializeAppって関数も実行しているので、③もいらない

この辺、理解が甘くて

が同義なんかということと

が同義なんかっていうことがわかってません。。

ただ、app.jsの方を重複させてみると、一回だけ読み込まれる必要がありますよーってWARNINGが出たし、

init.jsの方を重複させると、既に存在してますみたいなエラーが出たんでどっちか一個ずつで良さそう。

後の内容は、ServiceWorkerがインストールされたら、それのpushManagerっているオブジェクトのsubscribe関数でなんやかんや設定してるっぽい笑

設定が終わったらsubっていうオブジェクトできるから、そこのendpointってとこにtokenIDってのが出来上がるみたい。

今回は、こいつを画面上に直接出力させて、このID宛にRestClientからリクエスト投げてみます。そうすると、プッシュ通知が届くって仕組み。

ちなみに、このpushManagerへの設定やけど、setTimeoutつけんかったら

uncaught-in-promise-domexceptionエラーってのが出て、うまくいかんかった。

なんか、見に行くタイミング的なもんなんかな。。

はい、次。

service_worker.js

追記したのは、最後から2つのイベント

pushはその名の通り、プッシュ通知をするためのイベントで

notificationclickは通知に対してユーザがクリックをしたら発火するイベント

はい、次

manifest.json

追記したのは、最後のgcm_sender_idって部分

こいつに該当プロジェクトの設定画面のクラウドメッセージングタブにある送信者IDってのを指定する必要がある。

できたら、firebase deployしてアクセスしてみる

すると

Your TokenIDってとこの下にtokenIDをsend/以下にもつ文字列が表示されるので、

send/以下の文字列をコピーしてRestClientへ

メソッドはPOST

URLは

HeaderにはContent-Typeにapplication/jsonと

Authorizationにkey=サーバーキーを入力

このサーバーキーは送信者IDを取得したページにあるサーバーキーを入力する

で、BODYに下記の内容

toの部分に先ほど取得したTokenIDを入力してsendを押してみよう!

すると、プッシュ通知が届きます!!

やたーーーー!

ちなみに、bodyの中にはtoの他に下記のようなプロパティもいれれて、実装次第では、jsonに入れる文字列を可変にしてプッシュ通知の内容を動的に変えることもできそう!

以上、プッシュ通知でした!

コメント

タイトルとURLをコピーしました