コンソールへ移動

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

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

FCM SDK で使用している Service Worker は、HTTPS サイトでのみ利用可能です。このため、FCM SDK は HTTPS 経由で提供されるページでのみサポートされます。プロバイダが必要な場合は、独自ドメインで無料の HTTPS ホスティングを行うことができる Firebase Hosting をおすすめします。

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

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

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

現時点でウェブ用 FCM を使用していて、SDK 6.7.0 以降にアップグレードする場合は、Google Cloud Console でプロジェクトの FCM Registration API を有効にする必要があります。API を有効にする場合は、Firebase で使用しているのと同じ Google アカウントで Cloud Console にログインし、正しいプロジェクトを選択してください。新しいプロジェクトを作成して FCM SDK を追加する場合は、この API はデフォルトで有効になっています。

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

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

新しい鍵ペアを生成する

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

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

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

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

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

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

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

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

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

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

通知の受信許可をリクエストする

Web Notifications API のメソッド Notification.requestPermission() は、ユーザーがブラウザで通知を受け取るためのアクセス許可をアプリに付与できる同意ダイアログを表示します。アクセス許可が拒否された場合、FCM 登録トークン リクエストはエラーになります。

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // TODO(developer): Retrieve an Instance ID token for use with FCM.
    // ...
  } else {
    console.log('Unable to get permission to notify.');
  }
});

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

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

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

  • ウェブアプリが登録トークンを削除した場合。
  • ユーザーがブラウザデータをクリアした場合。この場合、新しいトークンを取得するには 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((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((err) => {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});

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

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

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
  messaging.getToken().then((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((err) => {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

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

次のステップ

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