ウェブ / JavaScript でのトピック メッセージング

パブリッシュ / サブスクライブ モデルに基づく FCM トピック メッセージングでは、特定のトピックにオプトインした複数の端末にメッセージを送信できます。必要に応じて作成したトピック メッセージを FCM がルーティング処理し、確実に正しい端末にメッセージを配信します。

たとえば、地域の天気予報アプリのユーザーは、「荒天警報」のトピックにオプトインし、暴風雨警報地域の通知を受信できます。スポーツアプリのユーザーは、お気に入りのチームの実況ゲームスコアの自動更新に登録できます。

トピックに関する留意点を以下に示します。

  • トピック メッセージングにおいて、アプリごとにサポートされるトピックとサブスクリプション数はいずれも無制限です。
  • トピック メッセージングは、ニュース、天気、その他の広く入手可能な情報コンテンツに最適です。
  • トピック メッセージは、レイテンシではなくスループットに対して最適化されます。単一の端末または端末の小グループに高速かつ安全に配信する場合は、トピックではなく登録トークンをメッセージの宛先としてください
  • 各ユーザーの複数の端末にメッセージを送信する必要がある場合は、そのようなユースケース向けの端末グループ メッセージングを検討してください。

クライアント アプリをトピックに登録する

登録トークンとトピック名がわかっていれば、Google Instance ID サーバー API を使用して、トピックにトークンを追加できます。このエンドポイントで Instance ID API を呼び出して、アプリ インスタンスの登録トークンとトピック名を指定します。

 https://iid.googleapis.com/iid/v1/<REGISTRATION_TOKEN>/rel/topics/<TOPIC_NAME>

たとえば、「movies」という名前のトピックにアプリ インスタンスを登録するには、次に示すように、認証ヘッダーにサーバー API キーを追加して POST リクエストをサーバーからエンドポイントに送信します。

https://iid.googleapis.com/iid/v1/nKctODamlM4:CKrh_PC8kIb7O...clJONHoA/rel/topics/movies
Content-Type:application/json
Authorization:key=AIzaSyZ-1u...0GBYzPu7Udno5aA

サーバーキーの機密性を維持するため、このタイプのリクエストをクライアントから送信しないでください。

リクエストが成功した場合は、HTTP 200 OK が返されます。エラー レスポンスの詳細と一括リクエストの送信方法については、アプリ インスタンス用の関係マップの作成をご覧ください。

メッセージを受信して処理する

FCM は、他のダウンストリーム メッセージと同じようにトピック メッセージを配信します。クライアントでメッセージを処理する方法は、ウェブページの状態(フォアグラウンドかバックグラウンドか)や、このセクションで説明する要因によって異なります。

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

アプリの状態 通知 データ ペイロード 両方
フォアグラウンド onMessage onMessage onMessage
バックグラウンド(サービス ワーカー) SDK によって表示される通知 setBackgroundMessageHandler SDK によって表示される通知

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

アプリが 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/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/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 service 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" : "/topics/matchday"

}

データ メッセージは 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/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/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
  var notificationTitle = 'Background Message Title';
  var notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

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

ビルド送信リクエスト

サーバー側から Firebase Cloud Messaging トピックへのメッセージの送信する方法は、個々の端末やユーザー グループ宛てのメッセージを送信する場合とよく似ています。この場合、アプリサーバーは to キーに /topics/yourTopic などの値を設定します。デベロッパーは、次の正規表現に一致する任意のトピック名を選択できます: "/topics/[a-zA-Z0-9-_.~%]+"

トピック HTTP POST リクエスト

単一のトピックに送信します。

https://fcm.googleapis.com/fcm/send
Content-Type:application/json
Authorization:key=AIzaSyZ-1u...0GBYzPu7Udno5aA
{
  "to" : "/topics/foo-bar",
  "priority" : "high",
  "notification" : {
    "body" : "This is a Firebase Cloud Messaging Topic Message!",
    "title" : "FCM Message",
  }
}

トピック HTTP レスポンス

//Success example:
{
  "message_id": "1023456"
}

//failure example:
{
  "error": "TopicsMessageRateExceeded"
}

トピック XMPP メッセージ

単一のトピックに送信します。

<message id="">
  <gcm xmlns="google:mobile:data">
{
  "to" : "/topics/foo-bar",
  "priority" : "high",
  "notification" : {
    "body" : "This is a Firebase Cloud Messaging Topic Message!",
    "title" : "FCM Message",
  }
}
  </gcm>
</message>

トピック XMPP レスポンス

//Success example:
{
  "message_id": "1023456"
}

//failure example:
{
  "error": "TopicsMessageRateExceeded"
}

次のステップ

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

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