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);
});
通知を受け取る:
ユーザーのデバイスは、アプリがフォアグラウンドまたはバックグラウンドにあるかに関わらず、通知を受け取ります。
テストとデバッグ:
Firebaseコンソールの「Cloud Messaging」セクションからテストメッセージを送信して、すべてが正しく設定されていることを確認します。
問題が発生した場合は、ログを確認してデバッグします。
まとめ
プッシュ通知を送信するためには、具体的なプログラミング言語やライブラリが必要になるため、使用している技術スタックに応じた具体的なガイドやドキュメントを参照することが重要です。
また、プライバシーとセキュリティを確保するため、ユーザーの許可を得てトークンを取得し、適切な方法でデータを管理してください。
