Firebase-Web-Codelab

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie mit Firebase auf einfache Weise Webanwendungen erstellen, indem Sie einen Chat-Client mithilfe von Firebase-Produkten und -Diensten implementieren und bereitstellen.

3b1284f5144b54f6.png

Was Sie lernen werden

  • Synchronisieren Sie Daten mit Cloud Firestore und Cloud Storage for Firebase.
  • Authentifizieren Sie Ihre Benutzer mithilfe der Firebase-Authentifizierung.
  • Stellen Sie Ihre Web-App auf Firebase Hosting bereit.
  • Senden Sie Benachrichtigungen mit Firebase Cloud Messaging.
  • Sammeln Sie die Leistungsdaten Ihrer Web-App.

Was du brauchen wirst

  • Die IDE/Text-Editor Ihrer Wahl, wie WebStorm , Atom , Sublime oder VS Code
  • Der Paketmanager npm , der normalerweise mit Node.js geliefert wird
  • Ein Terminal/eine Konsole
  • Ein Browser Ihrer Wahl, z. B. Chrome
  • Der Beispielcode des Codelabs (Informationen zum Abrufen des Codes finden Sie im nächsten Schritt des Codelabs.)

2. Holen Sie sich den Beispielcode

Klonen Sie das GitHub-Repository des Codelabs über die Befehlszeile:

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

Wenn Sie Git nicht installiert haben, können Sie das Repository alternativ als ZIP-Datei herunterladen .

Importieren Sie die Starter-App

Öffnen oder importieren Sie mit Ihrer IDE das Verzeichnis 📁 web-start aus dem geklonten Repository. Dieses 📁 web-start Verzeichnis enthält den Startcode für das Codelab, das eine voll funktionsfähige Chat-Web-App sein wird.

3. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

  1. Melden Sie sich bei Firebase an.
  2. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen und nennen Sie Ihr Firebase-Projekt FriendlyChat . Merken Sie sich die Projekt-ID für Ihr Firebase-Projekt.
  3. Deaktivieren Sie Google Analytics für dieses Projekt aktivieren
  4. Klicken Sie auf Projekt erstellen .

Die Anwendung, die wir erstellen werden, verwendet Firebase-Produkte, die für Web-Apps verfügbar sind:

  • Firebase-Authentifizierung , damit sich Ihre Benutzer einfach bei Ihrer App anmelden können.
  • Cloud Firestore , um strukturierte Daten in der Cloud zu speichern und sofort benachrichtigt zu werden, wenn sich Daten ändern.
  • Cloud Storage für Firebase zum Speichern von Dateien in der Cloud.
  • Firebase Hosting zum Hosten und Bereitstellen Ihrer Assets.
  • Firebase Cloud Messaging zum Senden von Push-Benachrichtigungen und Anzeigen von Browser-Popup-Benachrichtigungen.
  • Firebase Performance Monitoring zum Erfassen von Benutzerleistungsdaten für Ihre App.

Einige dieser Produkte erfordern eine spezielle Konfiguration oder müssen über die Firebase-Konsole aktiviert werden.

Fügen Sie dem Projekt eine Firebase-Web-App hinzu

  1. Klicken Sie auf das Web-Symbol 58d6543a156e56f9.png um eine neue Firebase-Web-App zu erstellen.
  2. Registrieren Sie die App mit dem Spitznamen Friendly Chat und aktivieren Sie dann das Kontrollkästchen neben Auch Firebase-Hosting für diese App einrichten . Klicken Sie auf App registrieren .
  3. Im nächsten Schritt sehen Sie ein Konfigurationsobjekt. Kopieren Sie nur das JS-Objekt (nicht den umgebenden HTML-Code) in firebase-config.js

Registrieren Sie den Screenshot der Web-App

Aktivieren Sie die Google -Anmeldung für die Firebase-Authentifizierung

Damit sich Nutzer mit ihren Google-Konten bei der Web-App anmelden können, verwenden wir die Google -Anmeldemethode.

Sie müssen die Google -Anmeldung aktivieren:

  1. Suchen Sie in der Firebase-Konsole den Abschnitt „ Build “ im linken Bereich.
  2. Klicken Sie auf Authentifizierung und dann auf die Registerkarte Anmeldemethode (oder klicken Sie hier , um direkt dorthin zu gelangen).
  3. Aktivieren Sie den Google -Anmeldeanbieter und klicken Sie dann auf Speichern .
  4. Legen Sie den öffentlich zugänglichen Namen Ihrer App auf Friendly Chat fest und wählen Sie eine Projekt-Support-E-Mail aus dem Dropdown-Menü aus.
  5. Konfigurieren Sie Ihren OAuth-Zustimmungsbildschirm in der Google Cloud Console und fügen Sie ein Logo hinzu:

d89fb3873b5d36ae.png

Aktivieren Sie Cloud Firestore

Die Web-App verwendet Cloud Firestore , um Chat-Nachrichten zu speichern und neue Chat-Nachrichten zu empfangen.

Sie müssen Cloud Firestore aktivieren:

  1. Klicken Sie im Abschnitt Erstellen der Firebase-Konsole auf Firestore-Datenbank .
  2. Klicken Sie im Cloud Firestore-Bereich auf Datenbank erstellen .

729991a081e7cd5.png

  1. Wählen Sie die Option Im Testmodus starten und klicken Sie dann auf Weiter , nachdem Sie den Haftungsausschluss zu den Sicherheitsregeln gelesen haben.

Der Testmodus stellt sicher, dass wir während der Entwicklung frei in die Datenbank schreiben können. Wir werden unsere Datenbank später in diesem Codelab sicherer machen.

77e4986cbeaf9dee.png

  1. Legen Sie den Speicherort fest, an dem Ihre Cloud Firestore-Daten gespeichert werden. Sie können dies als Standard belassen oder eine Region in Ihrer Nähe auswählen. Klicken Sie auf Fertig , um Firestore bereitzustellen.

9f2bb0d4e7ca49c7.png

Cloud-Speicher aktivieren

Die Web-App verwendet Cloud Storage for Firebase, um Bilder zu speichern, hochzuladen und zu teilen.

Sie müssen Cloud Storage aktivieren:

  1. Klicken Sie im Abschnitt Erstellen der Firebase-Konsole auf Speicher .
  2. Wenn es keine Schaltfläche „Erste Schritte“ gibt, bedeutet dies, dass der Cloud-Speicher bereits aktiviert ist und Sie die folgenden Schritte nicht ausführen müssen.
  3. Klicken Sie auf Erste Schritte .
  4. Lesen Sie den Haftungsausschluss zu Sicherheitsregeln für Ihr Firebase-Projekt und klicken Sie dann auf Weiter .

Mit den Standardsicherheitsregeln kann jeder authentifizierte Benutzer alles in Cloud Storage schreiben. Wir werden unseren Speicher später in diesem Codelab sicherer machen.

62f1afdcd1260127.png

  1. Der Cloud Storage-Standort ist mit derselben Region vorausgewählt, die Sie für Ihre Cloud Firestore-Datenbank ausgewählt haben. Klicken Sie auf Fertig , um die Einrichtung abzuschließen.

1d7f49ebaddb32fc.png

4. Installieren Sie die Firebase-Befehlszeilenschnittstelle

Mit der Firebase-Befehlszeilenschnittstelle (CLI) können Sie Firebase Hosting verwenden, um Ihre Web-App lokal bereitzustellen und Ihre Web-App in Ihrem Firebase-Projekt bereitzustellen.

  1. Installieren Sie die CLI, indem Sie den folgenden npm-Befehl ausführen:
npm -g install firebase-tools
  1. Überprüfen Sie, ob die CLI korrekt installiert wurde, indem Sie den folgenden Befehl ausführen:
firebase --version

Stellen Sie sicher, dass die Version der Firebase CLI v4.1.0 oder höher ist.

  1. Autorisieren Sie die Firebase-CLI, indem Sie den folgenden Befehl ausführen:
firebase login

Wir haben die Web-App-Vorlage eingerichtet, um die Konfiguration Ihrer App für Firebase-Hosting aus dem lokalen Verzeichnis Ihrer App (dem Repository, das Sie zuvor im Codelab geklont haben) abzurufen. Aber um die Konfiguration abzurufen, müssen wir Ihre App mit Ihrem Firebase-Projekt verknüpfen.

  1. Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale web-start Ihrer App zugreift.
  2. Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:
firebase use --add
  1. Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt dann einen Alias.

Ein Alias ​​ist nützlich, wenn Sie mehrere Umgebungen haben (Produktion, Staging usw.). Für dieses Codelab verwenden wir jedoch einfach den Alias default .

  1. Befolgen Sie die verbleibenden Anweisungen in Ihrer Befehlszeile.

5. Führen Sie die Starter-App lokal aus

Nachdem Sie Ihr Projekt importiert und konfiguriert haben, können Sie die Web-App zum ersten Mal ausführen.

  1. Führen Sie in einer Konsole aus dem web-start Verzeichnis den folgenden Firebase-CLI-Befehl aus:
firebase serve --only hosting
  1. Ihre Befehlszeile sollte die folgende Antwort anzeigen:
✔  hosting: Local server: http://localhost:5000

Wir verwenden den Firebase Hosting- Emulator, um unsere App lokal bereitzustellen. Die Web-App sollte jetzt unter http://localhost:5000 verfügbar sein. Alle Dateien, die sich unter dem public Unterverzeichnis befinden, werden bereitgestellt.

  1. Öffnen Sie in Ihrem Browser Ihre App unter http://localhost:5000 .

Sie sollten die Benutzeroberfläche Ihrer FriendlyChat-App sehen, die (noch!) Nicht funktioniert:

4c23f9475228cef4.png

Die App kann im Moment nichts tun, aber mit Ihrer Hilfe wird sie es bald tun! Wir haben bisher nur die Benutzeroberfläche für Sie ausgelegt.

Lassen Sie uns jetzt einen Echtzeit-Chat erstellen!

6. Importieren und konfigurieren Sie Firebase

Importieren Sie das Firebase-SDK

Wir müssen das Firebase SDK in die App importieren. Wie in unserer Dokumentation beschrieben, gibt es mehrere Möglichkeiten, dies zu tun. Beispielsweise können Sie die Bibliothek aus unserem CDN importieren. Oder Sie können es lokal mit npm installieren und es dann in Ihre App packen, wenn Sie Browserify verwenden.

Wir werden das Firebase SDK von npm erhalten und Webpack verwenden, um unseren Code zu bündeln. Wir tun dies, damit Webpack unnötigen Code entfernen und die Größe unseres JS-Pakets klein halten kann, um sicherzustellen, dass unsere App so schnell wie möglich geladen wird. Für dieses Codelab haben wir bereits eine Datei web-start/package.json erstellt, die das Firebase SDK als Abhängigkeit enthält, und die erforderlichen Funktionen oben in web-start/src/index.js .

Paket.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';

Während dieses Codelabs werden wir Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging und Performance Monitoring verwenden, also importieren wir alle ihre Bibliotheken. Stellen Sie in Ihren zukünftigen Apps sicher, dass Sie nur die Teile von Firebase importieren, die Sie benötigen, um die Ladezeit Ihrer App zu verkürzen.

Installieren Sie das Firebase SDK und starten Sie Ihren Webpack-Build

Wir müssen ein paar Befehle ausführen, um den Build unserer App zum Laufen zu bringen.

  1. Öffnen Sie ein neues Terminalfenster
  2. Stellen Sie sicher, dass Sie sich im web-start Verzeichnis befinden
  3. Führen Sie npm install aus, um das Firebase SDK herunterzuladen
  4. Führen Sie npm run start aus, um Webpack zu starten. Webpack wird nun unseren Kurscode für den Rest des Codelabs kontinuierlich neu erstellen.

Konfigurieren Sie Firebase

Wir müssen auch das Firebase SDK konfigurieren, um ihm mitzuteilen, welches Firebase-Projekt wir verwenden.

  1. Gehen Sie in der Firebase-Konsole zu Ihren Projekteinstellungen
  2. Wählen Sie auf der Karte „Ihre Apps“ den Spitznamen der App aus, für die Sie ein Konfigurationsobjekt benötigen.
  3. Wählen Sie „Config“ aus dem Snippet-Bereich des Firebase SDK aus.
  4. Kopieren Sie das Konfigurationsobjekt-Snippet und fügen Sie es dann zu 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",
};

Gehen Sie nun zum Ende von web-start/src/index.js und initialisieren Sie Firebase:

index.js

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

7. Richten Sie die Benutzeranmeldung ein

Das Firebase SDK sollte jetzt einsatzbereit sein, da es in index.js importiert und initialisiert wurde. Wir werden jetzt die Benutzeranmeldung mit Firebase Authentication implementieren.

Authentifizieren Sie Ihre Benutzer mit Google Sign-In

Wenn ein Benutzer in der App auf die Schaltfläche „ Mit Google anmelden“ klickt, wird die signIn ausgelöst. (Wir haben das bereits für Sie eingerichtet!) Für dieses Codelab möchten wir Firebase autorisieren, Google als Identitätsanbieter zu verwenden. Wir verwenden ein Popup, aber Firebase bietet mehrere andere Methoden .

  1. Öffnen Sie im Webstart web-start Verzeichnis im Unterverzeichnis src/ index.js .
  2. Suchen Sie die Funktion signIn .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

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);
}

Die signOut wird ausgelöst, wenn der Benutzer auf die Schaltfläche Abmelden klickt.

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktion signOutUser .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

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

Verfolgen Sie den Authentifizierungsstatus

Um unsere Benutzeroberfläche entsprechend zu aktualisieren, benötigen wir eine Möglichkeit, um zu überprüfen, ob der Benutzer an- oder abgemeldet ist. Mit der Firebase-Authentifizierung können Sie einen Beobachter für den Authentifizierungsstatus registrieren, der jedes Mal ausgelöst wird, wenn sich der Authentifizierungsstatus ändert.

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktion initFirebaseAuth .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

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

Der obige Code registriert die Funktion authStateObserver als Beobachter des Authentifizierungszustands. Es wird jedes Mal ausgelöst, wenn sich der Authentifizierungsstatus ändert (wenn sich der Benutzer an- oder abmeldet). An diesem Punkt aktualisieren wir die Benutzeroberfläche, um die Anmeldeschaltfläche, die Abmeldeschaltfläche, das Profilbild des angemeldeten Benutzers usw. anzuzeigen oder auszublenden. Alle diese UI-Teile wurden bereits implementiert.

Zeigt die Informationen des angemeldeten Benutzers an

Wir möchten das Profilbild und den Benutzernamen des angemeldeten Benutzers in der oberen Leiste unserer App anzeigen. In Firebase sind die Daten des angemeldeten Benutzers immer im Objekt currentUser “ verfügbar. Zuvor haben wir die Funktion authStateObserver so eingerichtet, dass sie ausgelöst wird, wenn sich der Benutzer anmeldet, damit unsere Benutzeroberfläche entsprechend aktualisiert wird. Es ruft getProfilePicUrl und getUserName , wenn es ausgelöst wird.

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktionen getProfilePicUrl und getUserName .
  3. Ersetzen Sie beide Funktionen durch den folgenden Code.

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;
}

Wir zeigen eine Fehlermeldung an, wenn der Benutzer versucht, Nachrichten zu senden, obwohl der Benutzer nicht angemeldet ist. (Sie können es aber versuchen!) Wir müssen also feststellen, ob der Benutzer tatsächlich angemeldet ist.

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktion isUserSignedIn .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

index.js

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

Testen Sie die Anmeldung bei der App

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile aus, um mit der Bereitstellung der App von http://localhost:5000 zu beginnen, und öffnen Sie sie dann in Ihrem Browser.
  2. Melden Sie sich mit der Anmeldeschaltfläche und Ihrem Google-Konto bei der App an. Wenn die Fehlermeldung auth/operation-not-allowed angezeigt wird, vergewissern Sie sich, dass Sie Google Sign-in als Authentifizierungsanbieter in der Firebase-Konsole aktiviert haben.
  3. Nach der Anmeldung sollten Ihr Profilbild und Ihr Benutzername angezeigt werden: c7401b3d44d0d78b.png

8. Schreiben Sie Nachrichten an Cloud Firestore

In diesem Abschnitt schreiben wir einige Daten in Cloud Firestore, damit wir die Benutzeroberfläche der App füllen können. Dies kann manuell mit der Firebase-Konsole erfolgen, wir führen dies jedoch in der App selbst durch, um einen einfachen Cloud Firestore-Schreibvorgang zu demonstrieren.

Datenmodell

Cloud Firestore-Daten werden in Sammlungen, Dokumente, Felder und Untersammlungen aufgeteilt. Wir speichern jede Nachricht des Chats als Dokument in einer Sammlung der obersten Ebene namens messages .

688d7bc5fb662b57.png

Fügen Sie Nachrichten zu Cloud Firestore hinzu

Um die von Benutzern geschriebenen Chatnachrichten zu speichern, verwenden wir Cloud Firestore .

In diesem Abschnitt fügen Sie die Funktionalität hinzu, mit der Benutzer neue Nachrichten in Ihre Datenbank schreiben können. Ein Benutzer, der auf die Schaltfläche SENDEN klickt, löst das unten stehende Code-Snippet aus. Es fügt ein Nachrichtenobjekt mit den Inhalten der Nachrichtenfelder zu Ihrer Cloud Firestore-Instanz in der messages hinzu. Die Methode add() fügt der Sammlung ein neues Dokument mit einer automatisch generierten ID hinzu.

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktion saveMessage .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

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);
  }
}

Testen Sie das Senden von Nachrichten

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile aus, um mit der Bereitstellung der App von http://localhost:5000 zu beginnen, und öffnen Sie sie dann in Ihrem Browser.
  2. Geben Sie nach der Anmeldung eine Nachricht wie „Hey there!“ ein und klicken Sie dann auf SENDEN . Dadurch wird die Nachricht in Cloud Firestore geschrieben. Sie werden die Daten jedoch noch nicht in Ihrer eigentlichen Webanwendung sehen, da wir das Abrufen der Daten noch implementieren müssen (der nächste Abschnitt des Codelabs).
  3. Sie können die neu hinzugefügte Nachricht in Ihrer Firebase-Konsole sehen. Öffnen Sie Ihre Firebase-Konsole. Klicken Sie im Abschnitt Erstellen auf Firestore Database (oder klicken Sie hier und wählen Sie Ihr Projekt aus) und Sie sollten die Nachrichtensammlung mit Ihrer neu hinzugefügten Nachricht sehen:

6812efe7da395692.png

9. Nachrichten lesen

Nachrichten synchronisieren

Um Nachrichten in der App zu lesen, müssen wir Listener hinzufügen, die ausgelöst werden, wenn sich Daten ändern, und dann ein UI-Element erstellen, das neue Nachrichten anzeigt.

Wir fügen Code hinzu, der auf neu hinzugefügte Nachrichten von der App wartet. In diesem Code registrieren wir den Listener, der auf Änderungen an den Daten wartet. Wir zeigen nur die letzten 12 Nachrichten des Chats an, um zu vermeiden, dass beim Laden ein sehr langer Verlauf angezeigt wird.

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktion loadMessages .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

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);
      }
    });
  });
}

Um Nachrichten in der Datenbank abzuhören, erstellen wir eine Abfrage für eine Sammlung, indem wir die collection verwenden, um anzugeben, in welcher Sammlung sich die Daten befinden, die wir abhören möchten. Im obigen Code hören wir auf die Änderungen in den messages Sammlung, in der die Chatnachrichten gespeichert werden. Wir wenden auch ein Limit an, indem wir nur die letzten 12 Nachrichten mit .limit(12) und die Nachrichten mit orderBy('timestamp', 'desc') nach Datum ordnen, um die 12 neuesten Nachrichten zu erhalten.

Die onSnapshot Funktion verwendet als ersten Parameter eine Abfrage und als zweiten eine Callback-Funktion. Die Callback-Funktion wird ausgelöst, wenn Änderungen an Dokumenten vorliegen, die der Abfrage entsprechen. Dies kann der Fall sein, wenn eine Nachricht gelöscht, geändert oder hinzugefügt wird. Weitere Informationen hierzu finden Sie in der Cloud Firestore-Dokumentation .

Testen Sie die Synchronisierung von Nachrichten

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile aus, um mit der Bereitstellung der App von http://localhost:5000 zu beginnen, und öffnen Sie sie dann in Ihrem Browser.
  2. Die Nachrichten, die Sie zuvor in der Datenbank erstellt haben, sollten in der FriendlyChat-Benutzeroberfläche angezeigt werden (siehe unten). Fühlen Sie sich frei, neue Nachrichten zu schreiben; Sie sollten sofort erscheinen.
  3. (Optional) Sie können versuchen, Nachrichten manuell direkt im Abschnitt „ Datenbank “ der Firebase-Konsole zu löschen, zu ändern oder neue hinzuzufügen. Alle Änderungen sollten sich in der Benutzeroberfläche widerspiegeln.

Herzliche Glückwünsche! Sie lesen Cloud Firestore-Dokumente in Ihrer App!

2168dec79b573d07.png

10. Senden Sie Bilder

Wir werden jetzt eine Funktion hinzufügen, die Bilder teilt.

Während Cloud Firestore gut zum Speichern strukturierter Daten geeignet ist, eignet sich Cloud Storage besser zum Speichern von Dateien. Cloud Storage for Firebase ist ein Datei-/Blob-Speicherdienst und wir verwenden ihn, um alle Bilder zu speichern, die ein Benutzer mit unserer App teilt.

Speichern Sie Bilder in Cloud Storage

Für dieses Codelab haben wir bereits eine Schaltfläche für Sie hinzugefügt, die einen Dateiauswahldialog auslöst. Nach Auswahl einer Datei wird die Funktion saveImageMessage aufgerufen und Sie können eine Referenz auf die ausgewählte Datei erhalten. Die Funktion saveImageMessage Folgendes:

  1. Erstellt eine „Platzhalter“-Chat-Nachricht im Chat-Feed, sodass Benutzer eine „Laden“-Animation sehen, während wir das Bild hochladen.
  2. Lädt die Bilddatei in Cloud Storage in diesen Pfad hoch: /<uid>/<messageId>/<file_name>
  3. Generiert eine öffentlich lesbare URL für die Bilddatei.
  4. Aktualisiert die Chat-Nachricht mit der URL der neu hochgeladenen Bilddatei anstelle des vorübergehend geladenen Bildes.

Jetzt fügen Sie die Funktion zum Senden eines Bildes hinzu:

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktion saveImageMessage .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

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);
  }
}

Testen Sie das Senden von Bildern

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile aus, um mit der Bereitstellung der App von http://localhost:5000 zu beginnen, und öffnen Sie sie dann in Ihrem Browser.
  2. Klicken Sie nach der Anmeldung auf die Schaltfläche zum Hochladen von Bildern 13734cb66773e5a3.png und wählen Sie mit der Dateiauswahl eine Bilddatei aus. Wenn Sie nach einem Bild suchen, können Sie dieses schöne Bild einer Kaffeetasse verwenden.
  3. Auf der Benutzeroberfläche der App sollte eine neue Nachricht mit Ihrem ausgewählten Bild erscheinen: 3b1284f5144b54f6.png

Wenn Sie versuchen, ein Bild hinzuzufügen, ohne angemeldet zu sein, sollte eine Toast-Benachrichtigung angezeigt werden, die Sie darüber informiert, dass Sie sich anmelden müssen, um Bilder hinzuzufügen.

11. Benachrichtigungen anzeigen

Wir werden jetzt Unterstützung für Browserbenachrichtigungen hinzufügen. Die App benachrichtigt Benutzer, wenn neue Nachrichten im Chat gepostet werden. Firebase Cloud Messaging (FCM) ist eine plattformübergreifende Messaging-Lösung, mit der Sie Nachrichten und Benachrichtigungen zuverlässig und kostenlos übermitteln können.

Fügen Sie den FCM-Dienstmitarbeiter hinzu

Die Web-App benötigt einen Servicemitarbeiter , der Webbenachrichtigungen empfängt und anzeigt.

  1. Öffnen Sie im Verzeichnis web-start im Verzeichnis src die firebase-messaging-sw.js .
  2. Fügen Sie dieser Datei den folgenden Inhalt hinzu.

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');

Der Servicemitarbeiter muss lediglich das Firebase Cloud Messaging SDK laden und initialisieren, das sich um die Anzeige von Benachrichtigungen kümmert.

Rufen Sie FCM-Gerätetoken ab

Wenn Benachrichtigungen auf einem Gerät oder Browser aktiviert wurden, erhalten Sie ein Geräte-Token . Dieses Geräte-Token verwenden wir, um eine Benachrichtigung an ein bestimmtes Gerät oder einen bestimmten Browser zu senden.

Wenn sich der Benutzer anmeldet, rufen wir die saveMessagingDeviceToken -Funktion auf. Dort erhalten wir das FCM-Gerätetoken aus dem Browser und speichern es in Cloud Firestore.

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktion saveMessagingDeviceToken .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

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);
  };
}

Dieser Code funktioniert jedoch zunächst nicht. Damit Ihre App das Gerätetoken abrufen kann, muss der Benutzer Ihrer App die Berechtigung erteilen, Benachrichtigungen anzuzeigen (nächster Schritt des Codelabs).

Fordern Sie Berechtigungen zum Anzeigen von Benachrichtigungen an

Wenn der Benutzer Ihrer App noch keine Berechtigung zum Anzeigen von Benachrichtigungen erteilt hat, erhalten Sie kein Gerätetoken. In diesem Fall rufen wir die Methode firebase.messaging().requestPermission() auf, die einen Browserdialog anzeigt, in dem Sie nach dieser Berechtigung gefragt werden ( in unterstützten Browsern ).

8b9d0c66dc36153d.png

  1. Gehen Sie zurück zur Datei src/index.js .
  2. Suchen Sie die Funktion requestNotificationsPermissions .
  3. Ersetzen Sie die gesamte Funktion durch den folgenden Code.

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.');
  }
}

Holen Sie sich Ihr Geräte-Token

  1. Wenn Ihre App noch bereitgestellt wird, aktualisieren Sie Ihre App im Browser. Führen Sie andernfalls firebase serve --only hosting in der Befehlszeile aus, um mit der Bereitstellung der App von http://localhost:5000 zu beginnen, und öffnen Sie sie dann in Ihrem Browser.
  2. Nach der Anmeldung sollte der Berechtigungsdialog für Benachrichtigungen erscheinen: bd3454e6dbfb6723.png
  3. Klicken Sie auf Zulassen .
  4. Öffnen Sie die JavaScript-Konsole Ihres Browsers. Sie sollten die folgende Meldung sehen: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Kopieren Sie Ihr Gerätetoken. Sie benötigen es für die nächste Stufe des Codelabs.

Senden Sie eine Benachrichtigung an Ihr Gerät

Jetzt, da Sie Ihr Geräte-Token haben, können Sie eine Benachrichtigung senden.

  1. Öffnen Sie die Registerkarte Cloud Messaging der Firebase-Konsole .
  2. Klicken Sie auf „Neue Benachrichtigung“
  3. Geben Sie einen Benachrichtigungstitel und einen Benachrichtigungstext ein.
  4. Klicken Sie auf der rechten Seite des Bildschirms auf "Testnachricht senden".
  5. Geben Sie das Geräte-Token ein, das Sie aus der JavaScript-Konsole Ihres Browsers kopiert haben, und klicken Sie dann auf das Pluszeichen ("+")
  6. Klicken Sie auf "Testen"

Wenn sich Ihre App im Vordergrund befindet, sehen Sie die Benachrichtigung in der JavaScript-Konsole.

Wenn Ihre App im Hintergrund läuft, sollte eine Benachrichtigung in Ihrem Browser erscheinen, wie in diesem Beispiel:

de79e8638a45864c.png

12. Cloud Firestore-Sicherheitsregeln

Datenbanksicherheitsregeln anzeigen

Cloud Firestore verwendet eine spezifische Regelsprache , um Zugriffsrechte, Sicherheit und Datenvalidierungen zu definieren.

Beim Einrichten des Firebase-Projekts zu Beginn dieses Codelabs haben wir uns für die Standardsicherheitsregeln „Testmodus“ entschieden, damit wir den Zugriff auf den Datenspeicher nicht einschränken. In der Firebase-Konsole können Sie diese Regeln auf der Registerkarte " Regeln " im Abschnitt " Datenbank " anzeigen und ändern.

Jetzt sollten Sie die Standardregeln sehen, die den Zugriff auf den Datenspeicher nicht einschränken. Das bedeutet, dass jeder Benutzer alle Sammlungen in Ihrem Datenspeicher lesen und schreiben kann.

rules_version = '2';

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

Wir werden die Regeln aktualisieren, um Dinge einzuschränken, indem wir die folgenden Regeln verwenden:

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;
    }
  }
}

Aktualisieren Sie die Datenbanksicherheitsregeln

Es gibt zwei Möglichkeiten, Ihre Datenbanksicherheitsregeln zu bearbeiten, entweder in der Firebase-Konsole oder über eine lokale Regeldatei, die über die Firebase-CLI bereitgestellt wird.

So aktualisieren Sie Sicherheitsregeln in der Firebase-Konsole:

  1. Gehen Sie im linken Bereich zum Abschnitt Datenbank und klicken Sie dann auf die Registerkarte Regeln .
  2. Ersetzen Sie die bereits in der Konsole vorhandenen Standardregeln durch die oben gezeigten Regeln.
  3. Klicken Sie auf Veröffentlichen .

So aktualisieren Sie Sicherheitsregeln aus einer lokalen Datei:

  1. Öffnen Sie im web-start Verzeichnis firestore.rules .
  2. Ersetzen Sie die bereits in der Datei enthaltenen Standardregeln durch die oben gezeigten Regeln.
  3. Öffnen Sie im Verzeichnis web-start firebase.json .
  4. Fügen Sie das Attribut firestore.rules hinzu, das auf firestore.rules verweist, wie unten gezeigt. (Das hosting Attribut sollte bereits in der Datei enthalten sein.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Stellen Sie die Sicherheitsregeln mithilfe der Firebase-CLI bereit, indem Sie den folgenden Befehl ausführen:
firebase deploy --only firestore
  1. Ihre Befehlszeile sollte die folgende Antwort anzeigen:
=== 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

13. Cloud Storage-Sicherheitsregeln

Cloud Storage-Sicherheitsregeln anzeigen

Cloud Storage for Firebase verwendet eine bestimmte Regelsprache , um Zugriffsrechte, Sicherheit und Datenvalidierungen zu definieren.

Beim Einrichten des Firebase-Projekts zu Beginn dieses Codelabs haben wir uns für die Verwendung der standardmäßigen Cloud Storage-Sicherheitsregel entschieden, die nur authentifizierten Benutzern die Verwendung von Cloud Storage erlaubt. In der Firebase-Konsole können Sie auf der Registerkarte „ Regeln “ im Abschnitt „ Speicher “ Regeln anzeigen und ändern. Sie sollten die Standardregel sehen, die es jedem angemeldeten Benutzer ermöglicht, alle Dateien in Ihrem Speicher-Bucket zu lesen und zu schreiben.

rules_version = '2';

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

Wir werden die Regeln aktualisieren, um Folgendes zu tun:

  • Erlauben Sie jedem Benutzer, nur in seine eigenen spezifischen Ordner zu schreiben
  • Erlauben Sie jedem, aus Cloud Storage zu lesen
  • Stellen Sie sicher, dass es sich bei den hochgeladenen Dateien um Bilder handelt
  • Beschränken Sie die Größe der hochzuladenden Bilder auf maximal 5 MB

Dies kann mit folgenden Regeln umgesetzt werden:

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;
    }
  }
}

Aktualisieren Sie die Cloud Storage-Sicherheitsregeln

Es gibt zwei Möglichkeiten, Ihre Speichersicherheitsregeln zu bearbeiten: entweder in der Firebase-Konsole oder über eine lokale Regeldatei, die über die Firebase-Befehlszeilenschnittstelle bereitgestellt wird.

So aktualisieren Sie Sicherheitsregeln in der Firebase-Konsole:

  1. Gehen Sie im linken Bereich zum Abschnitt Speicher und klicken Sie dann auf die Registerkarte Regeln .
  2. Ersetzen Sie die bereits in der Konsole vorhandene Standardregel durch die oben gezeigten Regeln.
  3. Klicken Sie auf Veröffentlichen .

So aktualisieren Sie Sicherheitsregeln aus einer lokalen Datei:

  1. Öffnen Sie im Webstart web-start Verzeichnis storage.rules .
  2. Ersetzen Sie die bereits in der Datei enthaltenen Standardregeln durch die oben gezeigten Regeln.
  3. Öffnen Sie im Verzeichnis web-start firebase.json .
  4. Fügen Sie das Attribut „ storage.rules “ hinzu, das auf die Datei „ storage.rules “ verweist, wie unten gezeigt. (Das hosting und das database sollten bereits in der Datei enthalten sein.)

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. Stellen Sie die Sicherheitsregeln mithilfe der Firebase-CLI bereit, indem Sie den folgenden Befehl ausführen:
firebase deploy --only storage
  1. Ihre Befehlszeile sollte die folgende Antwort anzeigen:
=== 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

14. Sammeln Sie Leistungsdaten

Sie können das Leistungsüberwachungs-SDK verwenden, um reale Leistungsdaten von Ihrer App zu sammeln und diese Daten dann in der Firebase-Konsole zu überprüfen und zu analysieren. Die Leistungsüberwachung hilft Ihnen zu verstehen, wo und wann die Leistung Ihrer App verbessert werden kann, damit Sie diese Informationen verwenden können, um Leistungsprobleme zu beheben.

Es gibt verschiedene Möglichkeiten zur Integration mit dem Firebase Performance Monitoring JavaScript SDK. In diesem Codelab haben wir die Leistungsüberwachung von Hosting-URLs aktiviert. Weitere Methoden zum Aktivieren des SDK finden Sie in der Dokumentation .

Automatische Spuren

Da wir getPerformance bereits am Anfang von web-start/src/index.js , müssen wir nur eine Zeile hinzufügen, um Performance Monitoring anzuweisen, automatisch Seitenlade- und Netzwerkanforderungsmetriken für Sie zu sammeln, wenn Benutzer Ihre bereitgestellte Website besuchen!

  1. Fügen Sie in web-start/src/index.js die folgende Zeile unter dem vorhandenen TODO hinzu, um die Leistungsüberwachung zu initialisieren.

index.js

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

Erste Eingangsverzögerung messen (optional)

Die Verzögerung bei der ersten Eingabe ist nützlich, da der Browser, der auf eine Benutzerinteraktion reagiert, Ihren Benutzern einen ersten Eindruck von der Reaktionsfähigkeit Ihrer App gibt.

Die Verzögerung bei der ersten Eingabe beginnt, wenn der Benutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. auf eine Schaltfläche oder einen Hyperlink klickt. Es stoppt sofort, nachdem der Browser auf die Eingabe reagieren kann, was bedeutet, dass der Browser nicht damit beschäftigt ist, den Inhalt Ihrer Seite zu laden oder zu analysieren.

Wenn Sie die erste Eingangsverzögerung messen möchten, müssen Sie den folgenden Code direkt einfügen.

  1. Öffnen public/index.html .
  2. Entkommentieren Sie das script -Tag in der folgenden Zeile.

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>

Um mehr über das erste Input-Delay-Polyfill zu erfahren, werfen Sie einen Blick in die Dokumentation .

Leistungsdaten anzeigen

Da Sie Ihre Website noch nicht bereitgestellt haben (Sie werden sie im nächsten Schritt bereitstellen), ist hier ein Screenshot mit den Messwerten zur Seitenladeleistung, die Sie in der Firebase-Konsole innerhalb von 30 Minuten nach der Interaktion der Benutzer mit Ihrer bereitgestellten Website sehen werden :

29389131150f33d7.png

Wenn Sie das Leistungsüberwachungs-SDK in Ihre App integrieren, müssen Sie keinen weiteren Code schreiben, bevor Ihre App beginnt, automatisch mehrere kritische Aspekte der Leistung zu überwachen. Bei Web-Apps protokolliert das SDK Aspekte wie First Contentful Paint, die Möglichkeit für Benutzer, mit Ihrer App zu interagieren, und mehr.

Sie können auch benutzerdefinierte Traces, Metriken und Attribute einrichten, um bestimmte Aspekte Ihrer App zu messen. Besuchen Sie die Dokumentation, um mehr über benutzerdefinierte Ablaufverfolgungen und Metriken sowie benutzerdefinierte Attribute zu erfahren.

15. Stellen Sie Ihre App mit Firebase Hosting bereit

Firebase bietet einen Hosting-Service zum Bereitstellen Ihrer Assets und Web-Apps. Sie können Ihre Dateien mithilfe der Firebase-Befehlszeilenschnittstelle auf Firebase Hosting bereitstellen. Vor der Bereitstellung müssen Sie in Ihrer firebase.json -Datei angeben, welche lokalen Dateien bereitgestellt werden sollen. Für dieses Codelab haben wir dies bereits für Sie erledigt, da dieser Schritt erforderlich war, um unsere Dateien während dieses Codelabs bereitzustellen. Die Hosting-Einstellungen werden unter dem hosting Attribut angegeben:

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"
  }
}

Diese Einstellungen teilen der CLI mit, dass wir alle Dateien im Verzeichnis ./public bereitstellen möchten ( "public": "./public" ).

  1. Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale web-start Ihrer App zugreift.
  2. Stellen Sie Ihre Dateien in Ihrem Firebase-Projekt bereit, indem Sie den folgenden Befehl ausführen:
firebase deploy --except functions
  1. Die Konsole sollte Folgendes anzeigen:
=== 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. Besuchen Sie Ihre Web-App, die jetzt vollständig auf einem globalen CDN mit Firebase-Hosting in zwei Ihrer eigenen Firebase-Subdomains gehostet wird:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

Alternativ können Sie firebase open hosting:site in der Befehlszeile ausführen.

Besuchen Sie die Dokumentation, um mehr über die Funktionsweise von Firebase Hosting zu erfahren.

Gehen Sie zum Abschnitt Hosting der Firebase-Konsole Ihres Projekts, um nützliche Hosting-Informationen und Tools anzuzeigen, einschließlich des Verlaufs Ihrer Bereitstellungen, der Funktion zum Zurücksetzen auf frühere Versionen Ihrer App und des Workflows zum Einrichten einer benutzerdefinierten Domäne.

16. Herzlichen Glückwunsch!

Sie haben mit Firebase eine Echtzeit-Chat-Webanwendung erstellt!

Was wir abgedeckt haben

  • Firebase-Authentifizierung
  • Cloud-Firestore
  • Firebase SDK für Cloud-Speicher
  • Firebase Cloud Messaging
  • Firebase-Leistungsüberwachung
  • Firebase-Hosting

Nächste Schritte

Learn more

,

1. Overview

In this codelab, you'll learn how to use Firebase to easily create web applications by implementing and deploying a chat client using Firebase products and services.

3b1284f5144b54f6.png

What you'll learn

  • Sync data using Cloud Firestore and Cloud Storage for Firebase.
  • Authenticate your users using Firebase Authentication.
  • Deploy your web app on Firebase Hosting.
  • Send notifications with Firebase Cloud Messaging.
  • Collect your web app's performance data.

What you'll need

  • The IDE/text editor of your choice, such as WebStorm , Atom , Sublime , or VS Code
  • The package manager npm , which typically comes with Node.js
  • A terminal/console
  • A browser of your choice, such as Chrome
  • The codelab's sample code (See the next step of the codelab for how to get the code.)

2. Get the sample code

Clone the codelab's GitHub repository from the command line:

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

Alternatively, if you do not have git installed, you can download the repository as a ZIP file .

Import the starter app

Using your IDE, open or import the 📁 web-start directory from the cloned repository. This 📁 web-start directory contains the starting code for the codelab, which will be a fully functional chat web app.

3. Create and set up a Firebase project

Create a Firebase project

  1. Sign in to Firebase .
  2. In the Firebase console, click Add Project , and then name your Firebase project FriendlyChat . Remember the project ID for your Firebase project.
  3. Uncheck Enable Google Analytics for this project
  4. Click Create Project .

The application that we're going to build uses Firebase products that are available for web apps:

  • Firebase Authentication to easily allow your users to sign into your app.
  • Cloud Firestore to save structured data on the cloud and get instant notification when data changes.
  • Cloud Storage for Firebase to save files in the cloud.
  • Firebase Hosting to host and serve your assets.
  • Firebase Cloud Messaging to send push notifications and display browser popup notifications.
  • Firebase Performance Monitoring to collect user performance data for your app.

Some of these products need special configuration or need to be enabled using the Firebase console.

Add a Firebase web app to the project

  1. Click the web icon 58d6543a156e56f9.png to create a new Firebase web app.
  2. Register the app with the nickname Friendly Chat , then check the box next to Also set up Firebase Hosting for this app . Click Register app .
  3. On the next step, you'll see a configuration object. Copy just the JS object (not the surrounding HTML) into firebase-config.js

Register web app screenshot

Enable Google sign-in for Firebase Authentication

To allow users to sign in to the web app with their Google accounts, we'll use the Google sign-in method.

You'll need to enable Google sign-in:

  1. In the Firebase console, locate the Build section in the left panel.
  2. Click Authentication , then click the Sign-in method tab (or click here to go directly there).
  3. Enable the Google sign-in provider, then click Save .
  4. Set the public-facing name of your app to Friendly Chat and choose a Project support email from the dropdown menu.
  5. Configure your OAuth consent screen in the Google Cloud Console and add a logo:

d89fb3873b5d36ae.png

Enable Cloud Firestore

The web app uses Cloud Firestore to save chat messages and receive new chat messages.

You'll need to enable Cloud Firestore:

  1. In the Firebase console's Build section, click Firestore Database .
  2. Click Create database in the Cloud Firestore pane.

729991a081e7cd5.png

  1. Select the Start in test mode option, then click Next after reading the disclaimer about the security rules.

Test mode ensures that we can freely write to the database during development. We'll make our database more secure later on in this codelab.

77e4986cbeaf9dee.png

  1. Set the location where your Cloud Firestore data is stored. You can leave this as the default or choose a region close to you. Click Done to provision Firestore.

9f2bb0d4e7ca49c7.png

Enable Cloud Storage

The web app uses Cloud Storage for Firebase to store, upload, and share pictures.

You'll need to enable Cloud Storage:

  1. In the Firebase console's Build section, click Storage .
  2. If there's no Get Started button, it means that Cloud storage is already enabled, and you don't need to follow the steps below.
  3. Click Get Started .
  4. Read the disclaimer about security rules for your Firebase project, then click Next .

With the default security rules, any authenticated user can write anything to Cloud Storage. We'll make our storage more secure later in this codelab.

62f1afdcd1260127.png

  1. The Cloud Storage location is preselected with the same region you chose for your Cloud Firestore database. Click Done to complete the setup.

1d7f49ebaddb32fc.png

4. Install the Firebase command-line interface

The Firebase command-line interface (CLI) allows you to use Firebase Hosting to serve your web app locally, as well as to deploy your web app to your Firebase project.

  1. Install the CLI by running the following npm command:
npm -g install firebase-tools
  1. Verify that the CLI has been installed correctly by running the following command:
firebase --version

Make sure that the version of the Firebase CLI is v4.1.0 or later.

  1. Authorize the Firebase CLI by running the following command:
firebase login

We've set up the web app template to pull your app's configuration for Firebase Hosting from your app's local directory (the repository that you cloned earlier in the codelab). But to pull the configuration, we need to associate your app with your Firebase project.

  1. Make sure that your command line is accessing your app's local web-start directory.
  2. Associate your app with your Firebase project by running the following command:
firebase use --add
  1. When prompted, select your Project ID , then give your Firebase project an alias.

An alias is useful if you have multiple environments (production, staging, etc). However, for this codelab, let's just use the alias of default .

  1. Follow the remaining instructions on your command line.

5. Run the starter app locally

Now that you have imported and configured your project, you are ready to run the web app for the first time.

  1. In a console from the web-start directory, run the following Firebase CLI command:
firebase serve --only hosting
  1. Your command line should display the following response:
✔  hosting: Local server: http://localhost:5000

We're using the Firebase Hosting emulator to serve our app locally. The web app should now be available from http://localhost:5000 . All the files that are located under the public subdirectory are served.

  1. Using your browser, open your app at http://localhost:5000 .

You should see your FriendlyChat app's UI, which is not (yet!) functioning:

4c23f9475228cef4.png

The app cannot do anything right now, but with your help it will soon! We've only laid out the UI for you so far.

Let's now build a realtime chat!

6. Import and configure Firebase

Import the Firebase SDK

We need to import the Firebase SDK into the app. There are multiple ways to do this as described in our documentation . For instance, you can import the library from our CDN. Or you can install it locally using npm, then package it in your app if you're using Browserify.

We're going to get the Firebase SDK from npm and use Webpack to bundle our code. We're doing this so that Webpack can remove any unnecessary code, keeping our JS bundle size small to make sure our app loads as quickly as possible. For this codelab, we've already created a web-start/package.json file that includes the Firebase SDK as a dependency, as well as imported the needed functions at the top of 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';

During this codelab, we're going to use Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging, and Performance Monitoring, so we're importing all of their libraries. In your future apps, make sure that you're only importing the parts of Firebase that you need, to shorten the load time of your app.

Install the Firebase SDK and start your Webpack build

We need to run a few commands to get our app's build going.

  1. Open a new terminal window
  2. Make sure you're in the web-start directory
  3. Run npm install to download the Firebase SDK
  4. Run npm run start to start up Webpack. Webpack will now continually rebuild our cource code for the rest of the codelab.

Configure Firebase

We also need to configure the Firebase SDK to tell it which Firebase project that we're using.

  1. Go to your Project settings in the Firebase console
  2. In the "Your apps" card, select the nickname of the app for which you need a config object.
  3. Select "Config" from the Firebase SDK snippet pane.
  4. Copy the config object snippet, then add it to 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",
};

Now, go to the bottom of web-start/src/index.js and initialize Firebase:

index.js

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

7. Set up user sign-in

The Firebase SDK should now be ready to use since it's imported and initialized in index.js . We're now going to implement user sign-in using Firebase Authentication .

Authenticate your users with Google Sign-In

In the app, when a user clicks the Sign in with Google button, the signIn function is triggered. (We already set that up for you!) For this codelab, we want to authorize Firebase to use Google as the identity provider. We'll use a popup, but several other methods are available from Firebase.

  1. In the web-start directory, in the subdirectory src/ , open index.js .
  2. Find the function signIn .
  3. Replace the entire function with the following code.

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);
}

The signOut function is triggered when the user clicks the Sign out button.

  1. Go back to the file src/index.js .
  2. Find the function signOutUser .
  3. Replace the entire function with the following code.

index.js

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

Track the authentication state

To update our UI accordingly, we need a way to check if the user is signed in or signed out. With Firebase Authentication, you can register an observer on the authentication state that will be triggered each time the authentication state changes.

  1. Go back to the file src/index.js .
  2. Find the function initFirebaseAuth .
  3. Replace the entire function with the following code.

index.js

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

The code above registers the function authStateObserver as the authentication state observer. It will trigger each time the authentication state changes (when the user signs in or signs out). It's at this point that we'll update the UI to display or hide the sign-in button, the sign-out button, the signed-in user's profile picture, and so on. All of these UI parts have already been implemented.

Display the information of the signed-in user

We want to display the signed-in user's profile picture and user name in the top bar of our app. In Firebase, the signed-in user's data is always available in the currentUser object. Earlier, we set up the authStateObserver function to trigger when the user signs in so that our UI updates accordingly. It will call getProfilePicUrl and getUserName when triggered.

  1. Go back to the file src/index.js .
  2. Find the functions getProfilePicUrl and getUserName .
  3. Replace both functions with the following code.

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;
}

We display an error message if the user tries to send messages when the user isn't signed in. (You can try it, though!) So, we need to detect if the user is actually signed in.

  1. Go back to the file src/index.js .
  2. Find the function isUserSignedIn .
  3. Replace the entire function with the following code.

index.js

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

Test signing in to the app

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. Sign in to the app using the sign-in button and your Google account. If you see an error message stating auth/operation-not-allowed , check to make sure that you enabled Google Sign-in as an authentication provider in the Firebase console.
  3. After signing in, your profile picture and user name should be displayed: c7401b3d44d0d78b.png

8. Write messages to Cloud Firestore

In this section, we'll write some data to Cloud Firestore so that we can populate the app's UI. This can be done manually with the Firebase console , but we'll do it in the app itself to demonstrate a basic Cloud Firestore write.

Data model

Cloud Firestore data is split into collections, documents, fields, and subcollections. We will store each message of the chat as a document in a top-level collection called messages .

688d7bc5fb662b57.png

Add messages to Cloud Firestore

To store the chat messages that are written by users, we'll use Cloud Firestore .

In this section, you'll add the functionality for users to write new messages to your database. A user clicking the SEND button will trigger the code snippet below. It adds a message object with the contents of the message fields to your Cloud Firestore instance in the messages collection. The add() method adds a new document with an automatically generated ID to the collection.

  1. Go back to the file src/index.js .
  2. Find the function saveMessage .
  3. Replace the entire function with the following code.

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);
  }
}

Test sending messages

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. After signing in, enter a message such as "Hey there!", and then click SEND . This will write the message into Cloud Firestore. However, you won't yet see the data in your actual web app because we still need to implement retrieving the data (the next section of the codelab).
  3. You can see the newly added message in your Firebase Console. Open your Firebase Console. Under the Build section click Firestore Database (or click here and select your project) and you should see the messages collection with your newly added message:

6812efe7da395692.png

9. Read messages

Synchronize messages

To read messages in the app, we'll need to add listeners that trigger when data changes and then create a UI element that shows new messages.

We'll add code that listens for newly added messages from the app. In this code, we'll register the listener that listens for changes made to the data. We'll only display the last 12 messages of the chat to avoid displaying a very long history upon loading.

  1. Go back to the file src/index.js .
  2. Find the function loadMessages .
  3. Replace the entire function with the following code.

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);
      }
    });
  });
}

To listen to messages in the database, we create a query on a collection by using the collection function to specify which collection the data that we want to listen to is in. In the code above, we're listening to the changes within the messages collection, which is where the chat messages are stored. We're also applying a limit by only listening to the last 12 messages using .limit(12) and ordering the messages by date using orderBy('timestamp', 'desc') to get the 12 newest messages.

The onSnapshot function takes a query as its first parameter, and a callback function as its second. The callback function will be triggered when there are any changes to documents that match the query. This could be if a message gets deleted, modified, or added. You can read more about this in the Cloud Firestore documentation .

Test synchronizing messages

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. The messages that you created earlier into the database should be displayed in the FriendlyChat UI (see below). Feel free to write new messages; they should appear instantly.
  3. (Optional) You can try manually deleting, modifying, or adding new messages directly in the Database section of the Firebase console; any changes should be reflected in the UI.

Congratulations! You are reading Cloud Firestore documents in your app!

2168dec79b573d07.png

10. Send images

We'll now add a feature that shares images.

While Cloud Firestore is good for storing structured data, Cloud Storage is better suited for storing files. Cloud Storage for Firebase is a file/blob storage service, and we'll use it to store any images that a user shares using our app.

Save images to Cloud Storage

For this codelab, we've already added for you a button that triggers a file picker dialog. After selecting a file, the saveImageMessage function is called, and you can get a reference to the selected file. The saveImageMessage function accomplishes the following:

  1. Creates a "placeholder" chat message in the chat feed, so that users see a "Loading" animation while we upload the image.
  2. Uploads the image file to Cloud Storage to this path: /<uid>/<messageId>/<file_name>
  3. Generates a publicly readable URL for the image file.
  4. Updates the chat message with the newly uploaded image file's URL in lieu of the temporary loading image.

Now you'll add the functionality to send an image:

  1. Go back to the file src/index.js .
  2. Find the function saveImageMessage .
  3. Replace the entire function with the following code.

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);
  }
}

Test sending images

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. After signing in, click the image upload button 13734cb66773e5a3.png and select an image file using the file picker. If you're looking for an image, feel free to use this nice picture of a coffee cup .
  3. A new message should appear in the app's UI with your selected image: 3b1284f5144b54f6.png

If you try adding an image while not signed in, you should see a Toast notification telling you that you must sign in to add images.

11. Show notifications

We'll now add support for browser notifications. The app will notify users when new messages are posted in the chat. Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages and notifications at no cost.

Add the FCM service worker

The web app needs a service worker that will receive and display web notifications.

  1. From the web-start directory, in the src directory, open firebase-messaging-sw.js .
  2. Add the following content to that file.

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');

The service worker simply needs to load and initialize the Firebase Cloud Messaging SDK, which will take care of displaying notifications.

Get FCM device tokens

When notifications have been enabled on a device or browser, you'll be given a device token . This device token is what we use to send a notification to a particular device or particular browser.

When the user signs-in, we call the saveMessagingDeviceToken function. That's where we'll get the FCM device token from the browser and save it to Cloud Firestore.

  1. Go back to the file src/index.js .
  2. Find the function saveMessagingDeviceToken .
  3. Replace the entire function with the following code.

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);
  };
}

However, this code won't work initially. For your app to be able to retrieve the device token, the user needs to grant your app permission to show notifications (next step of the codelab).

Request permissions to show notifications

When the user has not yet granted your app permission to show notifications, you won't be given a device token. In this case, we call the firebase.messaging().requestPermission() method, which will display a browser dialog asking for this permission ( in supported browsers ).

8b9d0c66dc36153d.png

  1. Go back to the file src/index.js .
  2. Find the function requestNotificationsPermissions .
  3. Replace the entire function with the following code.

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.');
  }
}

Get your device token

  1. If your app is still being served, refresh your app in the browser. Otherwise, run firebase serve --only hosting on the command line to start serving the app from http://localhost:5000 , and then open it in your browser.
  2. After signing in, the notifications permission dialog should appear: bd3454e6dbfb6723.png
  3. Click Allow .
  4. Open the JavaScript console of your browser. You should see the following message: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Copy your device token. You'll need it for the next stage of the codelab.

Send a notification to your device

Now that you have your device token, you can send a notification.

  1. Open the Cloud Messaging tab of the Firebase console .
  2. Click "New Notification"
  3. Enter a notification title and notification text.
  4. On the right side of the screen, click "send a test message"
  5. Enter the device token you copied from the JavaScript console of your browser, then click the plus ("+") sign
  6. Click "test"

If your app is in the foreground, you'll see the notification in the JavaScript console.

If your app is in the background, a notification should appear in your browser, as in this example:

de79e8638a45864c.png

12. Cloud Firestore security rules

View database security rules

Cloud Firestore uses a specific rules language to define access rights, security, and data validations.

When setting up the Firebase project at the beginning of this codelab, we chose to use "Test mode" default security rules so that we didn't restrict access to the datastore. In the Firebase console , in the Database section's Rules tab, you can view and modify these rules.

Right now, you should see the default rules, which do not restrict access to the datastore. This means that any user can read and write to any collections in your datastore.

rules_version = '2';

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

We'll update the rules to restrict things by using the following rules:

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;
    }
  }
}

Update database security rules

There are two ways to edit your database security rules, either in the Firebase console or from a local rules file deployed using the Firebase CLI.

To update security rules in the Firebase console:

  1. Go to the Database section from the left panel, and then click the Rules tab.
  2. Replace the default rules that are already in the console with the rules shown above.
  3. Click Publish .

To update security rules from a local file:

  1. From the web-start directory, open firestore.rules .
  2. Replace the default rules that are already in the file with the rules shown above.
  3. From the web-start directory, open firebase.json .
  4. Add the firestore.rules attribute pointing to firestore.rules , as shown below. (The hosting attribute should already be in the file.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Deploy the security rules using the Firebase CLI by running the following command:
firebase deploy --only firestore
  1. Your command line should display the following response:
=== 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

13. Cloud Storage security rules

View Cloud Storage security rules

Cloud Storage for Firebase uses a specific rules language to define access rights, security, and data validations.

When setting up the Firebase project at the beginning of this codelab, we chose to use the default Cloud Storage security rule that only allows authenticated users to use Cloud Storage. In the Firebase console , in the Storage section's Rules tab, you can view and modify rules. You should see the default rule which allows any signed-in user to read and write any files in your storage bucket.

rules_version = '2';

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

We'll update the rules to do the following:

  • Allow each user to write only to their own specific folders
  • Allow anyone to read from Cloud Storage
  • Make sure that the files uploaded are images
  • Restrict the size of the images that can be uploaded to maximum 5 MB

This can be implemented using the following rules:

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;
    }
  }
}

Update Cloud Storage security rules

There are two ways to edit your storage security rules: either in the Firebase console or from a local rules file deployed using the Firebase CLI.

To update security rules in the Firebase console:

  1. Go to the Storage section from the left panel, and then click the Rules tab.
  2. Replace the default rule that is already in the console with the rules shown above.
  3. Click Publish .

To update security rules from a local file:

  1. From the web-start directory, open storage.rules .
  2. Replace the default rules that are already in the file with the rules shown above.
  3. From the web-start directory, open firebase.json .
  4. Add the storage.rules attribute pointing to the storage.rules file, as shown below. (The hosting and database attribute should already be in the file.)

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. Deploy the security rules using the Firebase CLI by running the following command:
firebase deploy --only storage
  1. Your command line should display the following response:
=== 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

14. Collect performance data

You can use the Performance Monitoring SDK to collect real-world performance data from your app and then review and analyze that data in the Firebase console. Performance Monitoring helps you to understand where and when the performance of your app can be improved so that you can use that information to fix performance issues.

There are various ways to integrate with the Firebase Performance Monitoring JavaScript SDK. In this codelab, we enabled Performance Monitoring from Hosting URLs . Refer to the documentation to see other methods of enabling the SDK.

Automatic traces

Since we already import getPerformance at the top of web-start/src/index.js , we just need to add one line to tell Performance Monitoring to automatically collect page load and network request metrics for you when users visit your deployed site!

  1. In web-start/src/index.js , add the following line below the existing TODO to initialize Performance Monitoring.

index.js

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

Measure first input delay (optional)

First input delay is useful since the browser responding to a user interaction gives your users their first impressions about the responsiveness of your app.

First input delay starts when the user first interacts with an element on the page, like clicking a button or hyperlink. It stops immediately after the browser is able to respond to the input, meaning that the browser isn't busy loading or parsing your page's content.

If you'd like to measure first input delay, you'll need to include the following code directly.

  1. Open public/index.html .
  2. Uncomment the script tag on the following line.

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>

To read more about the first input delay polyfill, take a look at the documentation .

View performance data

Since you haven't deployed your site yet (you'll deploy it in the next step), here's a screenshot showing the metrics about page load performance that you'll see in the Firebase console within 30 minutes of users interacting with your deployed site:

29389131150f33d7.png

When you integrate the Performance Monitoring SDK into your app, you don't need to write any other code before your app starts automatically monitoring several critical aspects of performance. For web apps, the SDK logs aspects like first contentful paint, ability for users to interact with your app, and more.

You can also set up custom traces, metrics, and attributes to measure specific aspects of your app. Visit the documentation to learn more about custom traces and metrics and custom attributes .

15. Deploy your app using Firebase Hosting

Firebase offers a hosting service to serve your assets and web apps. You can deploy your files to Firebase Hosting using the Firebase CLI. Before deploying, you need to specify in your firebase.json file which local files should be deployed. For this codelab, we've already done this for you because this step was required to serve our files during this codelab. The hosting settings are specified under the hosting attribute:

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"
  }
}

These settings tell the CLI that we want to deploy all files in the ./public directory ( "public": "./public" ).

  1. Make sure that your command line is accessing your app's local web-start directory.
  2. Deploy your files to your Firebase project by running the following command:
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 on a global CDN 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.

16. Congratulations!

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

Nächste Schritte

Learn more