ブラウザのプッシュ通知ができるようになった

任意のタイミングで任意の内容をブラウザのプッシュ通知ができるようにしたくて、
①pushnateという、Google Cloud Messagingを利用したプッシュ通知サービスを試したあと、
ユーザ個別にプッシュ通知を送りたくなったので、
②Firebase Cloud Messagingの一部を利用してプッシュ通知ができるようにしたが、
Google Chromeでしか動かないコード(エンドポイントあたりがアレで)だったのを、
③結局最初から最後までFirebaseに頼ったら苦労せずFirefoxとかでも動くようになった。

 

ちなみに、一斉にプッシュ通知を送るだけならpushnateで十分だとおもう。あと③をはじめから知っていたら②はやってなかった。アホ。

参考

Firebase Cloud Messaging (FCM) で Web Push 通知を実装してみた | rilakkuma3xjapanのブログ
CSSのコードとかいらねーって思って読むのを後回しにしてたけど、結局一番参考になった。ここのサイトで足りない分は以下二つで補えば良い。

Firebase Cloud Messaging(FCM)でより簡単にWebブラウザにPush通知を送るサンプル - DRYな備忘録
Firebaseに頼りすぎないやつ。シンプルに動くコードがあるのと、詰まったところが一緒で参考になった。

ブラウザプッシュ通知とユーザー個別に内容を送信する実装方法 in GAMY - Qiita
FCMじゃなくてGCMだけど同じ。サーバサイドをPythonで書いてたから「サーバからGCMを送信」のところがアレだったけど、振り返ってみるとサーバサイドでエンドポイントにjsonをPOSTするというだけだった。

参考にできなかった…

Set Up a JavaScript Firebase Cloud Messaging Client App  |  Firebase