Diese Seite wurde von der Cloud Translation API übersetzt.

Benachrichtigungen für eine Web-App mit Cloud Messaging und Cloud Functions senden

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie mit Cloud Functions for Firebase Funktionen zu einer Chat-Web-App hinzufügen, indem Sie Benachrichtigungen an Nutzer der Chat-App senden.

Lerninhalte

Funktionen in Google Cloud Functions mit Firebase SDK erstellen
Cloud Functions basierend auf Auth, Cloud Storage und Cloud Firestore-Ereignissen auslösen
Einer Web-App Unterstützung von Firebase Cloud Messaging hinzufügen

Voraussetzungen

Eine Kreditkarte Für Cloud Functions for Firebase ist der Firebase Blaze-Tarif erforderlich. Sie müssen also die Abrechnung für Ihr Firebase-Projekt mit einer Kreditkarte aktivieren.
Die IDE bzw. der Texteditor Ihrer Wahl, z. B. WebStorm, Atom oder Sublime
Ein Terminal zum Ausführen von Shell-Befehlen mit installierter Node.js-Version 9.
Ein Browser wie Chrome.
Der Beispielcode Weitere Informationen dazu finden Sie im nächsten Schritt.

2. Beispielcode abrufen

Klonen Sie das GitHub-Repository über die Befehlszeile:

git clone https://github.com/firebase/friendlychat

Start-App importieren

Öffnen oder importieren Sie das Verzeichnis cloud-functions-start aus dem Beispielcodeverzeichnis in Ihrer IDE. Dieses Verzeichnis enthält den Startcode für das Codelab, der aus einer voll funktionsfähigen Chat-Webanwendung besteht.

3. Firebase-Projekt erstellen und App einrichten

Projekt erstellen

Klicken Sie in der Firebase Console auf Projekt hinzufügen und nennen Sie es FriendlyChat.

Klicken Sie auf Projekt erstellen.

Upgrade auf den Tarif „Blaze“ ausführen

Damit Sie Cloud Functions for Firebase und Cloud Storage for Firebase verwenden können, muss für Ihr Firebase-Projekt der Pay-as-you-go-Tarif (Blaze) verwendet werden. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft sein muss.

Für ein Cloud-Rechnungskonto ist eine Zahlungsmethode erforderlich, z. B. eine Kreditkarte.
Wenn Sie Firebase und Google Cloud zum ersten Mal verwenden, prüfen Sie, ob Sie Anspruch auf ein Guthaben von 300$und ein kostenloses Cloud-Rechnungskonto für die Testversion haben.
Wenn Sie dieses Codelab im Rahmen einer Veranstaltung absolvieren, fragen Sie Ihren Organisator, ob Cloud-Guthaben verfügbar ist.

Wenn Sie keinen Zugriff auf eine Kreditkarte haben oder mit dem Blaze-Preismodell nicht fortfahren möchten, können Sie die Firebase Emulator Suite verwenden. Damit können Sie Cloud Functions kostenlos auf Ihrem lokalen Computer emulieren.

Alle Firebase-Projekte, einschließlich derjenigen im Blaze-Tarif, haben weiterhin Zugriff auf Kontingente für die kostenlose Nutzung von Cloud Functions. Die in diesem Codelab beschriebenen Schritte bleiben innerhalb der Nutzungslimits der kostenlosen Stufe. Es fallen jedoch geringe Gebühren (ca. 0,03 $) für Cloud Storage an, das zum Hosten Ihrer Cloud Functions-Build-Images verwendet wird.

So führen Sie ein Upgrade auf den Blaze-Tarif durch:

Wählen Sie in der Firebase Console Tarif upgraden aus.
Wählen Sie den Blaze-Tarif aus. Folgen Sie der Anleitung auf dem Bildschirm, um ein Cloud-Rechnungskonto mit Ihrem Projekt zu verknüpfen.
Wenn Sie im Rahmen dieses Upgrades ein Cloud-Rechnungskonto erstellen mussten, müssen Sie möglicherweise zum Upgradevorgang in der Firebase Console zurückkehren, um das Upgrade abzuschließen.

Google Auth aktivieren

Damit sich Nutzer in der App anmelden können, verwenden wir die Google-Authentifizierung. Diese muss aktiviert sein.

Öffnen Sie in der Firebase Console den Bereich Build > Authentifizierung > Anmeldemethode (oder klicken Sie hier, um dorthin zu gelangen). Aktivieren Sie dann den Anmeldeanbieter Google und klicken Sie auf Speichern. So können sich Nutzer mit ihren Google-Konten in der Web-App anmelden.

Sie können den öffentlichen Namen Ihrer App auch zu Friendly Chat ändern:

Cloud Storage for Firebase einrichten

Die App nutzt Cloud Storage, um Bilder hochzuladen.

So richten Sie Cloud Storage for Firebase in Ihrem Firebase-Projekt ein:

Maximieren Sie im linken Bereich der Firebase Console die Option Build und wählen Sie dann Storage aus.
Klicken Sie auf Starten.
Wählen Sie einen Standort für Ihren Standard-Storage-Bucket aus.
Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 können die Stufe „Immer kostenlos“ für Google Cloud Storage nutzen. Für Buckets an allen anderen Speicherorten gelten die Preise und Nutzungsbedingungen für Google Cloud Storage.
Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihren Speicher-Bucket hinzuzufügen.
Klicken Sie auf Erstellen.

Web-App hinzufügen

Fügen Sie in der Firebase Console eine Web-App hinzu. Rufen Sie dazu Projekteinstellungen auf und scrollen Sie nach unten zu App hinzufügen. Wählen Sie „Web“ als Plattform aus und klicken Sie das Kästchen zum Einrichten von Firebase Hosting an. Registrieren Sie dann die App und klicken Sie für die restlichen Schritte auf Weiter. Klicken Sie abschließend auf Weiter zur Konsole.

4. Firebase-Befehlszeile installieren

Mit der Firebase-Befehlszeile (Command Line Interface, CLI) können Sie die Webanwendung lokal bereitstellen sowie Ihre Webanwendung und Cloud Functions bereitstellen.

Führen Sie den folgenden npm-Befehl aus, um die Befehlszeile zu installieren oder zu aktualisieren:

npm -g install firebase-tools

Öffnen Sie eine Konsole und führen Sie den folgenden Befehl aus, um zu prüfen, ob die Befehlszeile korrekt installiert wurde:

firebase --version

Achten Sie darauf, dass die Version der Firebase CLI höher als 4.0.0 ist, damit sie über die neuesten Features verfügt, die für Cloud Functions erforderlich sind. Ist dies nicht der Fall, führen Sie npm install -g firebase-tools aus, um das Upgrade wie oben beschrieben durchzuführen.

Autorisieren Sie die Firebase CLI mit dem folgenden Befehl:

firebase login

Achten Sie darauf, dass Sie sich im Verzeichnis cloud-functions-start befinden, und richten Sie dann Firebase CLI ein, um Ihr Firebase-Projekt zu verwenden:

firebase use --add

Wählen Sie als Nächstes Ihre Projekt-ID aus und folgen Sie der Anleitung. Wenn Sie dazu aufgefordert werden, können Sie einen beliebigen Alias auswählen, z. B. codelab.

5. Web-App bereitstellen und ausführen

Nachdem Sie das Projekt importiert und konfiguriert haben, können Sie die Web-App zum ersten Mal ausführen. Öffnen Sie ein Terminalfenster, gehen Sie zum Ordner cloud-functions-start und stellen Sie die Web-App mit folgendem Befehl für Firebase Hosting bereit:

firebase deploy --except functions

Die Ausgabe der Konsole sollte so aussehen:

i deploying database, storage, hosting
✔  database: rules ready to deploy.
i  storage: checking rules for compilation errors...
✔  storage: rules file compiled successfully
i  hosting: preparing ./ directory for upload...
✔  hosting: ./ folder uploaded successfully
✔ storage: rules file compiled successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...

✔ Deploy complete!

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

Web-App öffnen

Die letzte Zeile sollte die Hosting-URL enthalten. Die Webanwendung sollte jetzt über diese URL bereitgestellt werden, die das Format https://<project-id>.firebaseapp.com haben sollte. Öffnen Sie sie. Daraufhin sollte die funktionierende Benutzeroberfläche einer Chat-App angezeigt werden.

Melden Sie sich über die Schaltfläche ÜBER GOOGLE ANMELDEN in der App an. Sie können auch einige Nachrichten und Bilder hinzufügen:

Wenn du dich zum ersten Mal in einem neuen Browser in der App anmeldest, musst du Benachrichtigungen zulassen, wenn du dazu aufgefordert wirst:

Später müssen Benachrichtigungen aktiviert werden.

Falls Sie versehentlich auf Blockieren geklickt haben, können Sie diese Einstellung wieder ändern. Klicken Sie dazu in der Chrome Omnibar links neben der URL auf die Schaltfläche 🔒 Sicher und aktivieren oder deaktivieren Sie die Leiste neben Benachrichtigungen:

Jetzt fügen wir mithilfe des Firebase SDK for Cloud Functions einige Funktionen hinzu.

6. Das Cloud Functions-Verzeichnis

Mit Cloud Functions können Sie Code ganz einfach in der Cloud ausführen, ohne einen Server einrichten zu müssen. Wir zeigen Ihnen, wie Sie Funktionen erstellen, die auf Firebase Auth-, Cloud Storage- und Firebase Firestore-Datenbankereignisse reagieren. Beginnen wir mit der Authentifizierung.

Wenn Sie das Firebase SDK for Cloud Functions verwenden, befindet sich Ihr Functions-Code standardmäßig im Verzeichnis functions. Der Functions-Code ist auch eine Node.js-App. Daher ist eine package.json-Datei mit Angaben zu Ihrer App und einer Liste der Abhängigkeiten erforderlich.

Zur Vereinfachung haben wir bereits die Datei functions/index.js erstellt, in die der Code eingefügt werden soll. Sehen Sie sich diese Datei an, bevor Sie fortfahren.

cd functions
ls

Wenn Sie mit Node.js nicht vertraut sind, sollten Sie sich damit vertraut machen, bevor Sie mit dem Codelab fortfahren.

In der Datei package.json sind bereits zwei erforderliche Abhängigkeiten aufgeführt: das Firebase SDK for Cloud Functions und das Firebase Admin SDK. Wechseln Sie zum Ordner functions und führen Sie den folgenden Befehl aus, um sie lokal zu installieren:

npm install

Sehen wir uns jetzt die Datei index.js an:

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Wir importieren die erforderlichen Module und schreiben dann drei Funktionen anstelle der TODOs. Beginnen wir mit dem Importieren der erforderlichen Node-Module.

7. Cloud Functions- und Firebase Admin-Module importieren

Für dieses Codelab sind zwei Module erforderlich: Mit firebase-functions können Sie Cloud Functions-Trigger und ‑Protokolle schreiben. Mit firebase-admin können Sie die Firebase-Plattform auf einem Server mit Administratorzugriff verwenden, um Aktionen wie das Schreiben in Cloud Firestore oder das Senden von FCM-Benachrichtigungen auszuführen.

Ersetzen Sie in der Datei index.js die erste TODO durch Folgendes:

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Das Firebase Admin SDK kann bei der Bereitstellung in einer Cloud Functions-Umgebung oder in anderen Google Cloud Platform-Containern automatisch konfiguriert werden. Dies geschieht, wenn admin.initializeApp() ohne Argumente aufgerufen wird.

Fügen wir nun eine Funktion hinzu, die ausgeführt wird, wenn sich ein Nutzer zum ersten Mal in der Chat-App anmeldet, und fügen eine Chat-Nachricht zur Begrüßung des Nutzers hinzu.

8. Neue Nutzer willkommen heißen

Struktur der Chatnachrichten

Nachrichten, die im Chatfeed von Friendly Chat gepostet werden, werden in Cloud Firestore gespeichert. Sehen wir uns die Datenstruktur an, die wir für eine Nachricht verwenden. Posten Sie dazu eine neue Chatnachricht, die „Hallo Welt“ lautet:

Das sollte dann so aussehen:

Klicken Sie in der Firebase Console im Bereich Build auf Firestore-Datenbank. Sie sollten die Sammlung „Nachrichten“ und ein Dokument mit der von Ihnen verfassten Nachricht sehen:

Wie Sie sehen, werden Chatnachrichten in Cloud Firestore als Dokument mit den Attributen name, profilePicUrl, text und timestamp gespeichert, die der Sammlung messages hinzugefügt wurden.

Willkommensnachrichten hinzufügen

Mit der ersten Cloud Functions-Funktion wird eine Nachricht hinzugefügt, mit der neue Nutzer im Chat begrüßt werden. Dazu können wir den Trigger functions.auth().onCreate verwenden, der die Funktion jedes Mal ausführt, wenn sich ein Nutzer zum ersten Mal in der Firebase App anmeldet. Fügen Sie die Funktion addWelcomeMessages in die Datei index.js ein:

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  functions.logger.log('Welcome message written to database.');
});

Durch das Hinzufügen dieser Funktion zum speziellen exports-Objekt wird die Funktion von Node außerhalb der aktuellen Datei zugänglich gemacht. Dies ist für Cloud Functions erforderlich.

In der obigen Funktion fügen wir der Liste der Chatnachrichten eine neue Willkommensnachricht hinzu, die von „Firebase Bot“ gepostet wurde. Dazu verwenden wir die Methode add in der Sammlung messages in Cloud Firestore, in der die Nachrichten des Chats gespeichert werden.

Da dies eine asynchrone Operation ist, müssen wir das Promise zurückgeben, das angibt, wann der Schreibvorgang in Cloud Firestore abgeschlossen ist, damit die Cloud Functions nicht zu früh ausgeführt werden.

Cloud Functions bereitstellen

Cloud Functions sind erst aktiv, nachdem Sie sie bereitgestellt haben. Führen Sie dazu folgenden Befehl in der Befehlszeile aus:

firebase deploy --only functions

Die Ausgabe der Konsole sollte so aussehen:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
⚠  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
⚠  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
✔  env: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function addWelcomeMessages...
✔  functions[addWelcomeMessages]: Successful create operation. 
✔  functions: all functions deployed successfully!

✔  Deploy complete!

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

Funktion testen

Nachdem die Funktion bereitgestellt wurde, benötigen Sie einen Nutzer, der sich zum ersten Mal anmeldet.

Öffnen Sie Ihre App im Browser. Verwenden Sie dazu die Hosting-URL in Form von https://<project-id>.firebaseapp.com.
Melden Sie sich als neuer Nutzer zum ersten Mal über die Schaltfläche Anmelden in Ihrer App an.

Wenn Sie sich bereits in der App angemeldet haben, können Sie die Firebase Console-Authentifizierung öffnen und Ihr Konto aus der Liste der Nutzer löschen. Melden Sie sich dann noch einmal an.

Nach der Anmeldung sollte automatisch eine Willkommensnachricht angezeigt werden:

9. Bildermoderation

Nutzer können alle Arten von Bildern in den Chat hochladen. Es ist immer wichtig, anstößige Bilder zu moderieren, insbesondere auf öffentlichen sozialen Plattformen. In FriendlyChat werden die Bilder, die im Chat veröffentlicht werden, in Cloud Storage-Buckets gespeichert.

Mit Cloud Functions-Funktionen können Sie neue Bilduploads erkennen. Verwenden Sie dazu den Trigger functions.storage().onFinalize. Er wird jedes Mal ausgeführt, wenn eine neue Datei in Cloud Storage hochgeladen oder modifiziert wurde.

So werden Bilder moderiert:

Überprüfen Sie mithilfe der Cloud Vision API, ob das Bild als "Nicht jugendfrei" oder als "Gewaltverherrlichend" gekennzeichnet wurde.
Wenn das Bild entsprechend markiert ist, laden Sie es in die laufende Functions-Instanz herunter.
Machen Sie das Bild mithilfe der Weichzeichnen-Funktion von ImageMagick unkenntlich.
Laden Sie das so bearbeitete Bild in Cloud Storage hoch.

Cloud Vision API aktivieren

Da wir in dieser Funktion die Google Cloud Vision API verwenden, müssen Sie die API in Ihrem Firebase-Projekt aktivieren. Klicken Sie auf diesen Link, wählen Sie Ihr Firebase-Projekt aus und aktivieren Sie die API:

Abhängigkeiten installieren

Zur Moderation von Bildern verwenden wir die Google Cloud Vision-Clientbibliothek für Node.js, @google-cloud/vision, um Bilder über die Cloud Vision API auszuführen und unangemessene Bilder zu erkennen.

Führen Sie den folgenden npm install --save-Befehl aus, um dieses Paket in Ihrer Cloud Functions-Anwendung zu installieren. Sie müssen sich im Verzeichnis functions befinden.

npm install --save @google-cloud/vision@2.4.0

Dadurch wird das Paket lokal installiert und in der Datei package.json als Abhängigkeit deklariert.

Abhängigkeiten importieren und konfigurieren

Fügen Sie oben in der Datei index.js die folgenden Zeilen hinzu, um die installierten Abhängigkeiten und einige Node.js-Kernmodule (path, os und fs) zu importieren, die wir in diesem Abschnitt benötigen:

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();
const {promisify} = require('util');
const exec = promisify(require('child_process').exec);

const path = require('path');
const os = require('os');
const fs = require('fs');

Da die Funktion in einer Google Cloud-Umgebung ausgeführt wird, müssen die Cloud Storage- und Cloud Vision-Bibliotheken nicht konfiguriert werden. Sie werden automatisch für die Verwendung Ihres Projekts konfiguriert.

Unangemessene Bilder erkennen

Sie verwenden den Cloud Functions-Trigger functions.storage.onChange. Damit wird Ihr Code ausgeführt, sobald eine Datei oder ein Ordner in einem Cloud Storage-Bucket erstellt oder geändert wurde. Fügen Sie die Funktion blurOffensiveImages der Datei index.js hinzu:

index.js

// Checks if uploaded images are flagged as Adult or Violence and if so blurs them.
exports.blurOffensiveImages = functions.runWith({memory: '2GB'}).storage.object().onFinalize(
    async (object) => {
      const imageUri = `gs://${object.bucket}/${object.name}`;
      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(imageUri);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.protos.google.cloud.vision.v1.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        functions.logger.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      functions.logger.log('The image', object.name, 'has been detected as OK.');
    });

Beachten Sie, dass wir einige Konfigurationen der Cloud Functions-Instanz hinzugefügt haben, die die Funktion ausführen wird. Bei .runWith({memory: '2GB'}) fordern wir an, dass die Instanz statt der Standardeinstellung 2 GB Arbeitsspeicher erhält, da diese Funktion speicherintensiv ist.

Wenn die Funktion ausgelöst wird, wird das Bild über die Cloud Vision API ausgeführt, um gewaltverherrlichende oder nicht jugendfreie Inhalte zu erkennen. Wenn das Bild anhand dieser Kriterien als unangemessen erkannt wird, wird es unkenntlich gemacht. Das geschieht in der Funktion blurImage, wie wir gleich sehen werden.

Bild unkenntlich machen

Fügen Sie der Datei index.js die folgende blurImage-Funktion hinzu:

index.js

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  functions.logger.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await exec(`convert "${tempLocalFile}" -channel RGBA -blur 0x24 "${tempLocalFile}"`);
  functions.logger.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  functions.logger.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  functions.logger.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  functions.logger.log('Marked the image as moderated in the database.');
}

Bei der obigen Funktion wird das Binärprogramm des Bildes aus Cloud Storage heruntergeladen. Anschließend wird die Datei mithilfe des Tools convert von ImageMagick unkenntlich gemacht und die so bearbeitete Version wird wieder in das Storage-Bucket hochgeladen. Als Nächstes löschen wir die Datei auf der Cloud Functions-Instanz, um Speicherplatz freizugeben. Dies ist notwendig, da dieselbe Cloud Functions-Instanz wiederverwendet werden kann und wenn Dateien nicht bereinigt werden, der Speicherplatz aufgebraucht werden könnte. Zuletzt wird der Chatnachricht ein boolescher Wert hinzugefügt, der angibt, dass das Bild moderiert wurde. Dadurch wird eine Aktualisierung der Nachricht beim Client ausgelöst.

Funktion implementieren

Die Funktion ist erst nach der Bereitstellung aktiv. Führen Sie in der Befehlszeile firebase deploy --only functions aus:

firebase deploy --only functions

Die Ausgabe der Konsole sollte so aussehen:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

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

Funktion testen

Wenn die Funktion bereitgestellt ist, tun Sie Folgendes:

Öffnen Sie die Anwendung in Ihrem Browser unter Verwendung der Hosting-URL (im Format https://<project-id>.firebaseapp.com).
Nachdem du dich in der App angemeldet hast, lade ein Bild hoch:
Wähle dein bestes anstößiges Bild zum Hochladen aus (oder verwende diesen fleischfressenden Zombie). Nach ein paar Minuten sollte dein Beitrag mit einer unkenntlich gemachten Version des Bildes aktualisiert werden:

10. Benachrichtigungen über neue Nachrichten

In diesem Abschnitt fügen Sie eine Cloud Functions-Funktion hinzu, die Benachrichtigungen an die Teilnehmer des Chats sendet, wenn eine neue Nachricht gepostet wird.

Mit Firebase Cloud Messaging (FCM) können Sie zuverlässig Benachrichtigungen an Nutzer auf verschiedenen Plattformen senden. Wenn Sie eine Benachrichtigung an einen Nutzer senden möchten, benötigen Sie dessen FCM-Gerätetoken. Die Chat-Web-App, die wir verwenden, ruft bereits Gerätetokens von Nutzern ab, wenn sie die App zum ersten Mal auf einem neuen Gerät oder in einem neuen Browser öffnen. Diese Tokens werden in Cloud Firestore in der Sammlung fcmTokens gespeichert.

Wenn Sie wissen möchten, wie Sie FCM-Gerätetokens in einer Webanwendung abrufen, können Sie das Firebase Web Codelab durchgehen.

Benachrichtigungen senden

Um zu erkennen, wann neue Nachrichten gesendet werden, verwenden Sie den Cloud Functions-Trigger functions.firestore.document().onCreate, der Ihren Code ausführt, wenn ein neues Objekt unter einem bestimmten Pfad von Cloud Firestore erstellt wird. Fügen Sie die Funktion sendNotifications der Datei index.js hinzu:

index.js

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      functions.logger.log('Notifications have been sent and tokens cleaned up.');
    }
  });

In der obigen Funktion erfassen wir die Gerätetokens aller Nutzer aus der Cloud Firestore-Datenbank und senden mithilfe der Funktion admin.messaging().sendToDevice eine Benachrichtigung an jeden dieser Nutzer.

Tokens bereinigen

Zum Schluss entfernen wir die nicht mehr gültigen Tokens. Das passiert, wenn das Token, das wir einmal vom Nutzer erhalten haben, vom Browser oder Gerät nicht mehr verwendet wird. Das ist beispielsweise der Fall, wenn der Nutzer die Berechtigung für Benachrichtigungen für die Browsersitzung widerrufen hat. Fügen Sie dazu die folgende cleanupTokens-Funktion in die Datei index.js ein:

index.js

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     functions.logger.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens that are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

Funktion implementieren

Die Funktion ist erst aktiv, nachdem Sie sie bereitgestellt haben. Führen Sie dazu den folgenden Befehl in der Befehlszeile aus:

firebase deploy --only functions

Die Ausgabe der Konsole sollte so aussehen:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: updating function blurOffensiveImages...
i  functions: creating function sendNotifications...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful updating operation.
✔  functions[sendNotifications]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

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

Funktion testen

Öffnen Sie die App im Browser, nachdem die Funktion bereitgestellt wurde. Verwenden Sie dazu die Hosting-URL in Form von https://<project-id>.firebaseapp.com.
Wenn du dich zum ersten Mal in der App anmeldest, musst du Benachrichtigungen zulassen, wenn du dazu aufgefordert wirst:
Schließen Sie den Tab mit der Chat-App oder zeigen Sie einen anderen Tab an: Benachrichtigungen werden nur angezeigt, wenn die App im Hintergrund ausgeführt wird. Wie Sie Nachrichten empfangen, während Ihre App im Vordergrund ausgeführt wird, erfahren Sie in unserer Dokumentation.
Melden Sie sich mit einem anderen Browser oder einem Inkognitofenster in der App an und posten Sie eine Nachricht. Sie sollten daraufhin eine Benachrichtigung im ersten Browser erhalten:

11. Glückwunsch!

Sie haben das Firebase SDK for Cloud Functions verwendet und einer Chat-App serverseitig Komponenten hinzugefügt.

Behandelte Themen

Cloud Functions-Funktionen mithilfe des Firebase SDK for Cloud Functions erstellen
Cloud Functions basierend auf Auth, Cloud Storage und Cloud Firestore-Ereignissen auslösen
Einer Web-App Unterstützung von Firebase Cloud Messaging hinzufügen
Cloud Functions-Funktionen mithilfe der Firebase CLI bereitstellen

Nächste Schritte

Weitere Informationen zu anderen Cloud Functions-Triggertypen
Firebase und Cloud Functions für Ihre eigene App verwenden

Benachrichtigungen für eine Web-App mit Cloud Messaging und Cloud Functions senden

1. Übersicht

Lerninhalte

Voraussetzungen

2. Beispielcode abrufen

Start-App importieren

3. Firebase-Projekt erstellen und App einrichten

Projekt erstellen

Upgrade auf den Tarif „Blaze“ ausführen

Google Auth aktivieren

Cloud Storage for Firebase einrichten

Web-App hinzufügen

4. Firebase-Befehlszeile installieren

5. Web-App bereitstellen und ausführen

Web-App öffnen

6. Das Cloud Functions-Verzeichnis

index.js

7. Cloud Functions- und Firebase Admin-Module importieren

index.js

8. Neue Nutzer willkommen heißen

Struktur der Chatnachrichten

Willkommensnachrichten hinzufügen

index.js

Cloud Functions bereitstellen

Funktion testen

9. Bildermoderation

Cloud Vision API aktivieren

Abhängigkeiten installieren

Abhängigkeiten importieren und konfigurieren

index.js

Unangemessene Bilder erkennen

index.js

Bild unkenntlich machen

index.js

Funktion implementieren

Funktion testen

10. Benachrichtigungen über neue Nachrichten

Benachrichtigungen senden

index.js

Tokens bereinigen

index.js

Funktion implementieren

Funktion testen

11. Glückwunsch!

Behandelte Themen

Nächste Schritte

Weitere Informationen