Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

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

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

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

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

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

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

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

Web version 9

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

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

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

FCM を使用して Web 資格情報を構成する

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

新しい鍵ペアを生成する

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

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

Web アプリで既に使用している既存のキー ペアがある場合は、それを FCM にインポートして、FCM API を介して既存の Web アプリ インスタンスに到達できるようにすることができます。キーをインポートするには、Firebase プロジェクトへの所有者レベルのアクセス権が必要です。既存の公開鍵と秘密鍵を base64 URL セーフ エンコード形式でインポートします。

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

キーをアプリに追加する方法については、「アプリでWeb 資格情報を構成する」を参照してください。キーの形式と生成方法の詳細については、「アプリケーション サーバー キー」を参照してください。

アプリで Web 資格情報を構成する

メソッドgetToken(): Promise<string>を使用すると、FCM はメッセージ リクエストをさまざまなプッシュ サービスに送信するときに VAPID キー資格情報を使用できます。 Configure Web Credentials with 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 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);
  // ...
});

トークンを取得したら、それをアプリ サーバーに送信し、任意の方法で保存します。

次のステップ

設定手順を完了したら、FCM for Web (JavaScript) を使用するためのいくつかのオプションを次に示します。