The Wayback Machine - https://web.archive.org/web/20190514133201/https://firebase.google.com/docs/cloud-messaging/js/client
プロダクト 使用例 料金 ドキュメント サポート
コンソールへ移動
概要 ガイド リファレンス サンプル ライブラリ

JavaScript Firebase Cloud Messaging クライアント アプリを設定する

FCM JavaScript API を使用すると、Push API をサポートするブラウザで実行されているウェブアプリで通知メッセージを受信できます。該当するブラウザには、このサポート マトリックスにリストされているブラウザのバージョンが含まれます。

メッセージの送信の説明に沿って、HTTP と XMPP アプリサーバー プロトコルを使用してメッセージを JavaScript クライアントに送信します。Firebase コンソールからメッセージを送信することはできません。

FCM JavaScript API を使い始めるには、Firebase をウェブアプリに追加してから、登録トークンにアクセスするためのロジックを追加する必要があります。

Firebase を JavaScript プロジェクトに追加する

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

FCM でウェブ認証情報を設定する

FCM のウェブ インターフェースでは、「Voluntary Application Server Identification 鍵（VAPID 鍵）」と呼ばれるウェブ認証情報を利用して、サポートされているウェブプッシュ サービスへの送信要求が承認されます。アプリをプッシュ通知に登録するには、鍵ペアを Firebase プロジェクトに関連付ける必要があります。Firebase コンソールを使用して、新しい鍵ペアを生成することも既存の鍵ペアをインポートすることもできます。

新しい鍵ペアを生成する

  1. Firebase コンソールの [設定] ペインで [クラウド メッセージング] タブを開き、[ウェブ設定] セクションまでスクロールします。
  2. [ウェブプッシュ証明書]タブで、[鍵ペアを生成] をクリックします。鍵ペアが生成されたという通知がコンソールに表示され、追加した公開鍵の文字列と日付が表示されます。

既存の鍵ペアをインポートする

すでにウェブアプリで使用している鍵ペアがある場合は、その鍵を FCM にインポートすると、FCM API を介して既存のウェブアプリ インスタンスにアクセスできます。鍵をインポートするには、Firebase プロジェクトに対するオーナーレベルのアクセス権が必要です。既存の公開鍵と秘密鍵を URL セーフの base64 エンコード形式でインポートします。

  1. Firebase コンソールの [設定] ペインで [クラウド メッセージング] タブを開き、[ウェブ設定] セクションまでスクロールします。
  2. [ウェブプッシュ証明書] タブで、リンクテキスト「既存の鍵ペアをインポート」を見つけて選択します。
  3. [鍵ペアのインポート] ダイアログで公開鍵と秘密鍵をそれぞれのフィールドに入力し、[インポート] をクリックします。追加した公開鍵の文字列と日付がコンソールに表示されます。

鍵をアプリに追加する方法については、アプリにウェブ認証情報を設定するをご覧ください。鍵の形式と生成方法の詳細については、アプリケーション サーバー キーをご覧ください。

メッセージを受信するようにブラウザを設定する

ハードコード値 gcm_sender_id を指定するウェブ アプリ マニフェストを追加する必要があります。このハードコード値は、FCM がこのアプリへのメッセージ送信を許可されていることを示します。すでにアプリに manifest.json 設定ファイルが存在する場合は、次に示す正確なブラウザ送信者 ID を追加してください（値を変更しないでください）。

{
  "gcm_sender_id": "103953800507"
}

メッセージング オブジェクトの取得

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();
index.html

アプリにウェブ認証情報を設定する

メソッド usePublicVapidKey を使用すると、FCM で各種プッシュ サービスにメッセージ要求を送信するときに VAPID 鍵の認証情報を使用できます。メッセージング オブジェクトを取得した後、FCM でウェブ認証情報を設定するの手順に沿って生成またはインポートした鍵をコードに追加します。

// Add the public key generated from the console here.
messaging.usePublicVapidKey("BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu");

通知の受信許可を求める

メソッド messaging.requestPermission() は、ブラウザでアプリが通知を受け取れるようにするかどうか、ユーザーに許可を求める同意ダイアログを表示します。同意が得られなかった場合、FCM 登録トークン リクエストはエラーになります。

messaging.requestPermission().then(function() {
  console.log('Notification permission granted.');
  // TODO(developer): Retrieve an Instance ID token for use with FCM.
  // ...
}).catch(function(err) {
  console.log('Unable to get permission to notify.', err);
});
index.html

登録トークンにアクセスする

このセクションでは、アプリ インスタンス用の登録トークンを取得する方法と、トークン更新イベントをモニタリングする方法について説明します。トークンは初期起動後にローテーションされている可能性があるため、トークン更新をモニタリングして、更新された最新の登録トークンを常に取得する必要があります。

登録トークンは次のような場合に変更されることがあります。

  • ウェブアプリが登録トークンを削除した場合。
  • ユーザーがブラウザデータをクリアした場合。この場合、新しいトークンを取得するには getToken を呼び出します。

現在の登録トークンの取得

現在のトークンを取得する必要がある場合は、getToken を呼び出します。まだ権限が付与されていない場合、このメソッドは null を返します。そうでない場合は、トークンを返すか、エラーが原因で Promise を拒否します。

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

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

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then(function(currentToken) {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch(function(err) {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});
index.html

トークン更新のモニタリング

新しいトークンが生成されるたびに onTokenRefresh コールバックが呼び出されるため、そのコンテキストで getToken を呼び出すと、利用可能な最新の登録トークンに確実にアクセスできます。

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(function() {
  messaging.getToken().then(function(refreshedToken) {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch(function(err) {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});
index.html

トークンを取得したら、それをアプリサーバーに送信して、適切な方法で保管します。インスタンス ID サーバー API を使用すると、サブスクリプションに関する情報を取得することができます。

次のステップ

設定手順の完了後、ウェブ用 FCM（JavaScript）に進むための方法をいくつか次に示します。