Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

JavaScriptクライアントでメッセージを受信する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

メッセージの動作は、ページがフォアグラウンドにある (フォーカスがある) か、バックグラウンドにあるか、他のタブの後ろに隠れているか、完全に閉じているかによって異なります。どの場合でも、ページはonMessageコールバックを処理する必要がありますが、バックグラウンドの場合は、 onBackgroundMessageを処理するか、ユーザーが Web アプリをフォアグラウンドに移動できるように表示通知を構成する必要がある場合もあります。

アプリの状態通知データ両方
前景onMessage onMessage onMessage
背景(サービスワーカー) onBackgroundMessage (表示通知が自動的に表示されます) onBackgroundMessage onBackgroundMessage (表示通知が自動的に表示されます)

JavaScriptクイックスタート サンプルは、メッセージを受信するために必要なすべてのコードを示しています。

Web アプリがフォアグラウンドにあるときにメッセージを処理する

onMessageイベントを受け取るには、アプリfirebase-messaging-sw.jsで Firebase メッセージング サービス ワーカーを定義する必要があります。または、 getToken(): Promise<string>を介して既存の Service Worker を SDK に提供することもできます。

Web version 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

Web version 8

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

アプリがフォアグラウンドにある (ユーザーが現在 Web ページを表示している) 場合、データと通知ペイロードをページで直接受け取ることができます。

Web version 9

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});

Web version 8

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});

Web アプリがバックグラウンドにあるときにメッセージを処理する

アプリがバックグラウンドにある間に受信したすべてのメッセージは、ブラウザーで表示通知をトリガーします。この通知のオプション (タイトルやクリック アクションなど) は、アプリ サーバーからの送信要求で指定するか、クライアントでサービス ワーカー ロジックを使用して指定できます。

送信リクエストでの通知オプションの設定

アプリ サーバーから送信される通知メッセージの場合、FCM JavaScript API はfcm_options.linkキーをサポートします。通常、これは Web アプリのページに設定されます。

https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>

{
  "message": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

リンク値がブラウザー タブで既に開いているページを指している場合、通知をクリックすると、そのタブが前面に表示されます。ページがまだ開いていない場合は、通知をクリックすると新しいタブでページが開きます。

データ メッセージはfcm_options.linkをサポートしていないため、すべてのデータ メッセージに通知ペイロードを追加することをお勧めします。または、Service Worker を使用して通知を処理することもできます。

通知メッセージとデータ メッセージの違いについては、「メッセージ タイプ」を参照してください。

Service Worker での通知オプションの設定

データ メッセージの場合、Service Worker で通知オプションを設定できます。まず、Service Worker でアプリを初期化します。

Web version 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

Web version 8

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

オプションを設定するには、 firebase firebase-messaging-sw.js onBackgroundMessage onBackgroundMessage を呼び出します。この例では、タイトル、本文、およびアイコン フィールドを含む通知を作成します。

Web version 9

import { getMessaging } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Web version 8

messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

通知のベスト プラクティス

Web のプッシュ メッセージングに精通している場合は、適切な通知を作成するための広範なガイドラインを既に読んでいる可能性があります。 FCM for Web を介して通知を送信する開発者にとって、最も重要な考慮事項は精度と関連性です。通知を正確かつ関連性の高いものにするための具体的な推奨事項を次に示します。

  • アイコン フィールドを使用して、意味のある画像を送信します。多くのユースケースでは、これはユーザーがすぐに認識できる会社またはアプリのロゴにする必要があります。または、チャット アプリケーションの場合は、送信側ユーザーのプロファイル イメージである可能性があります。
  • タイトル フィールドを使用して、メッセージの正確な性質を表現します。たとえば、「ジミーが返信しました」は「新しいメッセージ」よりも正確な情報を伝えます。この貴重なスペースを会社名やアプリ名に使用しないでください。そのためにはアイコンを使用してください。
  • 通知のタイトルや本文を使用して、Web サイトの名前やドメインを表示しないでください。通知には既にドメイン名が含まれています。
  • fcm_options.linkを追加します。通常は、ユーザーを Web アプリにリンクし、ブラウザーでフォーカスを合わせます。伝える必要のあるすべての情報が通知に収まるまれなケースでは、リンクは必要ない場合があります。