Cloud Messaging と Cloud Functions を使用してウェブアプリの通知を送信する

1. 概要

この Codelab では、Cloud Functions for Firebase を使用して、チャットアプリのユーザーに通知を送信することで、チャット ウェブアプリに機能を追加する方法を学びます。

3b1284f5144b54f6.png

学習内容

  • Firebase SDK を使用して Google Cloud Functions を作成する。
  • Auth、Cloud Storage、Cloud Firestore イベントに基づいて Cloud Functions をトリガーする。
  • ウェブアプリに Firebase Cloud Messaging サポートを追加する。

必要なもの

  • クレジット カード。Cloud Functions for Firebase には Firebase Blaze プランが必要です。つまり、クレジット カードを使用して Firebase プロジェクトの課金を有効にする必要があります。
  • WebStormAtomSublime など、任意の IDE/テキスト エディタ
  • NodeJS v9 がインストールされた、シェルコマンドを実行するためのターミナル。
  • Chrome などのブラウザ。
  • サンプルコード。次のステップをご覧ください。

2. サンプルコードを取得する

コマンドラインから GitHub リポジトリのクローンを作成します。

git clone https://github.com/firebase/friendlychat

スターター アプリをインポートする

IDE を使用して、サンプルコードのディレクトリから android_studio_folder.pngcloud-functions-start ディレクトリを開くか、インポートします。このディレクトリには、この Codelab の開始用コードが含まれています。このコードは、完全に機能する Chat ウェブアプリで構成されています。

3. Firebase プロジェクトを作成してアプリを設定する

プロジェクトを作成する

Firebase コンソールで [プロジェクトを追加] をクリックし、「friendChat」という名前を付けます。

[プロジェクトを作成] をクリックします。

Blaze プランにアップグレードする

Cloud Functions for Firebase を使用するには、Firebase プロジェクトを Blaze 料金プランにアップグレードする必要があります。そのためには、Google Cloud アカウントにクレジット カードなどのお支払い方法を追加する必要があります。

すべての Firebase プロジェクト(Blaze プランのものを含む)は、引き続き Cloud Functions の無料使用量の割り当てを利用できます。この Codelab で説明する手順は、無料枠の使用量上限の範囲内になります。ただし、Cloud Functions のビルドイメージをホストする Cloud Storage には少額の料金(約 $0.03)が表示されます。

クレジット カードがない場合や、Blaze プランを継続したくない場合は、Firebase Emulator Suite の使用を検討してください。これを使用すると、ローカルマシンで Cloud Functions を無料でエミュレートできます。

Google Auth を有効にする

ユーザーがアプリにログインできるようにするには、Google 認証を有効にする必要があります。

Firebase コンソールで [ビルド] セクションを開きます >認証 >[ログイン方法] タブ(またはこちらをクリックして移動)次に、Google ログイン プロバイダを有効にして [保存] をクリックします。これにより、ユーザーは自分の Google アカウントでウェブアプリにログインできるようになります。

また、アプリの公開名を「Friendly Chat」に設定することもできます。

8290061806aacb46.png

Cloud Storage を有効にする

アプリは Cloud Storage を使用して写真をアップロードします。Firebase プロジェクトで Cloud Storage を有効にするには、[ストレージ] セクションに移動して [使ってみる] ボタンをクリックします。手順に沿って操作すると、Cloud Storage のロケーションに対して使用するデフォルト値が表示されます。その後、[完了] をクリックします。

ウェブアプリを追加する

Firebase コンソールでウェブアプリを追加します。これを行うには、[Project Settings] に移動し、[Add app] まで下にスクロールします。プラットフォームとして [web] を選択し、Firebase Hosting を設定するチェックボックスをオンにしてアプリを登録し、[次へ] をクリックして残りの手順に進み、[コンソールに進む] をクリックします。

4. Firebase コマンドライン インターフェースをインストールする

Firebase コマンドライン インターフェース(CLI)を使用すると、ウェブアプリをローカルで提供し、ウェブアプリと Cloud Functions をデプロイできます。

CLI をインストールまたはアップグレードするには、次の npm コマンドを実行します。

npm -g install firebase-tools

CLI が正しくインストールされたことを確認するには、コンソールを開いて次のコマンドを実行します。

firebase --version

Firebase CLI のバージョンが 4.0.0 以降であることを確認して、Cloud Functions に必要な最新の機能をすべて含めます。実行されていない場合は、上記のように npm install -g firebase-tools を実行してアップグレードします。

次のコマンドを実行して Firebase CLI を承認します。

firebase login

cloud-functions-start ディレクトリにいることを確認し、Firebase プロジェクトを使用するように Firebase CLI を設定します。

firebase use --add

次に、プロジェクト ID を選択し、手順に沿って操作します。プロンプトが表示されたら、codelab などの任意のエイリアスを選択できます。

5. ウェブアプリをデプロイして実行する

プロジェクトをインポートして構成したので、ウェブアプリを初めて実行する準備ができました。ターミナル ウィンドウを開き、cloud-functions-start フォルダに移動して、次のコマンドを使用してウェブアプリを Firebase Hosting にデプロイします。

firebase deploy --except functions

コンソールに次のような出力が表示されます。

i deploying database, storage, hosting
  database: rules ready to deploy.
i  storage: checking rules for compilation errors...
  storage: rules file compiled successfully
i  hosting: preparing ./ directory for upload...
  hosting: ./ folder uploaded successfully
 storage: rules file compiled successfully
 hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...

 Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

ウェブアプリを開く

最後の行に [Hosting URL] が表示されます。これで、ウェブアプリはこの URL から提供されるはずです。URL は https://<プロジェクト ID>.firebaseapp.com の形式になっている必要があります。開きます。チャットアプリの UI が表示されます。

[Google でログイン] ボタンを使用してアプリにログインし、自由にメッセージを追加したり、画像を投稿したりできます。

3b1284f5144b54f6.png

新しいブラウザで初めてアプリにログインする場合は、通知を表示したときに通知を許可してください: 8b9d0c66dc36153d.png

後で通知を有効にする必要があります。

誤って [ブロック] をクリックしてしまった場合は、Chrome のアドレスバーの URL の左側にある [🔒? 保護] ボタンをクリックし、[通知] の横のバーを切り替えます。

e926868b0546ed71.png

これから、Firebase SDK for Cloud Functions を使用して機能を追加します。

6. Functions ディレクトリ

Cloud Functions を使用すると、サーバーを設定しなくても、Cloud でコードを簡単に実行できます。Firebase Auth、Cloud Storage、Firebase Firestore データベースのイベントに反応する関数を作成する方法について説明します。まず Auth から見ていきましょう

Firebase SDK for Cloud Functions を使用する場合、作成する関数のコードはデフォルトで functions ディレクトリに保存されます。また、Functions コードは Node.js アプリでもあるため、アプリに関する情報を提供し、依存関係を一覧表示する package.json が必要です。

作業を簡単にするため、コードを格納する functions/index.js ファイルがすでに作成されています。このファイルの内容を確認してから、次に進んでください。

cd functions
ls

Node.js を使い慣れていない場合は、Codelab を進める前に Node.js についてよく理解しておくことをおすすめします。

package.json ファイルには、Firebase SDK for Cloud FunctionsFirebase Admin SDK という 2 つの必須依存関係がすでにリストされています。これらをローカルにインストールするには、functions フォルダに移動して次のコマンドを実行します。

npm install

index.js ファイルを見てみましょう。

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

必要なモジュールをインポートし、TODO の代わりに関数を 3 つ記述します。まず、必要な Node モジュールをインポートします。

7. Cloud Functions モジュールと Firebase Admin モジュールをインポートする

この Codelab では、2 つのモジュールが必要です。firebase-functions を使用すると、Cloud Functions の関数トリガーとログを記述できます。firebase-admin を使用すると、管理者権限を持つサーバーで Firebase プラットフォームを使用して、Cloud Firestore への書き込みや FCM 通知の送信などのアクションを実行できます。

index.js ファイルで、最初の TODO を次のように置き換えます。

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Firebase Admin SDK は、Cloud Functions 環境または他の Google Cloud Platform コンテナにデプロイするときに自動的に構成できます。これは、引数なしで admin.initializeApp() を呼び出すと行われます。

次に、このチャットアプリにユーザーが初めてログインしたときに実行される関数を追加し、ユーザーに表示するウェルカム メッセージを追加します。

8. 新規ユーザーへのウェルカム メッセージ

チャット メッセージの構造

FriendlyChat のチャット フィードに投稿されたメッセージは、Cloud Firestore に保存されます。メッセージに使用するデータ構造を見てみましょう。そのためには、チャットに「Hello World」という新しいメッセージを投稿します。

11f5a676fbb1a69a.png

これは次のように表示されます。

fe6d1c020d0744cf.png

Firebase コンソールで、[構築] セクションの [Firestore Database] をクリックします。messages コレクションと、作成したメッセージを含む 1 つのドキュメントが表示されます。

442c9c10b5e2b245.png

ご覧のように、チャット メッセージは nameprofilePicUrltexttimestamp の各属性が messages コレクションに追加されたドキュメントとして Cloud Firestore に保存されます。

ウェルカム メッセージの追加

最初の Cloud Functions の関数は、新規ユーザーをチャットに歓迎するメッセージを追加します。そのためには、functions.auth().onCreate トリガーを使用します。このトリガーは、ユーザーが Firebase アプリに初めてログインするたびに関数を実行します。index.js ファイルに addWelcomeMessages 関数を追加します。

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  functions.logger.log('Welcome message written to database.');
});

この関数を特別な exports オブジェクトに追加することで、Node で現在のファイルの外部からこの関数にアクセスできるようになります。これは、Cloud Functions では必須です。

上の関数では、Firebase Bot によって投稿される新しいウェルカム メッセージをチャット メッセージのリストに追加します。そのためには、チャットのメッセージが保存される Cloud Firestore の messages コレクションで add メソッドを使用します。

これは非同期オペレーションであるため、Cloud Functions の実行が早すぎないように、Cloud Firestore がいつ書き込みを完了したかを示す Promise を返す必要があります。

Cloud Functions の関数をデプロイする

Cloud Functions は、デプロイした後にのみアクティブになります。そのためには、コマンドラインで次のコマンドを実行します。

firebase deploy --only functions

コンソールに次のような出力が表示されます。

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
  env: all necessary APIs are enabled
  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function addWelcomeMessages...
  functions[addWelcomeMessages]: Successful create operation. 
  functions: all functions deployed successfully!

  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlypchat-1234/overview

関数をテストする

関数が正常にデプロイされたら、初めてログインするユーザーが必要になります。

  1. ホスティング URL(https://<project-id>.firebaseapp.com の形式)を使用してブラウザでアプリを開きます。
  2. 新規ユーザーで、[Sign In] ボタンを使用してアプリで初めてログインします。
  • すでにログインしている場合は、Firebase Console Authentication を開き、ユーザーのリストから自分のアカウントを削除できます。その後、もう一度ログインします。

262535d1b1223c65.png

  1. ログインすると、ウェルカム メッセージが自動的に表示されます。

1c70e0d64b23525b.png

9. 画像の管理

ユーザーはチャットにあらゆる種類の画像をアップロードできます。特に公開のソーシャル プラットフォームでは、不適切な画像を管理することが重要です。フレンドリー チャットでは、チャットに公開される画像は Google Cloud Storage に保存されます。

Cloud Functions では、functions.storage().onFinalize トリガーを使用して新しい画像のアップロードを検出できます。これは、Cloud Storage で新しいファイルがアップロードされるかファイルが変更されるたびに実行されます。

画像の管理手順は次のとおりです。

  1. Cloud Vision API を使用して、画像にアダルト コンテンツや暴力的コンテンツが含まれていないか確認します。
  2. イメージにフラグが付いている場合は、実行中の Functions インスタンスにイメージをダウンロードします。
  3. ImageMagick を使用して画像にぼかしを入れます。
  4. ぼかしを入れた画像を Cloud Storage にアップロードします。

Cloud Vision API を有効にする

この関数では Google Cloud Vision API を使用するため、Firebase プロジェクトで API を有効にする必要があります。こちらのリンクをクリックし、Firebase プロジェクトを選択して API を有効にします。

5c77fee51ec5de49.png

依存関係をインストールする

画像を管理するために、Node.js 用の Google Cloud Vision クライアント ライブラリ(@google-cloud/vision)を使用して Cloud Vision API で画像を実行し、不適切な画像を検出します。

このパッケージを Cloud Functions アプリにインストールするには、次の npm install --save コマンドを実行します。この操作は、必ず functions ディレクトリから行ってください。

npm install --save @google-cloud/vision@2.4.0

これにより、パッケージがローカルにインストールされ、宣言された依存関係として package.json ファイルに追加されます。

依存関係をインポートして構成する

インストールされた依存関係と、このセクションで必要となる Node.js コアモジュール(pathosfs)をインポートするには、index.js ファイルの先頭に次の行を追加します。

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();
const {promisify} = require('util');
const exec = promisify(require('child_process').exec);

const path = require('path');
const os = require('os');
const fs = require('fs');

関数は Google Cloud 環境内で実行されるため、Cloud Storage ライブラリと Cloud Vision ライブラリを構成する必要はありません。プロジェクトを使用するように自動的に構成されます。

不適切な画像の検出

functions.storage.onChange Cloud Functions トリガーを使用します。このトリガーは、Cloud Storage バケットでファイルまたはフォルダが作成または変更されるとすぐにコードを実行します。index.js ファイルに blurOffensiveImages 関数を追加します。

index.js

// Checks if uploaded images are flagged as Adult or Violence and if so blurs them.
exports.blurOffensiveImages = functions.runWith({memory: '2GB'}).storage.object().onFinalize(
    async (object) => {
      const imageUri = `gs://${object.bucket}/${object.name}`;
      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(imageUri);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.protos.google.cloud.vision.v1.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        functions.logger.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      functions.logger.log('The image', object.name, 'has been detected as OK.');
    });

関数を実行する Cloud Functions インスタンスの構成がいくつか追加されていることに注目してください。この関数はメモリを大量に消費するため、.runWith({memory: '2GB'}) ではデフォルトではなく 2 GB のメモリがインスタンスに割り当てられるようリクエストします。

この関数がトリガーされると、画像が Cloud Vision API に実行され、アダルトまたは暴力的な画像としてフラグが立てられます。これらの基準に基づいて画像が不適切と判断された場合、画像にぼかしを入れます。これは、次に説明するように blurImage 関数で行われます。

画像にぼかしを入れる

index.js ファイルに次の blurImage 関数を追加します。

index.js

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  functions.logger.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await exec(`convert "${tempLocalFile}" -channel RGBA -blur 0x24 "${tempLocalFile}"`);
  functions.logger.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  functions.logger.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  functions.logger.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  functions.logger.log('Marked the image as moderated in the database.');
}

上記の関数では、画像バイナリが Cloud Storage からダウンロードされます。次に、ImageMagick の convert ツールを使用して画像にぼかしを入れ、ぼかしを入れた画像を Storage バケットに再アップロードします。次に、Cloud Functions インスタンスのファイルを削除してディスク容量を空けます。これは、同じ Cloud Functions インスタンスが再利用される可能性があり、ファイルをクリーンアップしないとディスク容量が不足する可能性があるためです。最後に、画像のモデレーションを行ったことを示すブール値をチャット メッセージに追加します。これにより、クライアントのメッセージの更新がトリガーされます。

関数をデプロイする

Function は、デプロイした後にのみアクティブになります。コマンドラインで firebase deploy --only functions を実行します。

firebase deploy --only functions

コンソールに次のような出力が表示されます。

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
  functions[addWelcomeMessages]: Successful update operation.
  functions[blurOffensiveImages]: Successful create operation.
  functions: all functions deployed successfully!

  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

関数をテストする

関数が正常にデプロイされたら、次の手順を行います。

  1. ホスティング URL(https://<project-id>.firebaseapp.com の形式)を使用してブラウザでアプリを開きます。
  2. アプリにログインしたら、画像をアップロードします。4db9fdab56703e4a.png
  3. 不適切な画像を選択してアップロードします(または、こちらの Flesh eating Zombie を使用してください)。しばらくすると、ぼかしを入れた画像で投稿が更新されます: 83dd904fbaf97d2b.png

10. 新しいメッセージの通知

このセクションでは、新しいメッセージが投稿されたときにチャットの参加者に通知を送信する Cloud Functions の関数を追加します。

Firebase Cloud Messaging(FCM)を使用すると、プラットフォーム間でユーザーに通知を確実に送信できます。ユーザーに通知を送信するには、FCM デバイス トークンが必要です。使用しているチャット ウェブアプリは、ユーザーが新しいブラウザまたはデバイスで初めてアプリを開いたときに、すでにデバイス トークンを収集しています。これらのトークンは、Cloud Firestore の fcmTokens コレクションに保存されます。

ウェブアプリで FCM デバイス トークンを取得する方法については、Firebase ウェブの Codelab をご覧ください。

通知を送信する

新しいメッセージが投稿されたことを検出するには、Cloud Functions トリガー functions.firestore.document().onCreate を使用します。このトリガーでは、Cloud Firestore の特定のパスで新しいオブジェクトが作成されると、コードが実行されます。sendNotifications 関数を index.js ファイルに追加します。

index.js

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      functions.logger.log('Notifications have been sent and tokens cleaned up.');
    }
  });

上記の関数では、すべてのユーザーのCloud Firestore データベースからデバイス トークンを取得し、admin.messaging().sendToDevice 関数を使用して各トークンに通知を送信します。

トークンをクリーンアップする

最後に、無効になったトークンを削除します。これは、ユーザーから受け取ったトークンが、ブラウザやデバイスで使用されなくなった場合に発生します。たとえば、ユーザーがブラウザ セッションの通知権限を取り消した場合に発生します。これを行うには、index.js ファイルに次の cleanupTokens 関数を追加します。

index.js

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     functions.logger.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens that are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

関数をデプロイする

この関数はデプロイした後にのみアクティブになります。デプロイするには、コマンドラインで次のコマンドを実行します。

firebase deploy --only functions

コンソールに次のような出力が表示されます。

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: updating function blurOffensiveImages...
i  functions: creating function sendNotifications...
  functions[addWelcomeMessages]: Successful update operation.
  functions[blurOffensiveImages]: Successful updating operation.
  functions[sendNotifications]: Successful create operation.
  functions: all functions deployed successfully!

  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

関数をテストする

  1. 関数が正常にデプロイされたら、ホスティング URL(https://<project-id>.firebaseapp.com 形式)を使用してブラウザでアプリを開きます。
  2. 初めてアプリにログインする場合は、通知を表示したときに通知を許可してください: 8b9d0c66dc36153d.png
  3. チャットアプリのタブを閉じるか、別のタブを表示します。通知は、アプリがバックグラウンドで実行されている場合にのみ表示されます。アプリがフォアグラウンドで動作しているときにメッセージを受信する方法については、こちらのドキュメントをご覧ください。
  4. 別のブラウザ(またはシークレット ウィンドウ)を使用して、アプリにログインし、メッセージを投稿します。最初のブラウザ(45282ab12b28b926.png)で通知が表示されます。

11. 完了

Firebase SDK for Cloud Functions を使用してチャットアプリにサーバー側コンポーネントを追加しました。

学習した内容

  • Firebase SDK for Cloud Functions を使用して Cloud Functions を作成する。
  • Auth、Cloud Storage、Cloud Firestore イベントに基づいて Cloud Functions をトリガーする。
  • ウェブアプリに Firebase Cloud Messaging サポートを追加する。
  • Firebase CLI を使用して Cloud Functions をデプロイする。

次のステップ

詳細