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

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

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 version 9

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);
  // ...
});

Web version 8

// 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);
  // ...
});

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

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

  1. 対象デバイスでアプリをインストールして実行します。

  2. アプリがデバイスのバックグラウンドで動作していることを確認します。

  3. Notifications Composer を開き、[新しい通知] を選択します。

  4. 通知テキストを入力します。

  5. [テスト メッセージを送信] を選択します。

  6. [FCM 登録トークンを追加] というラベルの付いたフィールドで、このガイドの前のセクションで取得した登録トークンを入力します。

  7. [テスト] をクリックします。

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

次のステップ

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

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

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

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