FirebaseでPWAを動かすノート

Pref.

FirebaseでPWAを実装しようとしたメモ的なもの.
PWAは前提としてssl(https)を使った通信でなければならない.よって個人でサーバを借りてnginxとかでやるのは面倒.
そこで出できたのがgoogleの提供する,Firebase.
Firebaseを使えば勝手にhttpsで通信をしてくれるので,なんと手っ取り早い. この記事ではFirebase上でPWAを動かすあれこれを書いていきたいと思います.

Env.

macOS
Firebase

Method

Firebase-tools

Firebase-toolsとはFirebaseで公開するコンテンツの編集とかを行うためのツール.
これを入れると色々とゴネゴネできるみたい. 入れ方は以下のURL先を参照して.node.js(npm)を入れる必要がある.
https://qiita.com/taketakekaho/items/dd08cf01b4fe86b2e218

Firebase-toolsのコマンド

npmをつかってまずはfirebase-toolsのインストール Firebase-tools上でFirebaseにログインする.このコマンドを叩くとブラウザが立ち上がり,ログインできる.
またログアウトも以下のコマンド Firebase-toolsの初期化コマンド?
これを実行するとホームディレクトリ(?)にfirebaseの関連ファイルが生成される.
実行後,予めFirebaseでプロジェクトを作成しているとどのプロジェクトをローカルで編集するかを選択できる. ローカルでサーバを立ち上げて実際に確認できる.
コマンドを叩いたあとlocalhost:5000にブラウザでアクセス. 実際にローカルで編集したものをFirebaseにデプロイする. 以下のコマンドを叩くことでコンソール上から直接ブラウザを立ち上げ,Firebaseで実際に公開されているサイトを確認できる. 以下のコマンドを叩くことでデプロイと実際にデプロイされたサイトを表示を一回のコマンドで実行可能. 自分のプロジェクトにエイリアスをつける 操作するプロジェクトを変更する

Firebaseの認証

Firebaseで認証を行うにはindex.htmlの\と\の間にFirebaseのアプリケーション登録時に出てくるjsのコードを貼り付ける. 以下のようなjsのコード 以下のようなコードを入力することで,DBの書き換えの共有が可能 でFirebase上のDBに接続 でDBの/my/chat/allという場所の情報に接続
changeDataというメソッドが呼ばれたら,テキストインプットフィールドの中にある文字列をDBに送信している. 以下のコードでDBに登録している. またDBが更新された場合は.onでイベントを登録できる.
function名はsnapshotでID=chatTextに取得した文字列を代入している. onceを使うことで,一回だけ取得もできるみたい

独自ドメイン設定

独自ドメインを以下の画面から設定可能.しかしDNSにTXTレコードを設定してから,5分くらい時間たってから次に進まないと,所有確認が失敗した.
また,2時間くらいたたないと独自ドメインでhttpsが有効化されない.

通常のサイトをPWAに対応させる

基本的に以下の2つを追加してあげれば,対応するみたい? ・service-workers.js
プッシュ通知やインストール時の挙動を指定するときに利用 ・manifest.json
アイコンやスプラッシュスクリーンの情報などを記述 index.htmlに上の2つのファイルを指定してあげる\の下あたり

googleのアカウントを使って認証をする

いつも何かしらのサービスで目にする,googleのアカウント認証を実装する. これPWAでは使えないかも 以下のソースはFirebaseのGoogleアカウントOAuth認証を試したのでメモを参照した.
ありがとうございます.

PWAのサンプルたち

先人様ありがとうございます. vue.jsでPWAを動作させるサンプル.
https://github.com/BosNaufal/vue-simple-pwa

Ref.

https://qiita.com/kohashi/items/43ea22f61ade45972881
https://qiita.com/radiocat/items/034904a094d07c389a4f
https://qiita.com/tamalign/items/18d443787cf99bec1138

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です