【PWA】Firebaseを使ってスマホのトークンを取得してプッシュ通知を送る仕組みを作成する（Part2）

Firebaseを使用してスマートフォンのトークンを取得し、PWAでプッシュ通知を送るシステムを構築してみます。前回の続きです。

Firebase SDKの設定
Firebaseプロジェクトとアプリの設定
Service Workerの設定
ユーザーの許可を求める
デバイストークンの取得と送信
サーバーサイドにトークンを送信
まとめ

Firebase SDKの設定

まずは、以下のステップを行います。

Firebaseプロジェクトを作成し、アプリを登録します。
Firebaseの設定ファイルとSDKをアプリに追加します。

プロジェクトの作成や設定ファイル、SDKの設定などは、過去の記事にも色々と書いていますので、過去の記事を参考にしてください。続きます。

Firebaseプロジェクトとアプリの設定

Firebaseで環境を構築している前提で、モバイルアプリ（JavaScriptを使用して）でデバイストークンを取得するステップを以下に示します。ここでは、React Nativeを使用している場合の例を紹介しますが、他のフレームワークでも基本的な流れは同様です。

Firebaseプロジェクトを作成: Firebase Console（console.firebase.google.com）にアクセスし、「プロジェクトを追加」をクリックして新しいプロジェクトを作成します。

アプリをFirebaseプロジェクトに登録: Firebaseコンソールでプロジェクトを選択し、「アプリを追加」をクリックして、ウェブアプリを登録します。

設定ファイルをアプリに追加: 登録プロセス中に、Firebaseは設定ファイルを提供します。このファイルをプロジェクトに追加します。

<!-- Firebaseの設定 -->
<script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js"></script>
<script>
  var firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID"
  };
  // Firebaseを初期化
  firebase.initializeApp(firebaseConfig);
</script>

Service Workerの設定

Service Workerの設定:プッシュ通知を処理するためにService Workerファイルを作成し、登録します。

// service-worker.js
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');

firebase.initializeApp({
  'messagingSenderId': 'YOUR_SENDER_ID'
});

const messaging = firebase.messaging();

ユーザーの許可を求める

ユーザーに通知を送信する許可を求めます。

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // デバイストークンを取得
    getToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
});

デバイストークンの取得と送信

ユーザーから通知の許可を得た後、Firebase SDKを使用してデバイストークンを取得し、サーバーサイドに送信します。

function getToken() {
  const messaging = firebase.messaging();
  messaging.getToken({vapidKey: 'YOUR_VAPID_KEY'}).then((currentToken) => {
    if (currentToken) {
      console.log('Token:', currentToken);
      // トークンをサーバーに送信する関数をここで呼び出します
      sendTokenToServer(currentToken);
    } else {
      console.log('No Instance ID token available. Request permission to generate one.');
    }
  }).catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
  });
}

サーバーサイドにトークンを送信

サーバーにトークンを送信するための関数を定義します。通常、これはAPIリクエストを介して行われます。

function sendTokenToServer(token) {
  // ここにサーバーサイドのエンドポイントURLを設定します
  const serverURL = 'https://your-server.com/api/register-token';

  // APIリクエストを使ってトークンをサーバーに送信
  fetch(serverURL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ token: token }),
  })
  .then(response => response.json())
  .then(data => console.log('Token registered on server:', data))
  .catch((error) => {
    console.error('Error sending token to server:', error);
  });
}

これらのステップを完了することで、PWAでFirebaseを使用してデバイストークンを取得し、サーバーサイドに送信するシステムを構築できます。