Firebase Cloud Messagingのサンプルプログラムを動かしてみた

やったこと

githubにあるquickstart-jsのmessagingを使用して、Firebase Cloud Messagingのpush機能を動かしてみた。

サンプルコードを動かしてFCM登録トークンの取得と受信用Service Workerを登録。アクセストークンを取得して、curlコマンドでpush通知を行った。

環境

• windows 10
• node v16.14
• Ubuntu 18.04.4 LTS(WSL2)　Curlコマンドの実行のみ

前提

• firebaseのプロジェクトとアプリケーションは作成済みで、ウェブプッシュ証明書の鍵ペアを作成してある。
  

手順

FCM登録トークンを取得するサーバをローカル環境で動かす

gitからコードをとってくる

git clone https://github.com/firebase/quickstart-js

1.messagingフォルダのindex.htmlを編集。<YOUR_PUBLIC_VAPID_KEY_HERE>に、ウェブプッシュ証明書の鍵を設定する。

    // subsequent calls to getToken will return from cache.
    messaging.getToken({vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'}).then((currentToken) => {
      if (currentToken) {

2.messagingフォルダに移動してfirebase-toolsをインストール。

npm install -g firebase-tools

3.firebase use --addコマンドで、プロジェクトを登録。

firebase use --add
? Which project do you want to add? <myproject>
? What alias do you want to use for this project? (e.g. staging) test

4.ローカル環境でサーバ起動

firebase serve -p 8081
=== Serving from 'C:\SourceCode\quickstart-js\messaging'

i  hosting[<myproject>]: Serving hosting files from: ./
+  hosting[<myproject>]: Local server: http://localhost:8081

5.起動後、http://localhost:8081にアクセス。初回アクセス時にService Workerがブラウザに登録されるので許可が求められる。
表示された画面からREQUEST PERMISSIONを押してトークンを取得。以下はトークン取得後の画面。

アクセストークンの取得

1.firebaseコンソールから、プロジェクトの設定 > サービスアカウント >

新しい秘密鍵を生成ボタンから秘密キー(Jsonファイル)をダウンロード

2.適当なフォルダを作成して、アクセストークン取得用のjavascriptとjsonファイルを配置。アクセストークン取得用のjavascript内で、ダウンロードしたjsonファイルを読み込むように指定。
【アクセストークン取得用のjavascript(index.jsで保存)】

const { google ,JWT,GoogleAuth } = require('google-auth-library');

const SCOPES =  ['https://www.googleapis.com/auth/cloud-platform'];
function getAccessToken() {
  return new Promise(function(resolve, reject) {
    const key = require('./<ダウンロードしたjsonファイル>.json');
    const auth = new GoogleAuth();
    const jwtClient = new JWT(
      key.client_email,
      null,
      key.private_key,
      SCOPES,
      null
    );
    jwtClient.authorize(function(err, tokens) {
      if (err) {
        reject(err);
        return;
      }
      resolve(tokens.access_token);
    });
  });
}

async function main(){
    const token = await getAccessToken();
    console.log(token); // コンソールに出力
} 

main();

3.スクリプトは、google-auth-libraryを使用しているので、npmコマンドでインストール

npm i google-auth-library

4.nodeコマンド実行して、アクセストークンを取得する。(コンソールに表示。）

node index.js
ya29.c.b0Aaekm1JVAdfDRR9Kx71o7u3G3w1fmMvY-mFTDtbVref13........

curlコマンドでpush通知実施

以下の形式でCurlコマンドを使用してpush通知を実行する。HTTP v1 API に変わっているのでgithubのREADMEに記載されている形式とは異なる。

• <アクセストークン>、は上記でとってきたもの
• <プロジェクID>はFirebaseコンソールのプロジェクトの設定の全般に表示されるプロジェクトID

curl -X POST -H "Authorization: Bearer <アクセストークン>" -H "Content-Type: application/json" -d '{
  "message": {
    "token" : "<FCMトークン>",
    "notification":{
       "body": "5 to 1",
       "title": "Portugal vs. Denmark"
     }
  }
}' "https://fcm.googleapis.com/v1/projects/<プロジェクトID>/messages:send"

コマンド実行した結果、ブラウザで受信して表示される。