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

1。概要

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

3b1284f5144b54f6.png

学べること

  • Firebase SDK を使用して Google Cloud Functions を作成します。
  • 認証、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.pngサンプルコードディレクトリのcloud-functions-startディレクトリ。このディレクトリには、完全に機能する Chat Web アプリで構成されるコードラボの開始コードが含まれています。

3. Firebase プロジェクトを作成し、アプリをセットアップする

プロジェクトの作成

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

「プロジェクトの作成」をクリックします。

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

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

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

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

Google認証を有効にする

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

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

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

8290061806aacb46.png

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

このアプリはクラウド ストレージを使用して写真をアップロードします。 Firebase プロジェクトで Cloud Storage を有効にするには、 [ストレージ]セクションにアクセスして、 [開始する]ボタンをクリックします。そこにある手順を実行すると、クラウド ストレージの場所に使用するデフォルト値が表示されます。その後、 「完了」をクリックします。

Web アプリを追加する

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

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

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

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

npm -g install firebase-tools

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

firebase --version

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

以下を実行して Firebase CLI を認証します。

firebase login

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

firebase use --add

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

5. Web アプリをデプロイして実行する

プロジェクトをインポートして構成したので、Web アプリを初めて実行する準備が整いました。ターミナル ウィンドウを開き、 cloud-functions-startフォルダーに移動し、以下を使用して 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

ウェブアプリを開く

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

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

3b1284f5144b54f6.png

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

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

誤って[ブロック]をクリックしてしまった場合は、Chrome オムニバーで URL の左側にある🔒 [セキュリティ]ボタンをクリックし、 [通知]の横のバーを切り替えることで、この設定を変更できます。

e926868b0546ed71.png

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

6. 関数ディレクトリ

Cloud Functions を使用すると、サーバーをセットアップせずに、クラウドでコードを簡単に実行できます。 Firebase Auth、Cloud Storage、Firebase Firestore データベース イベントに反応する関数を構築する方法について説明します。認証から始めましょう。

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

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

cd functions
ls

Node.jsに慣れていない場合は、コードラボを続行する前に Node.js についてさらに学習すると役立ちます。

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

npm install

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

インデックス.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 モジュールをインポートする

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

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

インデックス.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 コンソールで、 [Build]セクションの[Firestore Database]をクリックします。メッセージ コレクションと、作成したメッセージを含む 1 つのドキュメントが表示されます。

442c9c10b5e2b245.png

ご覧のとおり、チャット メッセージは、 messagesコレクションに追加されたnameprofilePicUrltext 、およびtimestamp属性を持つドキュメントとして Cloud Firestore に保存されます。

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

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

インデックス.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 は、デプロイした後にのみアクティブになります。これを行うには、コマンドラインでこれを実行します。

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 コンソール認証を開いて、ユーザーのリストからアカウントを削除できます。その後、再度サインインします。

262535d1b1223c65.png

  1. サインインすると、ようこそメッセージが自動的に表示されます。

1c70e0d64b23525b.png

9. 画像の管理

ユーザーはチャットにあらゆる種類の画像をアップロードできますが、特に公共のソーシャル プラットフォームでは、不快な画像を管理することが常に重要です。 FriendlyChat では、チャットに公開される画像は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ファイルの先頭に次の行を追加します。

インデックス.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 バケット内でファイルまたはフォルダが作成または変更されるとすぐにコードを実行します。 blurOffensiveImages関数をindex.jsファイルに追加します。

インデックス.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'})では、この関数はメモリを大量に消費するため、インスタンスがデフォルトではなく 2GB のメモリを取得するように要求しています。

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

画像をぼかす

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

インデックス.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 Bucket に再アップロードします。次に、Cloud Functions インスタンス上のファイルを削除してディスク領域を解放します。これを行うのは、同じ Cloud 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

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

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

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

Web アプリで FCM デバイス トークンを取得する方法を学びたい場合は、 Firebase Web Codelabを参照してください。

通知を送信する

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

インデックス.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関数を追加します。

インデックス.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. おめでとうございます!

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

私たちがカバーした内容

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

次のステップ

もっと詳しく知る