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

FirebaseWebコードラボ

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

3b1284f5144b54f6.png

あなたが学ぶこと

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

必要なもの

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

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

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

または、gitがインストールされていない場合は 、リポジトリをZIPファイルとしてダウンロードでき ます

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

IDEを使用して、複製されたリポジトリから📁web web-startディレクトリを開くかインポートします。この📁web web-startディレクトリには、完全に機能するチャットWebアプリとなるcodelabの開始コードが含まれています。

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

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

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

  • ユーザーがアプリに簡単にログインできるようにするFirebase認証
  • 構造化データをクラウドに保存し、データが変更されたときに即座に通知を受け取るCloudFirestore。
  • クラウドにファイルを保存するためのFirebase用クラウドストレージ
  • アセットをホストして提供するFirebaseHosting
  • プッシュ通知を送信し、ブラウザのポップアップ通知を表示するFirebase CloudMessaging
  • アプリのユーザーパフォーマンスデータを収集するためのFirebasePerformanceMonitoring

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

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

  1. Webアイコンをクリックします58d6543a156e56f9.png新しいFirebaseWebアプリを作成します。
  2. ニックネームFriendlyChatでアプリを登録し、[このアプリのFirebaseHostingも設定する]の横にあるチェックボックスをオンにします。 [アプリの登録]をクリックします。
  3. 残りの手順をクリックします。今すぐ指示に従う必要はありません。これらについては、このコードラボの後のステップで説明します。

ea9ab0db531a104c.png

Firebase認証でGoogleログインを有効にする

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

Googleログインを有効にする必要があります。

  1. Firebaseコンソールで、左側のパネルの[ビルド]セクションを見つけます。
  2. [認証]をクリックし、[サインイン方法]タブをクリックします(または、ここをクリックして直接アクセスします)。
  3. Googleログインプロバイダーを有効にして、[保存]をクリックします
  4. アプリの公開名をFriendlyChatに設定し、ドロップダウンメニューからプロジェクトサポートメールを選択します。
  5. Google Cloud ConsoleでOAuth同意画面を構成し、ロゴを追加します。

d89fb3873b5d36ae.png

CloudFirestoreを有効にする

Webアプリは、 Cloud Firestoreを使用してチャットメッセージを保存し、新しいチャットメッセージを受信します。

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

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

729991a081e7cd5.png

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

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

77e4986cbeaf9dee.png

  1. CloudFirestoreデータが保存される場所を設定します。これをデフォルトのままにするか、自分に近い地域を選択できます。 [完了]をクリックして、Firestoreをプロビジョニングします。

9f2bb0d4e7ca49c7.png

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

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

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

  1. Firebaseコンソールの[ビルド]セクションで、[ストレージ]をクリックします。
  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ディレクトリのコンソールで、次のFirebaseCLIコマンドを実行します。
firebase serve --only hosting
  1. コマンドラインに次の応答が表示されます。
✔  hosting: Local server: http://localhost:5000

Firebase Hostingエミュレーターを使用して、アプリをローカルで提供しています。これで、Webアプリがhttp:// localhost:5000から利用できるようになります。 publicサブディレクトリの下にあるすべてのファイルが提供されます。

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

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

4c23f9475228cef4.png

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

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

FirebaseSDKをインポートする

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

アプリの提供にFirebaseHostingを使用しているため、ファイルindex.htmlweb-start/public/ディレクトリにあります)にあるローカルURLをインポートします。このコードラボでは、 index.htmlファイルの最後に次の行を追加しましたが、そこにあることを再確認できます。

index.html

<script src="/__/firebase/8.6.7/firebase-app.js"></script>
<script src="/__/firebase/8.6.7/firebase-auth.js"></script>
<script src="/__/firebase/8.6.7/firebase-storage.js"></script>
<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>
<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>
<script src="/__/firebase/8.6.7/firebase-performance.js"></script>

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

Firebaseを設定する

また、Firebase SDKを構成して、使用しているFirebaseプロジェクトを通知する必要があります。 Firebase Hostingを使用しているため、この構成を行う特別なスクリプトをインポートできます。繰り返しになりますが、このコードラボでは、 public/index.htmlファイルの最後に次の行を追加しましたが、そこにあることを再確認してください。

index.html

<script src="/__/firebase/init.js"></script>

このスクリプトには、Firebase firebase use --addを実行したときに指定したFirebaseプロジェクトに基づくFirebaseプロジェクト構成が含まれています。

ファイルinit.jsを自由に調べて、プロジェクト構成がどのようになっているのかを確認してください。これを行うには、ブラウザでhttp:// localhost:5000 / __ / firebase /init.jsを開きます。次のようなものが表示されます。

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

これで、Firebase SDKがindex.htmlインポートされて初期化されるため、使用できるようになります。次に、FirebaseAuthenticationを使用してユーザーサインインを実装します。

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

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

  1. web-startディレクトリのサブディレクトリpublic/scripts/main.js開きmain.js
  2. 関数signInます。
  3. 関数全体を次のコードに置き換えます。

main.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

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

  1. public/scripts/main.jsファイルに戻ります。
  2. 関数signOutます。
  3. 関数全体を次のコードに置き換えます。

main.js

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

認証状態を追跡する

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

  1. public/scripts/main.jsファイルに戻ります。
  2. 関数initFirebaseAuthます。
  3. 関数全体を次のコードに置き換えます。

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

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

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

サインインしたユーザーのプロフィール写真とユーザー名をアプリのトップバーに表示したいと思います。 Firebaseでは、サインインしたユーザーのデータは常にfirebase.auth().currentUserオブジェクトで利用firebase.auth().currentUserます。以前は、ユーザーがサインインしたときにトリガーするようにauthStateObserver関数を設定して、UIがそれに応じて更新されるようにしました。 getProfilePicUrlされると、 getProfilePicUrlgetUserNameが呼び出されます。

  1. public/scripts/main.jsファイルに戻ります。
  2. 関数getProfilePicUrlおよびgetUserNameます。
  3. 両方の関数を次のコードに置き換えます。

main.js

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

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

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

  1. public/scripts/main.jsファイルに戻ります。
  2. 関数isUserSignedInます。
  3. 関数全体を次のコードに置き換えます。

main.js

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

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

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

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

データ・モデル

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

688d7bc5fb662b57.png

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

ユーザーが作成したチャットメッセージを保存するには、 CloudFirestoreを使用します。

このセクションでは、ユーザーがデータベースに新しいメッセージを書き込むための機能を追加します。ユーザーが[送信]ボタンをクリックすると、以下のコードスニペットがトリガーされます。メッセージフィールドの内容を含むメッセージオブジェクトを、 messagesコレクションのCloudFirestoreインスタンスに追加します。 add()メソッドは、自動生成されたIDを持つ新しいドキュメントをコレクションに追加します。

  1. public/scripts/main.jsファイルに戻ります。
  2. 関数saveMessageを見つけます。
  3. 関数全体を次のコードに置き換えます。

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

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

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

6812efe7da395692.png

メッセージを同期する

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

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

  1. public/scripts/main.jsファイルに戻ります。
  2. 関数loadMessagesます。
  3. 関数全体を次のコードに置き換えます。

main.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.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(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関数を使用してコレクションに対するクエリを作成し、 .collectionするデータがどのコレクションにあるかを指定します。上記のコードでは、内の変更をリッスンしています。チャットメッセージが保存されるmessagesコレクション。また、 .limit(12)を使用して最後の12個のメッセージのみをリッスンし、 .orderBy('timestamp', 'desc')を使用して日付順にメッセージを並べ替えて、最新の12個のメッセージを.limit(12)することで制限を適用しています。

.onSnapshot関数は、コールバック関数という1つのパラメーターを取ります。クエリに一致するドキュメントに変更があった場合、コールバック関数がトリガーされます。これは、メッセージが削除、変更、または追加された場合に発生する可能性があります。これについて詳しくは、 CloudFirestoreのドキュメントをご覧ください。

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

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

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

2168dec79b573d07.png

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

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

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

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

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

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

  1. public/scripts/main.jsファイルに戻ります。
  2. 関数saveImageMessageます。
  3. 関数全体を次のコードに置き換えます。

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });
}

画像の送信をテストする

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

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

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

GCM送信者IDをホワイトリストに登録する

ウェブアプリのマニフェストで、 gcm_sender_idを指定する必要があります。これは、FCMがこのアプリへのメッセージの送信を許可されていることを示すハードコードされた値です。

  1. web-startディレクトリのpublicディレクトリで、 manifest.json開きます。
  2. 以下に示すように、 gcm_sender_id属性にブラウザーの送信者ID値を正確に追加します。以下に示す値から値を変更しないでください。

マニフェスト.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

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

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

  1. web-startディレクトリのpublicディレクトリに、 firebase-messaging-sw.jsという名前の新しいファイルを作成します。
  2. その新しいファイルに次のコンテンツを追加します。

firebase-messaging-sw.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

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

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

デバイスまたはブラウザで通知が有効になると、デバイストークン提供されます。このデバイストークンは、特定のデバイスまたは特定のブラウザに通知を送信するために使用するものです。

ユーザーがサインインすると、 saveMessagingDeviceToken関数が呼び出されます。ここで、ブラウザからFCMデバイストークンを取得し、 CloudFirestoreに保存します。

  1. public/scripts/main.jsファイルに戻ります。
  2. 関数saveMessagingDeviceTokenを見つけます。
  3. 関数全体を次のコードに置き換えます。

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(error){
    console.error('Unable to get messaging token.', error);
  });
}

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

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

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

8b9d0c66dc36153d.png

  1. public/scripts/main.jsファイルに戻ります。
  2. 関数requestNotificationsPermissionsます。
  3. 関数全体を次のコードに置き換えます。

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

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

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

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

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

  1. デバイストークンに加えて、Firebaseアプリのサーバーキーも必要になります。このキーを取得するには、 Firebaseコンソール>プロジェクト設定>クラウドメッセージングに移動し、サーバーキーをコピーします

通知を送信するには、次のHTTPリクエストを送信する必要があります。

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}
  1. コマンドラインで、次のcURLコマンドを実行します。
curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

通知は、FriendlyChatアプリがバックグラウンドにある場合にのみ表示されることに注意してください。通知を表示するには、移動するか、別のタブを表示する必要があります。アプリがフォアグラウンドにある場合、 FCMによって送信されたメッセージキャッチする方法があります

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

de79e8638a45864c.png

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

Cloud 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のセキュリティルールを表示する

Cloud Storage for 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属性を追加します。 ( hostingdatabase属性はすでにファイルに含まれているはずです。)

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を有効にする他の方法については、ドキュメントを参照してください。

自動トレース

init.jsの前のステップでinit.js firebase-performance.jsinit.jsを含めたので、ユーザーがデプロイされたサイトにアクセスしたときにページの読み込みとネットワークリクエストの指標を自動的に収集するようにパフォーマンスモニタリングに指示する行を1つ追加するだけです。

  1. public/scripts/main.jsで、既存のTODO下に次の行を追加して、パフォーマンス監視を初期化します。

main.js

// TODO: Enable Firebase Performance Monitoring.
firebase.performance();

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

ユーザーの操作に応答するブラウザーは、アプリの応答性に関する第一印象をユーザーに与えるため、最初の入力遅延は便利です。

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

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

  1. public/index.html開きます。
  2. 次の行のscriptタグのコメントを解除し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は、アセットとウェブアプリを提供するホスティングサービスを提供します。 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"
  }
}

これらの設定は、すべてのファイルを./publicディレクトリ( "public": "./public" )にデプロイすることをCLIに通知します。

  1. コマンドラインがアプリのローカルweb-startディレクトリにアクセスしていることを確認してください。
  2. 次のコマンドを実行して、ファイルをFirebaseプロジェクトにデプロイします。
firebase deploy --except functions
  1. The console should display the following:
=== 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. Visit your web app that's now fully hosted using Firebase Hosting at two of your very own Firebase subdomains:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app .

Alternatively, you can run firebase open hosting:site in the command line.

Visit the documentation to learn more about how Firebase Hosting works .

Go to your project's Firebase console Hosting section to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.

You've used Firebase to build a real-time chat web application!

What we've covered

  • Firebase Authentication
  • Cloud Firestore
  • Firebase SDK for Cloud Storage
  • Firebase Cloud Messaging
  • Firebase Performance Monitoring
  • Firebase Hosting

次のステップ

Learn more