Firebase で AI 搭載アプリを構築して実行する方法のデモを、2024 年の Demo Day でご覧ください。ぜひご覧ください。

バックグラウンドアプリにテストメッセージを送信する

FCM を使用する手始めとして、最も単純なユースケースを作成します。具体的には、アプリがそのデバイスのバックグラウンドで動作しているときに、特定のユーザーに通知メッセージを送信します。このページには、このチュートリアルに必要なセットアップから検証までのすべての手順が記載されています。FCM のJavaScript クライアントアプリでの設定がすでに済んでいる場合は、一部の手順を省略できます。

SDK を設定する

まだ追加していない場合は、Firebase を JavaScript プロジェクトに追加します。

登録トークンへのアクセス

アプリインスタンスの現在の登録トークンを取得する必要がある場合は、まず Notification.requestPermission() を使用してユーザーに通知権限をリクエストします。次のように呼び出した際に、権限が付与されている場合にはトークンが返され、リクエストが拒否された場合には Promise が拒否されます。

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM には firebase-messaging-sw.js ファイルが必要です。firebase-messaging-sw.js ファイルがまだない場合は、トークンを取得する前にこの名前の空のファイルを作成して、ドメインのルートに置きます。後ほどクライアント設定プロセスの中でこのファイルに必要なコンテンツを追加できます。

現在のトークンを取得するには:

Web

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});messaging_get_token.js

Web

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});index.js

トークンを取得したら、それをアプリサーバーに送信して、適切な方法で保管します。

テスト通知メッセージを送信する

対象デバイスでアプリをインストールして実行します。Apple デバイスの場合、リモート通知受信権限に対するリクエストを承認する必要があります。
アプリがデバイスのバックグラウンドで動作していることを確認します。
Firebase コンソールで、[メッセージング] ページを開きます。
メッセージを初めて作成する場合は、[最初のキャンペーンを作成] を選択します。
1. [Firebase Notification メッセージ] を選択し、[作成] を選択します。
それ以外の場合は、[キャンペーン] タブで [新しいキャンペーンを作成]、[通知] の順に選択します。
通知テキストを入力します。それ以外のフィールドはすべて省略可能です。
右側のペインで [テストメッセージを送信] を選択します。
[FCM 登録トークンを追加] というラベルの付いたフィールドで、このガイドの前のセクションで取得した登録トークンを入力します。
[テスト] を選択します。

[テスト] を選択すると、アプリをバックグラウンドで実行しているターゲットクライアントデバイスに通知が届きます。

次のステップ

フォアグラウンドで動作しているアプリへのメッセージの送信

バックグラウンドで動作しているアプリに通知メッセージが正常に送信されたら、JavaScript クライアントでメッセージを受信するを参照して、フォアグラウンドで動作しているアプリへのメッセージの送信を試します。

通知メッセージ以外の動作

通知メッセージだけでなく、他のより高度な動作をアプリに追加する場合は、以下をご確認ください。