1。概要
このコードラボでは、Firebase 製品とサービスを使用してチャット クライアントを実装およびデプロイすることにより、 AngularFireを使用して Web アプリケーションを作成する方法を学習します。
学べること
- Angular と Firebase を使用して Web アプリを構築します。
- Cloud Firestore と Cloud Storage for Firebase を使用してデータを同期します。
- Firebase Authentication を使用してユーザーを認証します。
- ウェブアプリを Firebase Hosting にデプロイします。
- Firebase Cloud Messaging を使用して通知を送信します。
- Web アプリのパフォーマンス データを収集します。
必要なもの
2. サンプルコードを入手する
コマンドラインからコードラボのGitHub リポジトリのクローンを作成します。
git clone https://github.com/firebase/codelab-friendlychat-web
git がインストールされていない場合は、リポジトリを ZIP ファイルとしてダウンロードすることもできます。
スターターアプリをインポートする
IDE を使用して、複製されたリポジトリから 📁 angularfire-start
ディレクトリを開くかインポートします。この 📁 angularfire-start
ディレクトリには、完全に機能するチャット Web アプリとなるコードラボの開始コードが含まれています。
3. Firebase プロジェクトを作成して設定する
Firebaseプロジェクトを作成する
- Firebaseにサインインします。
- Firebase コンソールで[プロジェクトの追加]をクリックし、Firebase プロジェクトにFriendlyChatという名前を付けます。 Firebase プロジェクトのプロジェクト ID を覚えておいてください。
- 「このプロジェクトに対して Google アナリティクスを有効にする」のチェックを外します
- 「プロジェクトの作成」をクリックします。
構築しようとしているアプリケーションは、ウェブアプリで利用可能な Firebase 製品を使用します。
- Firebase Authentication を使用すると、ユーザーがアプリに簡単にサインインできるようになります。
- Cloud Firestore は、構造化データをクラウド上に保存し、データが変更されたときに即座に通知を受け取ります。
- Firebase 用の Cloud Storage は、ファイルをクラウドに保存します。
- アセットをホストして提供するFirebase Hosting 。
- Firebase Cloud Messaging を使用してプッシュ通知を送信し、ブラウザーのポップアップ通知を表示します。
- Firebase Performance Monitoring は、アプリのユーザー パフォーマンス データを収集します。
これらの製品の中には、特別な構成が必要な場合や、Firebase コンソールを使用して有効にする必要があるものもあります。
Firebase Web アプリをプロジェクトに追加する
- ウェブアイコンをクリックします
新しい Firebase ウェブアプリを作成します。
- アプリを「Friendly Chat」というニックネームで登録し、 「このアプリの Firebase Hosting も設定します」の横にあるチェックボックスをオンにします。 [アプリの登録]をクリックします。
- 次のステップでは、構成オブジェクトが表示されます。 JS オブジェクトのみ (周囲の HTML ではない) をfirebase-config.jsにコピーします。
Firebase Authentication で Google サインインを有効にする
ユーザーが自分の Google アカウントを使用して Web アプリにサインインできるようにするには、 Googleサインイン方法を使用します。
Googleサインインを有効にする必要があります。
- Firebase コンソールの左側のパネルで[ビルド]セクションを見つけます。
- [認証]をクリックし、 [サインイン方法]タブをクリックします (または、ここをクリックして直接そこに移動します)。
- Googleサインイン プロバイダーを有効にして、 [保存]をクリックします。
- アプリの公開名を「Friendly Chat」に設定し、ドロップダウン メニューからプロジェクト サポートの電子メールを選択します。
- Google Cloud Consoleで OAuth 同意画面を設定し、ロゴを追加します。
Cloud Firestoreを有効にする
このウェブアプリはCloud Firestoreを使用してチャット メッセージを保存し、新しいチャット メッセージを受信します。
Cloud Firestore を有効にする必要があります。
- Firebase コンソールの[ビルド]セクションで、 [Firestore データベース]をクリックします。
- [Cloud Firestore] ペインで[データベースの作成]をクリックします。
- [テスト モードで開始]オプションを選択し、セキュリティ ルールに関する免責事項を読んだ後、 [次へ]をクリックします。
テスト モードでは、開発中にデータベースに自由に書き込むことができます。このコードラボの後半でデータベースの安全性を高めます。
- Cloud Firestore データが保存される場所を設定します。これをデフォルトのままにすることも、近くの地域を選択することもできます。 「完了」をクリックして Firestore をプロビジョニングします。
クラウドストレージを有効にする
このウェブアプリは、Cloud Storage for Firebase を使用して写真を保存、アップロード、共有します。
Cloud Storage を有効にする必要があります。
- Firebase コンソールの[ビルド]セクションで、 [ストレージ]をクリックします。
- [開始する]ボタンがない場合は、クラウド ストレージがすでに有効になっているため、以下の手順に従う必要はありません。
- 「開始する」をクリックします。
- Firebase プロジェクトのセキュリティ ルールに関する免責事項を読み、 [次へ]をクリックします。
デフォルトのセキュリティ ルールを使用すると、認証されたユーザーはすべて Cloud Storage に何でも書き込むことができます。このコードラボの後半でストレージの安全性を高めます。
- Cloud Storage の場所は、Cloud Firestore データベース用に選択したのと同じリージョンで事前に選択されています。 「完了」をクリックしてセットアップを完了します。
4. Firebase コマンドライン インターフェイスをインストールする
Firebase コマンドライン インターフェイス (CLI) を使用すると、Firebase Hosting を使用して Web アプリをローカルで提供したり、Web アプリを Firebase プロジェクトにデプロイしたりできます。
- 次の npm コマンドを実行して CLI をインストールします。
npm -g install firebase-tools
- 次のコマンドを実行して、CLI が正しくインストールされていることを確認します。
firebase --version
Firebase CLI のバージョンが v4.1.0 以降であることを確認してください。
- 次のコマンドを実行して、Firebase CLI を承認します。
firebase login
アプリのローカル ディレクトリ (コードラボで前にクローンを作成したリポジトリ) から Firebase Hosting 用のアプリの設定を取得するようにウェブアプリ テンプレートを設定しました。ただし、設定を取得するには、アプリを Firebase プロジェクトに関連付ける必要があります。
- コマンドラインがアプリのローカルの
angularfire-start
ディレクトリにアクセスしていることを確認してください。 - 次のコマンドを実行して、アプリを Firebase プロジェクトに関連付けます。
firebase use --add
- プロンプトが表示されたら、プロジェクト IDを選択し、Firebase プロジェクトにエイリアスを付けます。
エイリアスは、複数の環境 (本番環境、ステージング環境など) がある場合に便利です。ただし、このコードラボでは、 default
のエイリアスを使用することにします。
- コマンドラインの残りの指示に従います。
5.AngularFireをインストールする
プロジェクトを実行する前に、Angular CLI と AngularFire がセットアップされていることを確認してください。
- コンソールで次のコマンドを実行します。
npm install -g @angular/cli
- 次に、コンソールで
angularfire-start
ディレクトリから次の Angular CLI コマンドを実行します。
ng add @angular/fire
これにより、プロジェクトに必要な依存関係がすべてインストールされます。
- プロンプトが表示されたら、Firebase コンソールで設定した機能 (
ng deploy -- hosting
、Authentication
、Firestore
、Cloud Functions (callable)
、Cloud Messaging
、Cloud Storage
) を選択し、コンソールのプロンプトに従います。
6. スターター アプリをローカルで実行する
プロジェクトをインポートして構成したので、Web アプリを初めて実行する準備が整いました。
- コンソールで、
angularfire-start
ディレクトリから次の Firebase CLI コマンドを実行します。
firebase emulators:start
- コマンドラインには次の応答が表示されるはずです。
✔ hosting: Local server: http://localhost:5000
Firebase Hostingエミュレータを使用してアプリをローカルで提供しています。 Web アプリはhttp://localhost:5000から利用できるようになります。 src
サブディレクトリの下にあるすべてのファイルが提供されます。
- ブラウザを使用して、 http://localhost:5000にあるアプリを開きます。
FriendlyChat アプリの UI が表示されますが、これは (まだ) 機能していません。
アプリは今のところ何もできませんが、あなたの助けがあればすぐにできるようになります。ここまでは UI をレイアウトしただけです。
では、リアルタイム チャットを構築してみましょう。
7. Firebaseをインポートして構成する
Firebaseを構成する
どの Firebase プロジェクトを使用しているかを Firebase SDK に伝えるように構成する必要があります。
- Firebase コンソールでプロジェクト設定に移動します。
- 「あなたのアプリ」カードで、構成オブジェクトが必要なアプリのニックネームを選択します。
- Firebase SDK スニペットペインから「Config」を選択します。
環境ファイル/angularfire-start/src/environments/environment.ts
が生成されたことがわかります。
- 構成オブジェクトのスニペットをコピーし、それを
angularfire-start/src/firebase-config.js
に追加します。
環境.ts
export const environment = {
firebase: {
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",
},
};
AngularFireをインポートする
コンソールで選択した機能が/angularfire-start/src/app/app.module.ts
ファイルに自動的にルーティングされたことがわかります。これにより、アプリで Firebase の機能を使用できるようになります。ただし、ローカル環境で開発するには、それらを接続してエミュレータ スイートを使用する必要があります。
-
/angularfire-start/src/app/app.module.ts
でimports
セクションを見つけ、提供されている関数を変更して非運用環境のエミュレータ スイートに接続します。
// ...
import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';
// ...
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (location.hostname === 'localhost') {
connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
}
return auth;
}),
provideFirestore(() => {
const firestore = getFirestore();
if (location.hostname === 'localhost') {
connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (location.hostname === 'localhost') {
connectFunctionsEmulator(functions, '127.0.0.1', 5001);
}
return functions;
}),
provideStorage(() => {
const storage = getStorage();
if (location.hostname === 'localhost') {
connectStorageEmulator(storage, '127.0.0.1', 5001);
}
return storage;
}),
provideMessaging(() => {
return getMessaging();
}),
// ...
app.module.ts
このコードラボでは、Firebase Authentication、Cloud Firestore、Cloud Storage、Cloud Messaging、Performance Monitoring を使用するので、それらのライブラリをすべてインポートします。今後のアプリでは、アプリの読み込み時間を短縮するために、必要な Firebase の部分のみをインポートするようにしてください。
8. ユーザーサインインを設定する
AngularFire はapp.module.ts
にインポートされて初期化されているため、使用できるようになります。次に、 Firebase Authenticationを使用してユーザー サインインを実装します。
Google サインインでユーザーを認証する
アプリで、ユーザーが[Google でサインイン]ボタンをクリックすると、 login
機能がトリガーされます。 (すでに設定されています。) このコードラボでは、Firebase が ID プロバイダーとして Google を使用することを承認したいと考えています。ポップアップを使用しますが、他にもいくつかの方法が Firebase から利用できます。
-
angularfire-start
ディレクトリのサブディレクトリ/src/app/services/
で、chat.service.ts
を開きます。 - 関数
login
見つけます。 - 関数全体を次のコードに置き換えます。
チャット.サービス.ts
// Signs-in Friendly Chat.
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
this.router.navigate(['/', 'chat']);
return credential;
})
}
logout
機能は、ユーザーが「ログアウト」ボタンをクリックするとトリガーされます。
- ファイル
src/app/services/chat.service.ts
に戻ります。 -
logout
関数を見つけます。 - 関数全体を次のコードに置き換えます。
チャット.サービス.ts
// Logout of Friendly Chat.
logout() {
signOut(this.auth).then(() => {
this.router.navigate(['/', 'login'])
console.log('signed out');
}).catch((error) => {
console.log('sign out error: ' + error);
})
}
認証状態を追跡する
それに応じて UI を更新するには、ユーザーがログインしているかログアウトしているかを確認する方法が必要です。 Firebase Authentication を使用すると、認証状態が変化するたびにトリガーされるユーザー状態の観察可能データを取得できます。
- ファイル
src/app/services/chat.service.ts
に戻ります。 - 変数割り当て
user$
を見つけます。 - 割り当て全体を次のコードに置き換えます。
チャット.サービス.ts
// Observable user
user$ = user(this.auth);
上記のコードは、監視可能なユーザーを返す AngularFire 関数user
を呼び出します。これは、認証状態が変化するたび (ユーザーがサインインまたはサインアウトするとき) にトリガーされます。この時点で、UI を更新してリダイレクトしたり、ヘッダー ナビゲーションにユーザーを表示したりすることになります。これらの UI パーツはすべて実装済みです。
アプリへのログインをテストする
- アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンド ラインで
firebase emulators:start
を実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。 - サインイン ボタンと Google アカウントを使用してアプリにログインします。
auth/operation-not-allowed
を示すエラー メッセージが表示された場合は、Firebase コンソールで認証プロバイダとして Google サインインが有効になっていることを確認してください。 - ログイン後、プロフィール写真とユーザー名が表示されます。
9. Cloud Firestore にメッセージを書き込む
このセクションでは、アプリの UI にデータを入力できるように、Cloud Firestore にデータを書き込みます。これはFirebase コンソールを使用して手動で実行できますが、基本的な Cloud Firestore の書き込みを示すためにアプリ自体で実行します。
データ・モデル
Cloud Firestore データは、コレクション、ドキュメント、フィールド、サブコレクションに分割されます。チャットの各メッセージを、 messages
という最上位のコレクションにドキュメントとして保存します。
Cloud Firestore にメッセージを追加する
ユーザーが書いたチャット メッセージを保存するには、 Cloud Firestoreを使用します。
このセクションでは、ユーザーがデータベースに新しいメッセージを書き込むための機能を追加します。ユーザーが[SEND]ボタンをクリックすると、以下のコード スニペットがトリガーされます。これにより、メッセージ フィールドの内容を含むメッセージ オブジェクトがmessages
コレクション内の Cloud Firestore インスタンスに追加されます。 add()
メソッドは、自動的に生成された ID を持つ新しいドキュメントをコレクションに追加します。
- ファイル
src/app/services/chat.service.ts
に戻ります。 - 関数
addMessage
見つけます。 - 関数全体を次のコードに置き換えます。
チャット.サービス.ts
// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
let data: any;
try {
this.user$.subscribe(async (user) =>
{
if(textMessage && textMessage.length > 0) {
data = await addDoc(collection(this.firestore, 'messages'), {
name: user?.displayName,
text: textMessage,
profilePicUrl: user?.photoURL,
timestamp: serverTimestamp(),
uid: user?.uid
})}
else if (imageUrl && imageUrl.length > 0) {
data = await addDoc(collection(this.firestore, 'messages'), {
name: user?.displayName,
imageUrl: imageUrl,
profilePicUrl: user?.photoURL,
timestamp: serverTimestamp(),
uid: user?.uid
});
}
return data;
}
);
}
catch(error) {
console.error('Error writing new message to Firebase Database', error);
return;
}
}
メッセージ送信のテスト
- アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンド ラインで
firebase emulators:start
を実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。 - ログイン後、「こんにちは!」などのメッセージを入力し、 「送信」をクリックします。これにより、メッセージが Cloud Firestore に書き込まれます。ただし、データの取得を実装する必要があるため (コードラボの次のセクション) 、実際の Web アプリではデータはまだ表示されません。
- 新しく追加されたメッセージは Firebase コンソールで確認できます。エミュレータ スイート UI を開きます。 [Build]セクションで[Firestore Database]をクリックします (またはここをクリックすると、新しく追加したメッセージを含むメッセージコレクションが表示されます。
10. メッセージを読む
メッセージを同期する
アプリでメッセージを読み取るには、データが変更されたときにトリガーされるオブザーバブルを追加し、新しいメッセージを表示する UI 要素を作成する必要があります。
アプリから新しく追加されたメッセージをリッスンするコードを追加します。このコードでは、 messages
コレクションのスナップショットを取得します。読み込み時に非常に長い履歴が表示されるのを避けるために、チャットの最後の 12 メッセージのみが表示されます。
- ファイル
src/app/services/chat.service.ts
に戻ります。 - 関数
loadMessages
見つけます。 - 関数全体を次のコードに置き換えます。
チャット.サービス.ts
// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
// Create the query to load the last 12 messages and listen for new ones.
const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
// Start listening to the query.
return collectionData(recentMessagesQuery);
}
データベース内のメッセージをリッスンするには、 collection
関数を使用してコレクションに対するクエリを作成し、リッスンするデータがどのコレクションに含まれているかを指定します。上記のコードでは、 messages
内の変更をリッスンしています。コレクション。チャット メッセージが保存される場所です。また、 limit(12)
を使用して最後の 12 メッセージのみをリッスンし、 orderBy('timestamp', 'desc')
使用してメッセージを日付順に並べ替えて、最新の 12 メッセージを取得することで、制限を適用しています。
collectionData
関数は内部でスナップショットを使用します。コールバック関数は、クエリに一致するドキュメントに変更があったときにトリガーされます。これは、メッセージが削除、変更、または追加された場合に発生する可能性があります。これについて詳しくは、 Cloud Firestore のドキュメントをご覧ください。
メッセージの同期をテストする
- アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンド ラインで
firebase emulators:start
を実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。 - データベース内に以前に作成したメッセージが FriendlyChat UI に表示されるはずです (以下を参照)。気軽に新しいメッセージを書いてください。それらは即座に表示されるはずです。
- (オプション)エミュレータ スイートのFirestoreセクションで直接、手動でメッセージを削除、変更、または新しいメッセージを追加してみることができます。変更は UI に反映される必要があります。
おめでとう!アプリで Cloud Firestore ドキュメントを読んでいます。
11. 画像を送信する
次に、画像を共有する機能を追加します。
Cloud Firestore は構造化データの保存に適していますが、Cloud Storage はファイルの保存に適しています。 Cloud Storage for Firebase はファイル/BLOB ストレージ サービスであり、ユーザーがアプリを使用して共有する画像を保存するために使用します。
画像をクラウドストレージに保存する
このコードラボでは、ファイル ピッカー ダイアログをトリガーするボタンがすでに追加されています。ファイルを選択すると、 saveImageMessage
関数が呼び出され、選択したファイルへの参照を取得できます。 saveImageMessage
関数は次のことを実行します。
- チャット フィードに「プレースホルダー」チャット メッセージを作成し、画像のアップロード中にユーザーに「読み込み中」アニメーションが表示されるようにします。
- 画像ファイルを Cloud Storage のパス
/<uid>/<file_name>
にアップロードします。 - 画像ファイルの一般に読み取り可能な URL を生成します。
- 一時的な読み込み画像の代わりに、新しくアップロードされた画像ファイルの URL を使用してチャット メッセージを更新します。
次に、画像を送信する機能を追加します。
- ファイル
src/index.js
に戻ります。 - 関数
saveImageMessage
を見つけます。 - 関数全体を次のコードに置き換えます。
インデックス.js
// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
try {
// 1 - You add a message with a loading icon that will get updated with the shared image.
const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);
// 2 - Upload the image to Cloud Storage.
const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
const newImageRef = ref(this.storage, 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.
messageRef ?
await updateDoc(messageRef,{
imageUrl: publicImageUrl,
storageUri: fileSnapshot.metadata.fullPath
}): null;
} catch (error) {
console.error('There was an error uploading a file to Cloud Storage:', error);
}
}
画像の送信テスト
- アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンド ラインで
firebase emulators:start
を実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。 - ログイン後、左下の画像アップロードボタンをクリックしてください
ファイルピッカーを使用して画像ファイルを選択します。画像をお探しの場合は、この素敵なコーヒー カップの画像をご自由にお使いください。
- 選択した画像を含む新しいメッセージがアプリの UI に表示されます。
サインインしていないときに画像を追加しようとすると、画像を追加するにはサインインする必要があることを示すエラーが表示されます。
12. 通知を表示する
次に、ブラウザ通知のサポートを追加します。新しいメッセージがチャットに投稿されると、アプリはユーザーに通知します。 Firebase Cloud Messaging (FCM) は、メッセージと通知を無料で確実に配信できるクロスプラットフォームのメッセージング ソリューションです。
FCM サービス ワーカーを追加する
Web アプリには、Web 通知を受信して表示するService Worker が必要です。
メッセージング プロバイダーは、AngularFire が/angularfire-start/src/app/app.module.ts
されたときにすでにセットアップされているはずです。/angularfire-start/src/app/app.module.ts の imports セクションに次のコードが存在することを確認してください。
provideMessaging(() => {
return getMessaging();
}),
アプリ/app.module.ts
Service Worker は、通知の表示を処理する Firebase Cloud Messaging SDK をロードして初期化するだけで済みます。
FCM デバイス トークンを取得する
デバイスまたはブラウザで通知が有効になっている場合、デバイス トークンが与えられます。このデバイス トークンは、特定のデバイスまたは特定のブラウザに通知を送信するために使用します。
ユーザーがサインインするときに、 saveMessagingDeviceToken
関数を呼び出します。ここで、ブラウザからFCM デバイス トークンを取得し、Cloud Firestore に保存します。
チャット.サービス.ts
- 関数
saveMessagingDeviceToken
を見つけます。 - 関数全体を次のコードに置き換えます。
チャット.サービス.ts
// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
try {
const currentToken = await getToken(this.messaging);
if (currentToken) {
console.log('Got FCM device token:', currentToken);
// Saving the Device Token to Cloud Firestore.
const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
await setDoc(tokenRef, { uid: this.auth.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(this.messaging, (message) => {
console.log(
'New foreground notification from Firebase Messaging!',
message.notification
);
});
} else {
// Need to request permissions to show notifications.
this.requestNotificationsPermissions();
}
} catch(error) {
console.error('Unable to get messaging token.', error);
};
}
ただし、このコードは最初は機能しません。アプリがデバイス トークンを取得できるようにするには、ユーザーはアプリに通知を表示する権限を付与する必要があります (コードラボの次のステップ)。
通知を表示する権限をリクエストする
ユーザーがアプリに通知を表示する権限をまだ付与していない場合、デバイス トークンは与えられません。この場合、 requestPermission()
メソッドを呼び出すと、この許可を求めるブラウザ ダイアログが表示されます (サポートされているブラウザの場合)。
- ファイル
src/app/services/chat.service.ts
に戻ります。 -
requestNotificationsPermissions
関数を見つけます。 - 関数全体を次のコードに置き換えます。
チャット.サービス.ts
// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
console.log('Requesting notifications permission...');
const permission = await Notification.requestPermission();
if (permission === 'granted') {
console.log('Notification permission granted.');
// Notification permission granted.
await this.saveMessagingDeviceToken();
} else {
console.log('Unable to get permission to notify.');
}
}
デバイストークンを取得する
- アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンド ラインで
firebase emulators:start
を実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。 - ログイン後、通知許可ダイアログが表示されます。
- 「許可」をクリックします。
- ブラウザの JavaScript コンソールを開きます。次のメッセージが表示されます:
Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
- デバイストークンをコピーします。コードラボの次の段階で必要になります。
デバイスに通知を送信する
デバイス トークンを取得したので、通知を送信できます。
- Firebase コンソールの [クラウド メッセージング] タブを開きます。
- 「新規通知」をクリックします
- 通知のタイトルと通知テキストを入力します。
- 画面右側の「テストメッセージを送信」をクリックします。
- ブラウザの JavaScript コンソールからコピーしたデバイス トークンを入力し、プラス (「+」) 記号をクリックします。
- 「テスト」をクリックします
アプリがフォアグラウンドにある場合は、JavaScript コンソールに通知が表示されます。
アプリがバックグラウンドにある場合は、次の例のようにブラウザに通知が表示されます。
13. Cloud Firestore セキュリティ ルール
データベースのセキュリティ ルールを表示する
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;
}
}
}
セキュリティ ルールはエミュレータ スイートに自動的に更新されます。
Cloud Storage のセキュリティ ルールを表示する
Cloud Storage for Firebase は、特定のルール言語を使用してアクセス権、セキュリティ、データ検証を定義します。
このコードラボの開始時に Firebase プロジェクトを設定するときに、認証されたユーザーのみに Cloud Storage の使用を許可するデフォルトの Cloud Storage セキュリティ ルールを使用することを選択しました。 Firebase コンソールの[ストレージ]セクションの[ルール]タブで、ルールを表示および変更できます。サインインしているユーザーにストレージ バケット内のファイルの読み取りと書き込みを許可するデフォルトのルールが表示されます。
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
次のことを行うためにルールを更新します。
- 各ユーザーが自分の特定のフォルダーにのみ書き込みできるようにする
- 誰でも Cloud Storage から読み取りできるようにする
- アップロードされるファイルが画像であることを確認してください
- アップロードできる画像のサイズを最大 5 MB に制限する
これは、次のルールを使用して実装できます。
ストレージ.ルール
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;
}
}
}
14. Firebase Hosting を使用してアプリをデプロイする
Firebase は、アセットや Web アプリを提供するためのホスティング サービスを提供します。 Firebase CLI を使用してファイルを Firebase Hosting にデプロイできます。デプロイする前に、どのローカル ファイルをデプロイする必要があるかをfirebase.json
ファイルで指定する必要があります。このコードラボでは、このコードラボ中にファイルを提供するためにこの手順が必要だったので、これはすでに実行されています。ホスティング設定は、 hosting
属性で指定します。
ファイアベース.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
ディレクトリにデプロイすることを CLI に指示します ( "public": "./public"
)。
- コマンドラインがアプリのローカルの
angularfire-start
ディレクトリにアクセスしていることを確認してください。 - 次のコマンドを実行して、ファイルを Firebase プロジェクトにデプロイします。
ng deploy
次に、Firebase オプションを選択し、コマンド ラインのプロンプトに従います。
- コンソールには次の内容が表示されるはずです。
=== 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
- 独自の Firebase サブドメインの 2 つで Firebase Hosting を使用して、グローバル CDN で完全にホストされているウェブアプリにアクセスします。
-
https://<firebase-projectId>.firebaseapp.com
-
https://<firebase-projectId>.web.app
あるいは、コマンドラインでfirebase open hosting:site
を実行することもできます。
Firebase Hosting の仕組みの詳細については、ドキュメントを参照してください。
プロジェクトの Firebase コンソールの [ホスティング]セクションに移動すると、デプロイの履歴、アプリの前のバージョンにロールバックする機能、カスタム ドメインを設定するワークフローなど、役立つホスティング情報とツールが表示されます。
15. おめでとうございます!
Firebase を使用してリアルタイム チャット Web アプリケーションを構築しました。
カバーした内容
- Firebase認証
- クラウドファイアストア
- クラウド ストレージ用 Firebase SDK
- Firebase クラウド メッセージング
- Firebaseのパフォーマンスモニタリング
- Firebase ホスティング