【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（１）準備と解説
- 2019/07/08 10:52
- PWA
- プッシュ通知
- Firebase
- Cloud Messaging
- Cloud Firestore
- Node.js
- 14
PWAでプッシュ通知を実装するのが大変だったので書いておきます。
目標はこんな感じ。
- freoをPWA化する
- プッシュ通知の購読をサイトから簡単に行えるようにする
- プッシュ通知の送信は手動で行うものとする（サイトの更新のお知らせとか簡単なものしかしないので）
色々やって結果がこれ。
- サイトをWindows・Android・iOSにインストールできるようになった
- 一度キャッシュした画面ならサイトをオフラインでも閲覧できるようになった
- サイトの表示が軽くなった
- サイト上にプッシュ通知の購読状況が表示されるようになった
- サイト上でプッシュ通知の購読開始・購読停止ができるようになった
- フォアグラウンドのGoogleChrome、Firefoxを利用している複数人に対して一度にプッシュ通知を送信・受信できるようになった
- フォアグラウンド・バックグラウンドのAndroid（Chrome）を利用している複数人に対して一度にプッシュ通知を送信・受信できるようになった
「色々」の部分が長いので頑張って書いていきます。
PWAでプッシュ通知を実装する前に
まずは前提知識から。
PWAとは
PWAとは Progressive Web Apps の略です。
Googleが推進しているウェブをアプリみたいに利用できる機能のことです。
- サイトがSSL化されていることが絶対条件
- オフラインでも動作する
- プッシュ通知を受信できる
- サイトをアプリのようにインストールできる
- 指定したファイルをキャッシュできるので読み込みが早い
ので、ファンの多いサイトや読み物系サイト、CMSを利用していて動作が重いサイトなんかは割といいかもしれないと思い、実装してみることにしました。
ちなみにGoogleは動作が軽いサイトを評価する傾向があるので、SEO的な意味でもメリットはあるのかもしれません。知らんけど。
参考URL
- Qiita：いまさら聞けないPWAとAMP
- Qiita：PWAに興味を持っている人向けに概要とか動向とかをまとめた
PWA化するにはどうすればいい？
既存サイトをPWA化するのは簡単です。
- アイコン用の画像を設置する
- manifest.jsonを設置する
- service workerを設置する
以上。簡単でしょ？
というのがGoogleの言い分です。んなわけねーだろって思いました。
ちなみにWordpressではPWA化するためのプラグイン（PWA for Wordpress）があるようです。
このサイトはWordpressではないですし、プッシュ通知が最終目標だったので頑張って自作することにしました。
PWA化するためのmanifest.jsonとservice worker.jsの書き方はぐぐるといっぱいありますが、私は下記の記事を参考にしました。
詳細に書いてくださっているので助かりました。
参考URL
プッシュ通知について
プッシュ通知って最近いろんなサイトでやってますよね。
PCだと画面の右下にポコンと出てくるやつです。
あれを実装するにはいろんなサービスがありますが、サービスを使わなくても自分でできるようになりましたよっていうのがPWAのいいところらしいです。
プッシュ通知を受信できる環境を作るにはPWA化だけでOKですが、実際にプッシュ通知を送信・受信するには、PWA化だけでは不十分でした。
自分でできると言いながら今回はGoogleのfirebaseを利用しているので完全自力ではないんですけど、とにかくfirebaseを利用してプッシュ通知の受信・送信ができるようになりました。
ちなみに、今回の方法では、ブラウザでプッシュ通知を受け取る許可をするのと、実際にプッシュ通知を購読するのは別の設定です。
どちらも個別に設定が必要ですが、どちらかが欠けるとプッシュ通知は受け取れません。
プッシュ通知を購読するには、
- ブラウザでプッシュ通知を受け取る設定をする
- プッシュ通知を購読する
の２点が必要です。
ブラウザ側でプッシュ通知を受け取る設定をしていても、購読しないとプッシュ通知は受け取れません。
PWAとプッシュ通知配信サービスの併用でfirebaseまわりのめんどくさい部分はクリアできそうな気もしますが、まあ勉強のために色々やってみようってことで。
参考URL
- Pantograph Blog：【2017年版】国内のWebプッシュ通知サービス7選とその効果
firebaseについて
firebaseは、Googleのサービスです。
サイトやアプリをちょっと便利にするのに必要な機能、例えば
- SNSアカウントでのログイン
- プッシュ通知の送受信
- リアルタイムデータベース
などを利用できるようになります。しかも無料で。
容量・転送量に応じて有料プランもありますが個人サイトなら無料で十分だと思います。
firebase側で様々なスクリプトを用意してくれているので、Googleアカウントでログインしてプロジェクトを作成すれば、誰でも利用可能です。
今回は、PWA化したWEBサイトでプッシュ通知を受信・送信するのに、firebaseのCloud MessagingとCloud Firestoreを使用しました。
参考URL
node.jsについて
node.jsとは、サーバー側で動くjavascriptのプラットフォームです。
firebaseを利用してプッシュ通知を送信したりするには、サーバー側（アプリ側）での作業が必要です。
今回はアプリ側の作業をWindowsのコマンドプロンプトで行います。
この時に必要なのがnode.jsです。
node.jsを使わずに他のものを利用しても構わないですが今回はnode.jsにしました。
参考URL
- エンジニアの入り口：初心者向け！3分で理解するNode.jsとは何か?
このサイトでプッシュ通知を実装するために今回やったこと
上にもさらっと方法を書いてますが、もうちょっと詳しく書いておきます。
- サイトをPWA化した（manifest.jsonとserviceworkerの作成）
- Firebaseにプロジェクトを作成した
- Firebase Cloud Messagingでプッシュ通知を受信できるようにした
- プッシュ通知を購読するか購読しないかをサイト上で選択・設定できるようにした
- 購読状況はサイト上で確認できるようにした
- 購読開始時に発行されたトークンと購読状況をFirebase Cloud Firestoreに登録するようにした
- 購読停止時に購読状況を更新するようにした
- node.jsを使ってコマンドプロンプトからプッシュ通知を送信できるようにした
- プッシュ通知発信時に購読停止中のトークンをFirebase Cloud Firestoreから取得してトピックから削除するようにした
- プッシュ通知発進時に購読中のトークンをFirebase Cloud Firestoreから取得してトピックに登録するようにした
- プッシュ通知はトピック宛に発信するようにした
ただプッシュ通知実装するだけでめっちゃ大変ですやんGoogleの公式ドキュメント意味わかんないしとか思ったんですけどなんとかできたので努力って大事。
これを全部解説していくとあまりに長くなるので分割します。
