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

メッセージの動作は、ページがフォアグラウンドにある(フォーカスされている)か、またはページがバックグラウンドにあり、他のタブに隠されているか、完全に閉じられているかによって異なります。いずれの場合も、onMessage コールバックをページで処理する必要がありますが、バックグラウンドの場合は、ユーザーがウェブアプリをフォアグラウンドに戻せるようにする表示通知も設定する必要があります。

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

ウェブアプリがフォアグラウンドの場合にメッセージを処理する

onMessage イベントを受信するには、アプリが firebase-messaging-sw.js で Firebase メッセージング サービス ワーカーを定義する必要があります。または、useServiceWorker を使って既存のサービス ワーカーを指定することもできます。

// 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/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
});

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

アプリがフォアグラウンドにある(ユーザーがウェブアプリを現在閲覧している)場合は、そのページでデータと通知ペイロードを直接受信できます。

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

ウェブアプリがバックグラウンドの場合にメッセージを処理する

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

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

アプリサーバーから送信される通知メッセージの場合は、FCM JavaScript API が click_action キーをサポートします。通常、これはウェブアプリ内のページに設定されるため、ユーザーが通知をクリックすると、アプリがフォアグラウンドに移動します。

https://fcm.googleapis.com/fcm/send
Content-Type: application/json
Authorization: key=AIzaSyC...akjgSX0e4

{ "notification": {
    "title": "Background Message Title",
    "body": "Background message body",
    "click_action" : "https://dummypage.com"
  },

  "to" : "eEz-Q2sG8nQ:APA91bHJQRT0JJ..."

}

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

通知メッセージとデータ メッセージの違いの説明については、メッセージのタイプをご覧ください。

サービス ワーカーでの通知オプションの設定

通知メッセージとデータ メッセージの両方に関して、サービス ワーカーで通知オプションを設定できます。まず、サービス ワーカーでアプリを初期化します。

// 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/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
});

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

オプションを設定するには、firebase-messaging-sw.jssetBackgroundMessageHandler を呼び出します。この例では、タイトル、本文、アイコン、クリック アクション用のオプションを設定します。

messaging.setBackgroundMessageHandler(function(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'
  };

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

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

ウェブのプッシュ メッセージングを十分に理解しているのであれば、優れた通知を行うための広範なガイドラインをすでにお読みではないでしょうか。ウェブ用 FCM を通じて通知を送信する開発者にとっては、精度と関連性が最も重要な考慮事項になります。通知の精度と関連性を保つための具体的な推奨事項を以下に示します。

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

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。