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

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

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

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

FCM SDK を追加して初期化する

  1. まだ行っていない場合は、Firebase JS SDK をインストールして Firebase を初期化します。

  2. Firebase Cloud Messaging JS SDK を追加して Firebase Cloud Messaging を初期化します。

Web 

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

現時点でウェブ用 FCM を使用していて、SDK 6.7.0 以降にアップグレードする場合は、Google Cloud コンソールでプロジェクトに対して FCM Registration API を有効にする必要があります。API を有効にする場合は、Firebase で使用しているのと同じ Google アカウントで Cloud コンソールにログインし、正しいプロジェクトを選択してください。新しいプロジェクトを作成して 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. [鍵ペアのインポート] ダイアログで公開鍵と秘密鍵をそれぞれのフィールドに入力し、[インポート] をクリックします。公開鍵の文字列と追加した日付がコンソールに表示されます。

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

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

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

import { getMessaging, getToken } from "firebase/messaging";

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

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

アプリ インスタンスの現在の登録トークンを取得する必要がある場合は、まず 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

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

Web

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

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

次のステップ

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