Firebaseを使用して端末にプッシュ通知を送信する（Part1）

Firebase(ファイアベース)

2024.02.032024.02.04

Firebaseプロジェクトを設定する
Firebase Cloud Messaging(FCM)をセットアップする
デバイストークンを取得する
サーバーサイドで通知を送信する
通知を受け取る:
テストとデバッグ:
まとめ

Firebaseプロジェクトを設定する

Firebaseのウェブサイトにアクセスし、新しいプロジェクトを作成します。

作成したプロジェクトにアプリを追加します。iOS、Android、Webアプリのいずれかを選択できます。

必要に応じて、Firebase SDKをアプリに追加します。

Firebase Cloud Messaging(FCM)をセットアップする

Firebaseコンソール内で、左側のナビゲーションバーから「Cloud Messaging」を選択します。

アプリに対応するサーバーキーやその他の必要な情報を取得します。

デバイストークンを取得する

ユーザーのデバイスがプッシュ通知を受け取れるように、アプリ内でデバイストークンを取得し、それをサーバーに保存する必要があります。

トークン取得例（index.html）

    import {getAnalytics} from 'https://www.gstatic.com/firebasejs/9.19.1/firebase-analytics.js'
    import {initializeApp} from 'https://www.gstatic.com/firebasejs/9.19.1/firebase-app.js'
    import {getAuth, onAuthStateChanged, signInAnonymously} from 'https://www.gstatic.com/firebasejs/9.19.1/firebase-auth.js';
    import {getFirestore, collection, addDoc, Timestamp} from 'https://www.gstatic.com/firebasejs/9.19.1/firebase-firestore.js';
    import {getDatabase, ref, set} from 'https://www.gstatic.com/firebasejs/9.19.1/firebase-database.js';
    import {getMessaging, getToken} from 'https://www.gstatic.com/firebasejs/9.19.1/firebase-messaging.js'
    const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXX",
  projectId: "XXXXXXXXX",
  storageBucket: "XXXXXXXXX",
  messagingSenderId: "XXXXXXXXX",
  appId: "XXXXXXXXX"
    };
    const app = initializeApp(firebaseConfig);
    const messaging = getMessaging(app);

    const db = getFirestore(app);
    const tokensCollection = collection(db, "tokens");

    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/firebase-messaging-sw.js')
            .then(function (registration) {

                console.log('Service Worker Registered', registration);


                return getToken(messaging)
                    .then((token) => {
                        console.log('Device token:', token);

                        const deviceToken = token;
                        const issuanceDate = Timestamp.now();
                        addDoc(tokensCollection, { 
                            token: deviceToken,
                            issuanceDate: issuanceDate
                        })
                            .then((docRef) => {
                                console.log("Device token added with ID: ", docRef.id);
                            })
                            .catch((error) => {
                                console.error("Error adding device token: ", error);
                            });
                    });
            }).catch(function (err) {
                console.log('Service Worker registration failed: ', err);
            });
}

サーバーサイドで通知を送信する

サーバーサイドのコード（Node.js、Python、Javaなど）を使用して、FCMサーバーに対してHTTP POSTリクエストを行います。

リクエストには、送信先のデバイストークン、通知内容、その他のオプションを含めます。

ここではaxiosを使用した例を紹介します。

まず、axiosをインストールします。

npm install axios

次に、以下のコードを使用してFCMにメッセージを送信します。

const axios = require('axios');

const fcmUrl = 'https://fcm.googleapis.com/fcm/send';
const serverKey = 'YOUR_SERVER_KEY'; // Firebaseプロジェクトの設定から取得したサーバーキー

const data = {
  to: '/topics/all', // トピック名または特定のデバイスの登録トークン
  notification: {
    title: '新しいメッセージ',
    body: 'これはテストメッセージです。',
  }
};

axios.post(fcmUrl, data, {
  headers: {
    'Authorization': `key=${serverKey}`,
    'Content-Type': 'application/json'
  }
})
.then((response) => {
  console.log('Message sent successfully:', response.data);
})
.catch((error) => {
  console.error('Error sending message:', error);
});