Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

FCM JavaScript API を使用すると、Push API をサポートするブラウザで実行されているウェブアプリで通知メッセージを受信できます。該当するブラウザには、こちらのサポート マトリックスにリストされているブラウザのバージョンと、Push API を介した Chrome 拡張機能を組み込んだブラウザが含まれます。

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 コンソールの [設定] ペインで [Cloud Messaging] タブを開き、[ウェブ設定] セクションまでスクロールします。
  2. [ウェブプッシュ証明書] タブで、[Generate key pair] をクリックします。鍵ペアが生成されたという通知がコンソールに表示され、追加した公開鍵の文字列と日付が表示されます。

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

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

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

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

メッセージング オブジェクトを取得する

ウェブ バージョン 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

ウェブ バージョン 8

const messaging = firebase.messaging();

アプリにウェブ認証情報を構成する

メソッド getToken(): Promise<string> を使用すると、FCM で各種プッシュ サービスにメッセージ リクエストを送信するときに VAPID 鍵の認証情報を使用できます。メッセージング オブジェクトを取得した後、FCM でウェブ認証情報を構成するの手順に沿って生成またはインポートした鍵をコードに追加します。

// Add the public key generated from the console here.
messaging.getToken({vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

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

アプリ インスタンスの現在の登録トークンを取得する必要がある場合は、getToken を呼び出します。このメソッドに通知権限が付与されていない場合は、ユーザーに通知権限を付与するよう求められます。すでに通知権限が付与されている場合、このメソッドはトークンを返すか、エラーのため Promise を拒否します。

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

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

ウェブ バージョン 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);
  // ...
});

ウェブ バージョン 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);
  // ...
});

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

次のステップ

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