FirebaseWebコードラボ

このコードラボでは、使用する方法を学びますFirebaseを簡単に実装し、Firebase製品およびサービスを使用してチャットクライアントを展開することによって、Webアプリケーションを作成します。

3b1284f5144b54f6.png

あなたが学ぶこと

  • CloudFirestoreとCloudStorage forFirebaseを使用してデータを同期します。
  • FirebaseAuthenticationを使用してユーザーを認証します。
  • WebアプリをFirebaseHostingにデプロイします。
  • Firebase CloudMessagingを使用して通知を送信します。
  • Webアプリのパフォーマンスデータを収集します。

必要なもの

  • など、お好みのIDE /テキストエディタ、 WebStormアトムサブライム、またはVSコード
  • パッケージマネージャのNPM一般的に付属しています、 Node.jsの
  • ターミナル/コンソール
  • Chromeなどの選択したブラウザ
  • コードラボのサンプルコード(コードの取得方法については、コードラボの次のステップを参照してください)。

クローンコードラボのGitHubのリポジトリ、コマンドラインから:

git clone https://github.com/firebase/codelab-friendlychat-web

あなたはGitがインストールされていない場合は別の方法として、次のことができZIPファイルとしてリポジトリをダウンロードしてください

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

オープン、あなたのIDEを使用したり📁インポートweb-startクローン化されたリポジトリからディレクトリを。この📁 web-startディレクトリが完全に機能するチャット、ウェブアプリになりますコードラボ、の開始コードが含まれています。

Firebaseプロジェクトを作成する

  1. サインインしFirebase
  2. Firebaseコンソールで、[プロジェクトの追加]クリックし、お使いのFirebaseプロジェクトFriendlyChat名前付けます。 FirebaseプロジェクトのプロジェクトIDを覚えておいてください。
  3. チェックを外し、このプロジェクトのためにGoogle Analyticsを有効にします
  4. プロジェクトの作成]クリックします。

これから作成するアプリケーションは、ウェブアプリで利用できるFirebase製品を使用しています。

  • Firebase認証は、簡単にユーザーがアプリにログインできるようにします。
  • クラウド上の構造化データを保存したときにデータの変更のインスタント通知を取得するためのクラウドFirestore。
  • Firebaseのためのクラウドストレージをクラウドにファイルを保存します。
  • Firebaseホストにホスティングし、あなたの資産を提供しています。
  • プッシュ通知と表示ブラウザのポップアップ通知を送信するようにFirebaseクラウドメッセージング
  • アプリの収集ユーザー・パフォーマンス・データを監視Firebaseパフォーマンス

これらの製品の一部は、特別な構成が必要であるか、Firebaseコンソールを使用して有効にする必要があります。

FirebaseWebアプリをプロジェクトに追加します

  1. Webアイコンをクリックします58d6543a156e56f9.png新しいFirebaseWebアプリを作成します。
  2. ニックネームフレンドリーチャットでアプリを登録し、また、このアプリのためのホスティングFirebaseを設定し、次のチェックボックスをオンにします。登録アプリをクリックします。
  3. 次のステップでは、構成オブジェクトが表示されます。コピーちょうどJSのオブジェクト(ない、周囲のHTML)へのfirebase-config.jsの

Webアプリのスクリーンショットを登録する

Firebase認証のためのGoogleのサインインを有効にします

ユーザーが自分のGoogleアカウントでウェブアプリにログインできるようにするために、我々は、Googleのログイン方法を使用します。

あなたは、Googleのログインを有効にする必要があります:

  1. Firebaseコンソールでは、左側のパネルで、[ビルド]セクションを探します。
  2. 認証をクリックし、サインインし、メソッドタブをクリックします(または、こちらをクリックしてください直接そこに行きます)。
  3. Googleのサインインのプロバイダを有効にし、[保存]クリックします。
  4. フレンドリーチャットにアプリの公開に面した名前を設定し、ドロップダウンメニューから[プロジェクトのサポートメールを選択してください。
  5. であなたのOAuth同意画面を設定Googleクラウドコンソールやロゴを追加します。

d89fb3873b5d36ae.png

CloudFirestoreを有効にする

ウェブアプリが使用するクラウドFirestoreをチャットメッセージを保存し、新しいチャットメッセージを受信します。

CloudFirestoreを有効にする必要があります。

  1. Firebaseコンソールの[ビルド]セクションで、Firestoreデータベース]クリックします。
  2. クラウドFirestoreペインでデータベースを作成]をクリックします。

729991a081e7cd5.png

  1. テストモードオプションの[開始]を選択し、セキュリティルールについての免責事項を読んだ後、[次へ]クリックします。

テストモードでは、開発中にデータベースに自由に書き込むことができます。このコードラボの後半で、データベースをより安全にします。

77e4986cbeaf9dee.png

  1. CloudFirestoreデータが保存される場所を設定します。これをデフォルトのままにするか、近くの地域を選択できます。規定Firestoreに[完了]クリックします。

9f2bb0d4e7ca49c7.png

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

ウェブアプリはCloudStorage for Firebaseを使用して、写真を保存、アップロード、共有します。

クラウドストレージを有効にする必要があります。

  1. Firebaseコンソールの[ビルド]セクションで、[Storage]をクリックします。
  2. ボタンが開始を取得何だ場合、それはクラウドストレージがすでに有効になっていることを意味しない、とあなたは、以下の手順を実行する必要はありません。
  3. 開始を取得]をクリックします。
  4. あなたのFirebaseプロジェクトのためのセキュリティルールについて免責事項を読み、[次へ]クリックします。

デフォルトのセキュリティルールを使用すると、認証されたユーザーは誰でもCloudStorageに何でも書き込むことができます。このコードラボの後半で、ストレージの安全性を高めます。

62f1afdcd1260127.png

  1. Cloud Storageの場所は、CloudFirestoreデータベースに選択したのと同じリージョンで事前に選択されています。セットアップを完了し、[完了]クリックします。

1d7f49ebaddb32fc.png

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

  1. 次のnpmコマンドを実行してCLIをインストールします。
npm -g install firebase-tools
  1. 次のコマンドを実行して、CLIが正しくインストールされていることを確認します。
firebase --version

FirebaseCLIのバージョンがv4.1.0以降であることを確認してください。

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

アプリのローカルディレクトリ(コードラボで以前にクローンを作成したリポジトリ)からFirebaseHostingのアプリの構成をプルするようにウェブアプリテンプレートを設定しました。ただし、構成をプルするには、アプリをFirebaseプロジェクトに関連付ける必要があります。

  1. あなたのコマンドラインアプリのローカルアクセスしていることを確認してくださいweb-startディレクトリを。
  2. 次のコマンドを実行して、アプリをFirebaseプロジェクトに関連付けます。
firebase use --add
  1. プロンプトが表示されたら、あなたのプロジェクトIDを選択し、あなたのFirebaseプロジェクトの別名を与えます。

エイリアスは、複数の環境(本番環境、ステージングなど)がある場合に役立ちます。しかし、このコードラボのために、ちょうどの別名使用してみましょうdefault

  1. コマンドラインの残りの指示に従います。

プロジェクトをインポートして構成したので、Webアプリを初めて実行する準備が整いました。

  1. 以下からのコンソールでweb-startディレクトリ、次Firebase CLIコマンドを実行します。
firebase serve --only hosting
  1. コマンドラインに次の応答が表示されます。
✔  hosting: Local server: http://localhost:5000

私たちは、使用しているFirebaseホスティングローカルに我々のアプリを提供するためにエミュレータを。ウェブアプリは、今から入手する必要があります。http:// localhostを:5000 。下に配置されているすべてのファイルpublicサブディレクトリを提供しています。

  1. お使いのブラウザを使用して、で、あなたのアプリを開きます。http:// localhostを:5000

FriendlyChatアプリのUIが表示されますが、これは(まだ!)機能していません。

4c23f9475228cef4.png

アプリは現在何もできませんが、あなたの助けを借りてすぐにできます!これまでのところ、UIのレイアウトのみを行っています。

リアルタイムチャットを作成しましょう!

FirebaseSDKをインポートする

FirebaseSDKをアプリにインポートする必要があります。これを行うには複数の方法があります私たちのマニュアルに記載が。たとえば、CDNからライブラリをインポートできます。または、npmを使用してローカルにインストールし、Br​​owserifyを使用している場合はアプリにパッケージ化することもできます。

私たちは、NPMからFirebase SDKを入手して使用するつもりのWebPACKを我々のコードをバンドルします。これは、Webpackが不要なコードを削除できるようにするためです。また、JSバンドルのサイズを小さくして、アプリができるだけ早く読み込まれるようにします。このコードラボのために、我々はすでに作成したweb-start/package.json依存関係としてFirebase SDKを含むファイルを、同様の上部に必要な機能を輸入したweb-start/src/index.js

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

このコードラボでは、Firebase Authentication、Cloud Firestore、Cloud Storage、Cloud Messaging、Performance Monitoringを使用するため、すべてのライブラリをインポートします。今後のアプリでは、アプリの読み込み時間を短縮するために、必要なFirebaseの部分のみをインポートするようにしてください。

Firebase SDKをインストールして、Webpackビルドを開始します

アプリのビルドを開始するには、いくつかのコマンドを実行する必要があります。

  1. 新しいターミナルウィンドウを開く
  2. あなたがになっていることを確認しweb-startディレクトリ
  3. 実行してnpm install Firebase SDKをダウンロードするには
  4. 実行npm run start WebPACKのを起動します。 Webpackは、残りのコードラボのコースコードを継続的に再構築します。

Firebaseを設定する

また、Firebase SDKを構成して、使用しているFirebaseプロジェクトを通知する必要があります。

  1. あなたに行くFirebaseコンソールでのプロジェクト設定
  2. [アプリ]カードで、構成オブジェクトが必要なアプリのニックネームを選択します。
  3. FirebaseSDKスニペットペインから[構成]を選択します。
  4. その後に追加し、configオブジェクトのスニペットをコピーしてweb-start/src/firebase-config.js

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

さて、下部に行くweb-start/src/index.jsとFirebaseを初期化します。

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

それはにインポートし、初期化されていますので、Firebase SDKは現在、使用する準備が整いましindex.html 。現在、ユーザーのサインイン使用して実装するつもりFirebase認証を

Googleログインでユーザーを認証する

ユーザーは、Googleのボタンでサインをクリックすると、アプリでは、 signIn機能がトリガされます。 (すでに設定済みです!)このコードラボでは、FirebaseがGoogleをIDプロバイダーとして使用することを承認します。私たちは、ポップアップを使用しますが、他のいくつかの方法がFirebaseから入手できます。

  1. web-startディレクトリ、サブディレクトリ内src/ 、オープンindex.js
  2. 機能検索signIn
  3. 関数全体を次のコードに置き換えます。

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

signOut 、ユーザーがボタンからログインをクリックしたときに関数がトリガされます。

  1. ファイルに戻るsrc/index.js
  2. 機能の検索signOutUser
  3. 関数全体を次のコードに置き換えます。

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

認証状態を追跡する

それに応じてUIを更新するには、ユーザーがサインインしているかサインアウトしているかを確認する方法が必要です。 Firebase Authenticationを使用すると、認証状態が変化するたびにトリガーされる認証状態にオブザーバーを登録できます。

  1. ファイルに戻るsrc/index.js
  2. 機能検索initFirebaseAuth
  3. 関数全体を次のコードに置き換えます。

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

レジスタ機能上のコードauthStateObserver認証状態オブザーバとして。認証状態が変化するたびに(ユーザーがサインインまたはサインアウトするときに)トリガーされます。この時点で、UIを更新して、サインインボタン、サインアウトボタン、サインインしたユーザーのプロフィール写真などを表示または非表示にします。これらのUIパーツはすべてすでに実装されています。

サインインしたユーザーの情報を表示します

サインインしたユーザーのプロフィール写真とユーザー名をアプリのトップバーに表示したいと思います。 Firebaseでは、署名しているユーザーのデータが常に利用可能であるcurrentUserオブジェクト。以前、我々はセットアップauthStateObserver私たちのUIがそれに応じて更新するようでたときにユーザーがサインイントリガーに関数を。これは、呼び出しますgetProfilePicUrlgetUserNameトリガされたとき。

  1. ファイルに戻るsrc/index.js
  2. 機能検索getProfilePicUrlgetUserName
  3. 両方の関数を次のコードに置き換えます。

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

ユーザーがサインインしていないときにユーザーがメッセージを送信しようとすると、エラーメッセージが表示されます(ただし、試すことはできます)。したがって、ユーザーが実際にサインインしているかどうかを検出する必要があります。

  1. ファイルに戻るsrc/index.js
  2. 機能検索isUserSignedIn
  3. 関数全体を次のコードに置き換えます。

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

アプリへのサインインをテストする

  1. アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、実行firebase serve --only hostingからアプリを提供開始するには、コマンドラインで// localhostを:5000 HTTP 、その後、お使いのブラウザで開きます。
  2. サインインボタンとGoogleアカウントを使用してアプリにサインインします。あなたはというエラーメッセージが表示された場合auth/operation-not-allowed 、必ずFirebaseコンソールでの認証プロバイダとしてGoogleサインインを有効にすることを作るために確認してください。
  3. サインインすると、プロフィール写真とユーザー名が表示されます。 c7401b3d44d0d78b.png

このセクションでは、アプリのUIにデータを入力できるように、CloudFirestoreにデータを書き込みます。これは、使用して手動で行うことができますFirebaseコンソールが、私たちは、基本的なクラウドFirestore書き込みを実証するためのアプリ自体にそれをやります。

データ・モデル

Cloud Firestoreデータは、コレクション、ドキュメント、フィールド、およびサブコレクションに分割されます。我々はと呼ばれるトップレベルのコレクション内の文書としてチャットの各メッセージを格納するmessages

688d7bc5fb662b57.png

CloudFirestoreにメッセージを追加する

ユーザによって書かれたチャットメッセージを格納するために、我々は、使用しますクラウドFirestoreを

このセクションでは、ユーザーがデータベースに新しいメッセージを書き込むための機能を追加します。 SENDボタンをクリックすると、ユーザーは以下のコードをトリガーします。それはあなたにクラウドFirestoreインスタンスにメッセージフィールドの内容でメッセージオブジェクトを追加しmessagesコレクション。 add()メソッドは、コレクションに自動的に生成されたIDを使用して新しい文書を追加します。

  1. ファイルに戻るsrc/index.js
  2. 機能の検索saveMessage
  3. 関数全体を次のコードに置き換えます。

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

メッセージの送信をテストする

  1. アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、実行firebase serve --only hostingからアプリを提供開始するには、コマンドラインで// localhostを:5000 HTTP 、その後、お使いのブラウザで開きます。
  2. サインインした後は、そのような「ちょっとそこ!」、[OK]をクリックしますSENDとしてメッセージを入力します。これにより、メッセージがCloudFirestoreに書き込まれます。我々はまだデータ(コードラボの次のセクション)を検索実装する必要があるためしかし、あなたはまだあなたの実際のWebアプリでデータが表示されません
  3. 新しく追加されたメッセージは、FirebaseConsoleで確認できます。 Firebaseコンソールを開きます。 [ビルド]セクションでFirestoreデータベース]クリックします(またはクリックしてくださいここでは、プロジェクトを選択)し、あなたの新しく追加されたメッセージを持つメッセージのコレクションが表示されます。

6812efe7da395692.png

同期メッセージ

アプリでメッセージを読み取るには、データが変更されたときにトリガーされるリスナーを追加してから、新しいメッセージを表示するUI要素を作成する必要があります。

アプリから新しく追加されたメッセージをリッスンするコードを追加します。このコードでは、データに加えられた変更をリッスンするリスナーを登録します。読み込み時に非常に長い履歴が表示されないように、チャットの最後の12個のメッセージのみを表示します。

  1. ファイルに戻るsrc/index.js
  2. 機能の検索loadMessages
  3. 関数全体を次のコードに置き換えます。

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

データベース内のメッセージを聞くために、我々は、使用して、コレクションでクエリを作成collection 、我々が聴きたいというデータがどのコレクションを指定する機能を。上記のコードでは、内の変化に私たちがしているリスニングmessagesコレクション。チャットメッセージが保存される場所です。また、のみ使用して、最後の12件のメッセージを聞くことによって制限を適用している.limit(12)と、使用して日付でメッセージを注文するorderBy('timestamp', 'desc') 12件の最新のメッセージを取得します。

onSnapshot関数は、最初のパラメータとしてクエリ、およびその第二のようなコールバック関数を取ります。クエリに一致するドキュメントに変更があった場合、コールバック関数がトリガーされます。これは、メッセージが削除、変更、または追加された場合に発生する可能性があります。あなたはこれについての詳細を読むことができるクラウドFirestoreドキュメント

同期メッセージをテストする

  1. アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、実行firebase serve --only hostingからアプリを提供開始するには、コマンドラインで// localhostを:5000 HTTP 、その後、お使いのブラウザで開きます。
  2. 以前にデータベースに作成したメッセージは、FriendlyChat UIに表示されます(以下を参照)。新しいメッセージを自由に書いてください。それらは即座に表示されるはずです。
  3. (オプション)は、削除、変更、またはFirebaseコンソールのデータベースのセクションに直接新しいメッセージを追加し、手動で試すことができます。変更はすべてUIに反映する必要があります。

おめでとう!アプリでCloudFirestoreドキュメントを読んでいます!

2168dec79b573d07.png

次に、画像を共有する機能を追加します。

Cloud Firestoreは構造化データの保存に適していますが、CloudStorageはファイルの保存に適しています。 Firebaseのためのクラウドストレージは、ファイル/ブロブストレージサービスであり、我々は我々のアプリを使用してユーザーを共有する任意の画像を保存するためにそれを使用します。

画像をクラウドストレージに保存する

このコードラボでは、ファイルピッカーダイアログをトリガーするボタンをすでに追加しています。ファイルを選択した後、 saveImageMessage関数が呼び出され、あなたが選択したファイルへの参照を取得することができます。 saveImageMessage機能は、以下のことを実現します:

  1. チャットフィードに「プレースホルダー」チャットメッセージを作成し、画像のアップロード中にユーザーに「読み込み中」のアニメーションが表示されるようにします。
  2. このパスのクラウドストレージへの画像ファイルのアップロード: /<uid>/<messageId>/<file_name>
  3. 画像ファイルの一般に読み取り可能なURLを生成します。
  4. 画像を一時的に読み込む代わりに、新しくアップロードされた画像ファイルのURLでチャットメッセージを更新します。

次に、画像を送信する機能を追加します。

  1. ファイルに戻るsrc/index.js
  2. 機能の検索saveImageMessage
  3. 関数全体を次のコードに置き換えます。

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

画像の送信をテストする

  1. アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、実行firebase serve --only hostingからアプリを提供開始するには、コマンドラインで// localhostを:5000 HTTP 、その後、お使いのブラウザで開きます。
  2. サインイン後、画像アップロードボタンをクリックします13734cb66773e5a3.pngファイルピッカーを使用して画像ファイルを選択します。あなたが画像を探しているなら、この使用気軽にコーヒーカップの素敵な絵を
  3. 選択した画像とともに、アプリのUIに新しいメッセージが表示されます。 3b1284f5144b54f6.png

サインインしていないときに画像を追加しようとすると、画像を追加するにはサインインする必要があることを通知するToast通知が表示されます。

ブラウザ通知のサポートを追加します。アプリは、チャットに新しいメッセージが投稿されたときにユーザーに通知します。 Firebaseクラウドメッセージング(FCM)は、あなたが確実に無償でメッセージや通知を配信することができますクロスプラットフォームのメッセージングソリューションです。

FCMサービスワーカーを追加します

ウェブアプリが必要とサービスワーカーウェブ通知を受信して表示します。

  1. web-startディレクトリ内srcディレクトリ、オープンfirebase-messaging-sw.js
  2. そのファイルに次のコンテンツを追加します。

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

Service Workerは、Firebase Cloud Messaging SDKを読み込んで初期化するだけで、通知の表示を処理します。

FCMデバイストークンを取得する

通知は、デバイスまたはブラウザ上で有効になっているときは、トークンデバイスが与えられます。このデバイストークンは、特定のデバイスまたは特定のブラウザに通知を送信するために使用するものです。

ユーザーがサインインが、我々は呼び出すとsaveMessagingDeviceToken機能を。それのどこが、私たちは、ブラウザからトークンFCMデバイスを取得し、クラウドFirestoreに保存します。

  1. ファイルに戻るsrc/index.js
  2. 機能検索saveMessagingDeviceToken
  3. 関数全体を次のコードに置き換えます。

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

ただし、このコードは最初は機能しません。アプリがデバイストークンを取得できるようにするには、ユーザーがアプリに通知を表示する権限を付与する必要があります(コードラボの次のステップ)。

通知を表示するためのアクセス許可を要求する

ユーザーがアプリに通知を表示する権限をまだ付与していない場合、デバイストークンは提供されません。この場合、我々は呼んでfirebase.messaging().requestPermission() (この許可を求めるブラウザのダイアログが表示されます方法、サポートされているブラウザでは)。

8b9d0c66dc36153d.png

  1. ファイルに戻るsrc/index.js
  2. 機能の検索requestNotificationsPermissions
  3. 関数全体を次のコードに置き換えます。

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

デバイストークンを取得する

  1. アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、実行firebase serve --only hostingからアプリを提供開始するには、コマンドラインで// localhostを:5000 HTTP 、その後、お使いのブラウザで開きます。
  2. サインインすると、通知許可ダイアログが表示されます。 bd3454e6dbfb6723.png
  3. 許可]をクリックします。
  4. ブラウザのJavaScriptコンソールを開きます。 :次のメッセージ表示されるはずGot FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. デバイストークンをコピーします。コードラボの次の段階で必要になります。

デバイスに通知を送信します

デバイストークンを取得したので、通知を送信できます。

  1. 開きFirebaseコンソールのクラウドメッセージング]タブを
  2. 「新規通知」をクリックします
  3. 通知のタイトルと通知テキストを入力します。
  4. 画面右側の「テストメッセージを送信」をクリックします
  5. ブラウザのJavaScriptコンソールからコピーしたデバイストークンを入力し、プラス( "+")記号をクリックします
  6. 「テスト」をクリックします

アプリがフォアグラウンドにある場合は、JavaScriptコンソールに通知が表示されます。

アプリがバックグラウンドにある場合は、次の例のように、ブラウザに通知が表示されます。

de79e8638a45864c.png

Viewデータベースのセキュリティルール

クラウドFirestoreは、特定の使用ルール言語をアクセス権、セキュリティ、およびデータの検証を定義します。

このコードラボの冒頭でFirebaseプロジェクトを設定する際、データストアへのアクセスを制限しないように、「テストモード」のデフォルトのセキュリティルールを使用することを選択しました。でFirebaseコンソールデータベース]セクションの[ルール]タブで、あなたはこれらのルールを表示して変更することができます。

現在、データストアへのアクセスを制限しないデフォルトのルールが表示されているはずです。これは、すべてのユーザーがデータストア内の任意のコレクションに対して読み取りと書き込みを行えることを意味します。

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

次のルールを使用して、ルールを更新して制限します。

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

データベースのセキュリティルールを更新する

データベースセキュリティルールを編集するには、Firebaseコンソールで、またはFirebaseCLIを使用してデプロイされたローカルルールファイルから2つの方法があります。

Firebaseコンソールでセキュリティルールを更新するには:

  1. 左側のパネルからデータベースのセクションに移動し、[ルール]タブをクリックします。
  2. すでにコンソールにあるデフォルトのルールを上記のルールに置き換えます。
  3. 公開]をクリックします。

ローカルファイルからセキュリティルールを更新するには:

  1. web-startディレクトリ、オープンfirestore.rules
  2. すでにファイルにあるデフォルトのルールを上記のルールに置き換えます。
  3. web-startディレクトリ、オープンfirebase.json
  4. 追加firestore.rulesを指す属性firestore.rules以下のように、。 ( hosting属性がすでにファイルにする必要があります。)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. 次のコマンドを実行して、FirebaseCLIを使用してセキュリティルールをデプロイします。
firebase deploy --only firestore
  1. コマンドラインに次の応答が表示されます。
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

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

CloudStorageのセキュリティルールを表示する

Firebaseのためのクラウドストレージは、特定の使用ルール言語をアクセス権、セキュリティ、およびデータの検証を定義します。

このコードラボの冒頭でFirebaseプロジェクトを設定する際に、認証されたユーザーのみがクラウドストレージを使用できるようにするデフォルトのクラウドストレージセキュリティルールを使用することを選択しました。でFirebaseコンソールストレージセクションルール]タブでは、ルールを表示および変更することができます。サインインしたユーザーがストレージバケット内のファイルを読み書きできるようにするデフォルトのルールが表示されます。

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

次のようにルールを更新します。

  • 各ユーザーが自分の特定のフォルダーにのみ書き込むことを許可する
  • 誰でもクラウドストレージから読み取れるようにする
  • アップロードされたファイルが画像であることを確認してください
  • アップロードできる画像のサイズを最大5MBに制限します

これは、次のルールを使用して実装できます。

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

CloudStorageのセキュリティルールを更新する

ストレージセキュリティルールを編集するには、Firebaseコンソールで、またはFirebaseCLIを使用してデプロイされたローカルルールファイルから2つの方法があります。

Firebaseコンソールでセキュリティルールを更新するには:

  1. 左側のパネルからストレージセクションに移動し、[ルール]タブをクリックします。
  2. すでにコンソールにあるデフォルトのルールを上記のルールに置き換えます。
  3. 公開]をクリックします。

ローカルファイルからセキュリティルールを更新するには:

  1. web-startディレクトリ、オープンstorage.rules
  2. すでにファイルにあるデフォルトのルールを上記のルールに置き換えます。
  3. web-startディレクトリ、オープンfirebase.json
  4. 追加storage.rulesを指す属性storage.rules下に示すように、ファイルを。 ( hostingおよびdatabase属性がすでにファイルにする必要があります。)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. 次のコマンドを実行して、FirebaseCLIを使用してセキュリティルールをデプロイします。
firebase deploy --only storage
  1. コマンドラインに次の応答が表示されます。
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

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

Performance Monitoring SDKを使用して、アプリから実際のパフォーマンスデータを収集し、Firebaseコンソールでそのデータを確認および分析できます。パフォーマンスモニタリングは、アプリのパフォーマンスをいつどこで改善できるかを理解するのに役立ち、その情報を使用してパフォーマンスの問題を修正できます。

Firebase Performance Monitoring JavaScriptSDKと統合するにはさまざまな方法があります。このコードラボでは、我々はホスティングのURLからパフォーマンスの監視を可能にしました。参照してくださいドキュメントSDKを有効にする他の方法を参照してください。

自動トレース

我々はすでにインポートのでgetPerformanceの上部にweb-start/src/index.js 、私たちはユーザーが展開され、サイトを訪問したときに、あなたのために自動的に収集ページの負荷やネットワーク要求メトリックにパフォーマンスの監視を伝えるために1行を追加する必要があります!

  1. ではweb-start/src/index.js 、既存の下に次の行を追加しますTODOパフォーマンス監視を初期化します。

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

最初の入力遅延を測定する(オプション)

まず、入力遅延は、ユーザーとの対話に応答して、ブラウザアプリの応答性についてユーザーに彼らの第一印象を与えるので、便利です。

最初の入力遅延は、ユーザーがボタンやハイパーリンクをクリックするなど、ページ上の要素を最初に操作したときに始まります。ブラウザが入力に応答できるようになるとすぐに停止します。つまり、ブラウザはページのコンテンツの読み込みや解析に忙しくありません。

最初の入力遅延を測定する場合は、次のコードを直接含める必要があります。

  1. オープンpublic/index.html
  2. コメントを解除しscriptの次の行上のタグ。

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

最初の入力遅延ポリフィル詳細情報は、見とるドキュメントを

パフォーマンスデータの表示

サイトをまだデプロイしていないため(次のステップでデプロイします)、ユーザーがデプロイしたサイトを操作してから30分以内にFirebaseコンソールに表示されるページ読み込みパフォーマンスに関する指標を示すスクリーンショットを次に示します。 :

29389131150f33d7.png

Performance Monitoring SDKをアプリに統合する場合、アプリがパフォーマンスのいくつかの重要な側面の監視を自動的に開始する前に、他のコードを記述する必要はありません。 Webアプリの場合、SDKは、最初のコンテンツペイント、ユーザーがアプリを操作する機能などの側面をログに記録します。

カスタムトレース、メトリック、および属性を設定して、アプリの特定の側面を測定することもできます。詳細学ぶためのドキュメントを参照してくださいカスタムトレースおよびメトリクスおよびカスタム属性

Firebaseは提供していますホスティングサービスをあなたの資産とWebアプリケーションを提供します。 Firebase CLIを使用して、ファイルをFirebaseHostingにデプロイできます。デプロイする前に、あなたはあなたの中に指定する必要がfirebase.jsonローカルファイルを展開する必要がありますファイル。このコードラボでは、このコードラボ中にファイルを提供するためにこの手順が必要だったため、これはすでに実行されています。ホスティングの設定は下に指定されているhosting属性:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

これらの設定は、我々は内のすべてのファイル展開したいというCLIを伝える./publicディレクトリ( "public": "./public" )。

  1. あなたのコマンドラインアプリのローカルアクセスしていることを確認してくださいweb-startディレクトリを。
  2. 次のコマンドを実行して、ファイルをFirebaseプロジェクトにデプロイします。
firebase deploy --except functions
  1. コンソールに次のように表示されます。
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. 独自のFirebaseサブドメインの2つでFirebaseHostingを使用して、グローバルCDNで完全にホストされているウェブアプリにアクセスします。
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

また、あなたが実行できるfirebase open hosting:siteコマンドラインでを。

詳細については学ぶためにドキュメントをご覧くださいFirebaseが作品をホスティングする方法を

あなたが展開するの歴史、アプリの以前のバージョンにロールバックする機能、およびカスタムドメインを設定するためのワークフローなど、便利なホスティング情報とツールを、表示するプロジェクトのFirebaseコンソールホスティングセクションに移動します。

Firebaseを使用してリアルタイムチャットウェブアプリケーションを構築しました。

私たちがカバーしたこと

  • Firebase認証
  • クラウドファイヤーストア
  • クラウドストレージ用のFirebaseSDK
  • Firebase Cloud Messaging
  • Firebaseパフォーマンスモニタリング
  • Firebaseホスティング

次のステップ

Learn more