Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

Firebaseのクラウド機能

このコードラボでは、Firebase SDK for Google Cloud Functionsを使用してチャットWebアプリを改善する方法と、CloudFunctionsを使用してチャットアプリのユーザーに通知を送信する方法を学習します。

3b1284f5144b54f6.png

あなたが学ぶこと

  • FirebaseSDKを使用してGoogleCloudFunctionsを作成します。
  • Auth、Cloud Storage、CloudFirestoreイベントに基づいてクラウド機能をトリガーします。
  • Firebase CloudMessagingのサポートをウェブアプリに追加します。

必要なもの

  • クレジットカード。 Cloud Functions for Firebaseには、Firebase Blazeプランが必要です。つまり、クレジットカードを使用してFirebaseプロジェクトの請求を有効にする必要があります。
  • WebStormAtomSublimeなどの選択したIDE /テキストエディタ。
  • NodeJSv8がインストールされた状態でシェルコマンドを実行するための端末。
  • Chromeなどのブラウザ。
  • サンプルコード。これについては、次のステップを参照してください。

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

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

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

IDEを使用して、を開くかインポートしますandroid_studio_folder.png cloud-functions-startサンプルコードディレクトリからディレクトリをcloud-functions-startます。このディレクトリには、完全に機能するチャットWebアプリで構成されるコードラボの開始コードが含まれています。

プロジェクトを作成する

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

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

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

Cloud Functions for Firebaseを使用するには、FirebaseプロジェクトをBlaze課金プランにアップグレードする必要があります。これには、GoogleCloudアカウントにクレジットカードまたは別の請求方法を追加する必要があります。

Blazeプランのプロジェクトを含む、すべてのFirebaseプロジェクトは、引き続きCloudFunctionsの無料の使用割り当てにアクセスできます。このコードラボで概説されている手順は、無料利用枠の使用制限内に収まります。ただし、CloudFunctionsビルドイメージをホストするために使用されるCloudStorageから少額の料金(約$ 0.03 )が表示されます。

クレジットカードにアクセスできない場合、またはBlazeプランを続行することに不安がある場合は、ローカルマシンでCloudFunctionsを無料でエミュレートできるFirebaseEmulatorSuiteの使用を検討してください。

Google認証を有効にする

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

Firebase Consoleで、[開発]セクション> [認証]> [ログイン方法]タブを開きます(または、ここをクリックしてそこに移動します) 。Googleサインインプロバイダーを有効にして、[保存]をクリックする必要があります。これにより、ユーザーは自分のGoogleアカウントでWebアプリにサインインできるようになります。

また、アプリの公開名をFriendlyChatに自由に設定してください。

8290061806aacb46.png

クラウドストレージを有効にする

アプリはクラウドストレージを使用して写真をアップロードします。 Firebaseプロジェクトでクラウドストレージを有効にするには、[ストレージ]セクションにアクセスし、[開始]ボタンクリックします。次に、セキュリティルールに関する免責事項を受け取ったら、[ GotIt]をクリックします。

842ad84821323ef5.png

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

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

npm -g install firebase-tools

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

firebase --version

Cloud Functionsに必要なすべての最新機能を備えているように、FirebaseCLIのバージョンが4.0.0を超えていることを確認してください。そうでない場合は、 npm install -g firebase-toolsを実行して、上記のようにアップグレードします。

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

firebase login

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

firebase use --add

次に、プロジェクトIDを選択し、指示に従います。プロンプトが表示されcodelab 、たとえばcodelabなどの任意のエイリアスを選択できます。

プロジェクトをインポートして構成したので、初めてWebアプリを実行する準備が整いました。 cloud-functions-startフォルダーでコンソールを開き、 firebase deploy --except functionsを実行します。 firebase deploy --except functionsこれはWebアプリをFirebaseホスティングにのみデプロイします。

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

Webアプリを開きます

最後の行にはホスティングURLが表示されます。これで、Webアプリはhttps:// <project-id> .firebaseapp.comの形式である必要があるこのURLから提供されるはずです。それを開く。チャットアプリの機能するUIが表示されます。

SIGN-IN WITH GOOGLEボタンを使用してアプリにサインインし、メッセージを追加して画像を投稿してください。

3b1284f5144b54f6.png

新しいブラウザで初めてアプリにサインインする場合は、プロンプトが表示されたら通知を許可するようにしてください。 8b9d0c66dc36153d.png

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

誤って[ブロック]をクリックした場合は、ChromeオムニバーのURLの左側にある🔒 [セキュリティで保護]ボタンをクリックし、 [通知]> [このサイトで常に許可]を選択することで、この設定を変更できます。

e926868b0546ed71.png

次に、Firebase SDK for CloudFunctionsを使用していくつかの機能を追加します。

Cloud Functionsを使用すると、サーバーをセットアップしなくても、クラウドで実行されるコードを簡単に作成できます。 Firebase Auth、Cloud Storage、Firebase RealtimeDatabaseのイベントに反応する関数を作成する方法を紹介します。 Authから始めましょう。

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

簡単にするために、コードを配置するfunctions/index.jsファイルをすでに作成しています。先に進む前に、このファイルを自由に調べてください。

cd functions
ls

Node.jsに慣れていない場合は、コードラボを続行する前に、 Node.jsについて詳しく知ることができます。

package.jsonファイルには、すでに2つの必要な依存関係を示しています:クラウド関数のFirebase SDKFirebase管理SDK 。それらをローカルにnpm installは、 functionsフォルダーからnpm installします。

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つの関数を記述します。まず、必要なノードモジュールをインポートしましょう。

このコードラボでは2つのモジュールが必要になります。firebase firebase-functionsモジュールを使用するとCloudFunctionsトリガールールを記述でき、firebase firebase-adminモジュールを使用すると管理者アクセス権を持つサーバーでFirebaseプラットフォームを使用できます。 CloudFirestoreまたは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は、CloudFunctions環境または他のGoogleCloudPlatformコンテナにデプロイすると自動的に構成できます。これは、 admin.initializeApp();呼び出すときに上記で行うことadmin.initializeApp();

次に、ユーザーがチャットアプリに初めてサインインしたときに実行される関数を追加します。次に、ユーザーを歓迎するチャットメッセージを追加します。

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

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

11f5a676fbb1a69a.png

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

fe6d1c020d0744cf.png

Firebaseアプリコンソールで、[開発]セクションの[データベース]をクリックします。メッセージコレクションと、作成したメッセージを含む1つのドキュメントが表示されます。

442c9c10b5e2b245.png

ご覧のとおり、チャットメッセージは、 nameprofilePicUrltexttimestamp属性がmessagesコレクションに追加されたドキュメントとしてprofilePicUrlに保存されmessages

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

最初のクラウド機能は、新しいユーザーをチャットに歓迎するメッセージを追加します。このために、ユーザーがFirebaseアプリに初めてサインインするたびに関数を実行するトリガーfunctions.auth().onCreateを使用できます。 addWelcomeMessages関数をindex.jsファイルに追加します。

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  console.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(),
  });
  console.log('Welcome message written to database.');
});

この関数を特別なexportsオブジェクトに追加することは、現在のファイルの外部で関数にアクセスできるようにするノードの方法であり、クラウド関数に必要です。

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

これは非同期操作であるため、関数が実行を早く終了しないように、CloudFirestoreの書き込みがいつ終了したかを示すPromiseを返す必要があります。

関数をデプロイする

関数は、デプロイした後にのみアクティブになります。コマンドラインでfirebase deploy --only functions実行しfirebase deploy --only 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. 新しいユーザーの場合は、[サインイン]ボタンを使用してアプリに初めてサインインします。
  • すでにアプリにログインしている場合は、 Firebase Console認証セクションを開いて、ユーザーのリストからアカウントを削除できます。その後、再度サインインします。

262535d1b1223c65.png

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

1c70e0d64b23525b.png

ユーザーはチャットですべての種類の画像をアップロードできます。特に公共のソーシャルプラットフォームでは、不快な画像をモデレートすることが常に重要です。 FriendlyChatでは、チャットに公開されている画像がGoogle CloudStorageに保存されます

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

画像をモデレートするには、次のプロセスを実行します。

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

Cloud VisionAPIを有効にする

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

5c77fee51ec5de49.png

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

画像をモデレートするには、いくつかのNode.jsパッケージが必要です。

  • Node.js用のGoogleCloud Visionクライアントライブラリ: @ google-cloud / visionを使用してCloudVision APIを介して画像を実行し、不適切な画像を検出します。
  • プロセスの実行を可能にするNode.jsライブラリ:ImageMagickコマンドラインツールがすべてのFunctionsインスタンスにプリインストールされているため、 child-process-promiseでImageMagickを実行できます。

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

npm install --save @google-cloud/vision@0.12.0 child-process-promise@2.2.1

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

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

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

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision();
const spawn = require('child-process-promise').spawn;

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

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

不適切な画像の検出

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

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 image = {
        source: {imageUri: `gs://${object.bucket}/${object.name}`},
      };

      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(image);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.types.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        console.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      console.log('The image', object.name, 'has been detected as OK.');
    });

関数を実行する.runWith({memory: '2GB'})インスタンスの構成をいくつか追加したことに注意してください.runWith({memory: '2GB'})を使用して、インスタンスがデフォルトではなく2GBのメモリを取得するように要求しています。これは次のように役立ちます。機能はメモリを大量に消費します。

関数がトリガーされると、画像は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});
  console.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await spawn('convert', [tempLocalFile, '-channel', 'RGBA', '-blur', '0x24', tempLocalFile]);
  console.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  console.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  console.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  console.log('Marked the image as moderated in the database.');
}

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

関数をデプロイする

関数は、デプロイした後にのみアクティブになります。コマンドラインでfirebase deploy --only functions実行し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. アップロードするのに最適な不快な画像を選択してください(または、ゾンビを食べるこのを使用できます!)。しばらくすると、画像のぼやけたバージョンで投稿が更新されます。 83dd904fbaf97d2b.png

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

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

ウェブアプリでFCMデバイストークンを取得する方法を知りたい場合は、 Firebase WebCodelabを利用できます。

通知を送信する

新しいメッセージが投稿されたことを検出するには、 functions.firestore.document().onCreate Cloud Functionsトリガーを使用しfunctions.firestore.document().onCreateこのトリガーは、CloudFirestoreの特定のパスに新しいオブジェクトが作成されたときにコードを実行します。 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);
      console.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) {
     console.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens who 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実行し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: 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. 別のブラウザー(またはIncognitoウィンドウ)を使用して、アプリにサインインし、メッセージを投稿します。最初のブラウザに通知が表示されます。 45282ab12b28b926.png

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

私たちがカバーしたこと

  • Firebase SDK for CloudFunctionsを使用してCloudFunctionsをオーサリングします。
  • Auth、Cloud Storage、CloudFirestoreイベントに基づいてクラウド機能をトリガーします。
  • Firebase CloudMessagingのサポートをウェブアプリに追加します。
  • FirebaseCLIを使用してクラウド関数をデプロイしました。

次のステップ

もっと詳しく知る