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のインストール

$ npm install -g firebase-tools

Firebase-tools上でFirebaseにログインする．このコマンドを叩くとブラウザが立ち上がり，ログインできる．またログアウトも以下のコマンド

$ firebase login
$ firebase logout

Firebase-toolsの初期化コマンド？これを実行するとホームディレクトリ(?)にfirebaseの関連ファイルが生成される．実行後，予めFirebaseでプロジェクトを作成しているとどのプロジェクトをローカルで編集するかを選択できる．

$ firebase init

ローカルでサーバを立ち上げて実際に確認できる．コマンドを叩いたあとlocalhost:5000にブラウザでアクセス．

$ firebase serve

実際にローカルで編集したものをFirebaseにデプロイする．

$ firebase deploy

以下のコマンドを叩くことでコンソール上から直接ブラウザを立ち上げ，Firebaseで実際に公開されているサイトを確認できる．

$ firebase open hosting:site

以下のコマンドを叩くことでデプロイと実際にデプロイされたサイトを表示を一回のコマンドで実行可能．

$ firebase deploy && firebase open hosting:site

自分のプロジェクトにエイリアスをつける

$ firebase use --add

操作するプロジェクトを変更する

$ firebase use [alias]

Firebaseの認証

Firebaseで認証を行うにはindex.htmlの\と\の間にFirebaseのアプリケーション登録時に出てくるjsのコードを貼り付ける．

以下のようなjsのコード

<script src="https://www.gstatic.com/firebasejs/5.5.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyA-pTWNkIM8unupQ5DtYXXo7xTSEQA0BYQ",
    authDomain: "myfirstfirebase-6f247.firebaseapp.com",
    databaseURL: "https://myfirstfirebase-6f247.firebaseio.com",
    projectId: "myfirstfirebase-6f247",
    storageBucket: "myfirstfirebase-6f247.appspot.com",
    messagingSenderId: "294712912982"
  };
  firebase.initializeApp(config);
</script>

以下のようなコードを入力することで，DBの書き換えの共有が可能

  <body>
    <div id="message">
      <h1>Firebaseてすと</h1>
      <p>文字を入れると更新されます</p>
      <ul>
        <li id="chatText"></li>
        <li><input type="text" name="" id="my_text"></li>
        <li><a onclick="changeData()">更新</a></li>
      </ul>
    </div>


    <script>
      var db = firebase.database();
      var myChatAll = db.ref("/my/chat/all");

      function changeData(){
        var text = document.getElementById("my_text").value;
        myChatAll.set({title:"example", text:text});
      }

      myChatAll.on("value", function(snapshot) { 
        document.getElementById("chatText").innerText = snapshot.val().text;
      });
    </script>
  </body>

var db = firebase.database();

でFirebase上のDBに接続

var myChatAll = db.ref("/my/chat/all");

でDBの/my/chat/allという場所の情報に接続 changeDataというメソッドが呼ばれたら，テキストインプットフィールドの中にある文字列をDBに送信している．

以下のコードでDBに登録している．

myChatAll.set({title:"example", text:text});

またDBが更新された場合は.onでイベントを登録できる． function名はsnapshotでID=chatTextに取得した文字列を代入している．

document.getElementById("chatText").innerText = snapshot.val().text;

onceを使うことで，一回だけ取得もできるみたい

database.ref('/cat_message/message').once('value')

独自ドメイン設定

独自ドメインを以下の画面から設定可能．しかしDNSにTXTレコードを設定してから，5分くらい時間たってから次に進まないと，所有確認が失敗した． f:id:nagatsukimxi:20181222102212p:plain

また，2時間くらいたたないと独自ドメインでhttpsが有効化されない．

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

基本的に以下の2つを追加してあげれば，対応するみたい？

・service-workers.js プッシュ通知やインストール時の挙動を指定するときに利用

・manifest.json アイコンやスプラッシュスクリーンの情報などを記述

index.htmlに上の2つのファイルを指定してあげる\の下あたり

    <!-- マニフェストの指定 -->
    <link rel="manifest" href="manifest.json">
    <script>
    // service workerが有効なら、service-worker.js を登録します
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./service-worker.js').then(function() { console.log('Service Worker Registered'); });
     }
    </script>

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

いつも何かしらのサービスで目にする，googleのアカウント認証を実装する．

これPWAでは使えないかも

以下のソースはFirebaseのGoogleアカウントOAuth認証を試したのでメモを参照した．ありがとうございます．

    <script>
    var AuthUI = {
      init: function(){
        AuthUI.provider = new firebase.auth.GoogleAuthProvider();
        AuthUI.elAuthBtn = document.querySelector('.authBtn');
        AuthUI.elUserId = document.querySelector('.userId');
        AuthUI.draw();
        AuthUI.elAuthBtn.addEventListener('click', function(){
          AuthUI.doAuth();
        });
        firebase.auth().getRedirectResult().then(function(result) {
          AuthUI.elAuthBtn.disabled = false;
          if (result.credential) {
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = result.credential.accessToken;
          }
          if(result.user){
            AuthUI.data.authed = true;
            AuthUI.data.userId = result.user.email;
            AuthUI.draw();
          }
        }).catch(function(error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      },
      data: {
        authed: false,
        userId: '',
        info: ''
      },
      draw: function(){
        AuthUI.elAuthBtn.textContent = AuthUI.data.authed ? 'LOGOUT' : 'LOGIN';
        AuthUI.elUserId.textContent = AuthUI.data.userId;
      },
      doAuth: function(){
        if(AuthUI.data.authed){
          firebase.auth().signOut().then(function() {
            AuthUI.data.authed = false;
            AuthUI.data.userId = '';
            AuthUI.draw();
          }, function(error) {
            // An error happened.
          });
        }
        else {
          firebase.auth().signInWithRedirect(AuthUI.provider);
        }
      }
    };
    AuthUI.init();
    </script>