【Firebase】Hosting & Realtime Database

ちょっと興味があったのでHostingとRealtimeDatabaseを利用してチャットを作成しました。
ドキュメントを読んで勉強してある程度動くまでで5時間程度
ついでにPWAの設定をいれてスマホのホーム画面にアイコン置けるようにもしました。
所々ハマったりもあったのでメモ程度に残しておきます。

・Firebaseの導入
参考サイトは沢山あるのでそちら参照してください。

・Google認証の導入
最初はポップアップ型にしてたのですがポップアップブロックされて面倒なので
リダイレクト型にしました。
その際、何も考えずに作ったら無限ループしてしまって悲しみ。
下記のサンプルのまんまで正常に動くようになりました。
github.com

・PWAの導入
下記サイト参考にさくっといけました。
qiita.com

ちなみにアイコンは下記サイトで生成、なかなか( ・∀・)ｲｲ!!
hatchful.shopify.com

こんなアイコンが秒速でつくれました(*´∀｀*)

・チャットデータの同期
昔チャット作った時は結構苦労したのですが、簡単にできすぎてヤバイですね。
チャットの削除とかはないので今回は追加時のみで大丈夫でした。

// コメントが投稿された時のコールバック
var chatDbRef = firebase.database().ref().child("chat");
chatDbRef.on("child_added", function(snapshot, key){
  // 1件単位で届くのでコメント一覧に適宜登録してく
}

・できあがった画面は以下の通り
ログイン画面

チャット画面(テストに付き合ってもらった友人の情報は隠させてもらいます。）

機能面はまだ全然足りてないですが、徐々に増やして遊びたいと思います。