Wysyłaj powiadomienia dotyczące aplikacji internetowej za pomocą funkcji Cloud Messaging i Cloud Functions

1. Przegląd

Podczas tych zajęć z programowania dowiesz się, jak używać Cloud Functions dla Firebase do dodawania funkcjonalności do aplikacji internetowej do czatowania, wysyłając powiadomienia do użytkowników aplikacji do czatu.

3b1284f5144b54f6.png

Czego się dowiesz

  • Utwórz funkcje Google Cloud przy użyciu pakietu SDK Firebase.
  • Uruchamiaj funkcje chmury w oparciu o zdarzenia Auth, Cloud Storage i Cloud Firestore.
  • Dodaj obsługę Firebase Cloud Messaging do swojej aplikacji internetowej.

Co będziesz potrzebował

  • Karta kredytowa. Cloud Functions dla Firebase wymaga planu Firebase Blaze, co oznacza, że ​​będziesz musiał włączyć rozliczenia w swoim projekcie Firebase przy użyciu karty kredytowej.
  • Wybrany edytor IDE/tekstu, taki jak WebStorm , Atom lub Sublime .
  • Terminal do uruchamiania poleceń powłoki z zainstalowanym NodeJS v9.
  • Przeglądarka taka jak Chrome.
  • Przykładowy kod. Zobacz następny krok.

2. Pobierz przykładowy kod

Sklonuj repozytorium GitHub z wiersza poleceń:

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

Zaimportuj aplikację startową

Używając swojego IDE, otwórz lub zaimportuj plik folder_studio_android.png katalog cloud-functions-start z przykładowego katalogu kodu. Ten katalog zawiera kod startowy dla laboratorium kodowania, które składa się z w pełni funkcjonalnej aplikacji Chat Web App.

3. Utwórz projekt Firebase i skonfiguruj aplikację

Utwórz projekt

W konsoli Firebase kliknij Dodaj projekt i nazwij go FriendlyChat .

Kliknij opcję Utwórz projekt .

Przejdź na plan Blaze

Aby korzystać z Cloud Functions dla Firebase, musisz uaktualnić swój projekt Firebase do planu rozliczeniowego Blaze . Będzie to wymagało dodania karty kredytowej lub innego instrumentu rozliczeniowego do konta Google Cloud.

Wszystkie projekty Firebase, w tym te objęte planem Blaze, nadal mają dostęp do bezpłatnych limitów użytkowania Cloud Functions. Kroki opisane w tym ćwiczeniu z programowania będą mieścić się w limitach użycia warstwy bezpłatnej. Będziesz jednak pobierać niewielkie opłaty ( około 0,03 USD ) za usługę Cloud Storage używaną do hostowania obrazów kompilacji Cloud Functions.

Jeśli nie masz dostępu do karty kredytowej lub nie czujesz się komfortowo, kontynuując plan Blaze, rozważ skorzystanie z pakietu Firebase Emulator Suite , który umożliwi Ci bezpłatną emulację Cloud Functions na komputerze lokalnym.

Włącz uwierzytelnianie Google

Aby umożliwić użytkownikom logowanie się do aplikacji, użyjemy autoryzacji Google, która musi być włączona.

W konsoli Firebase otwórz sekcję Kompilacja > Uwierzytelnianie > zakładkę Metoda logowania (lub kliknij tutaj, aby tam przejść). Następnie włącz dostawcę logowania Google i kliknij Zapisz . Umożliwi to użytkownikom logowanie się w aplikacji internetowej przy użyciu kont Google.

Możesz także ustawić publiczną nazwę swojej aplikacji na Przyjazny Czat :

8290061806aacb46.png

Włącz przechowywanie w chmurze

Aplikacja korzysta z Cloud Storage do przesyłania zdjęć. Aby włączyć Cloud Storage w projekcie Firebase, odwiedź sekcję Storage i kliknij przycisk Rozpocznij . Wykonaj tam opisane czynności, a dla lokalizacji Cloud Storage zostanie zastosowana wartość domyślna. Kliknij Gotowe później.

Dodaj aplikację internetową

W konsoli Firebase dodaj aplikację internetową. Aby to zrobić, przejdź do Ustawień projektu i przewiń w dół do opcji Dodaj aplikację . Wybierz sieć jako platformę i zaznacz pole konfiguracji Firebase Hosting, następnie zarejestruj aplikację i kliknij Dalej , aby wykonać pozostałe kroki, a na koniec kliknij Kontynuuj do konsoli .

4. Zainstaluj interfejs wiersza poleceń Firebase

Interfejs wiersza poleceń Firebase (CLI) umożliwia lokalne udostępnianie aplikacji internetowej oraz wdrażanie aplikacji internetowej i funkcji Cloud Functions.

Aby zainstalować lub zaktualizować interfejs CLI, uruchom następującą komendę npm:

npm -g install firebase-tools

Aby sprawdzić, czy interfejs CLI został poprawnie zainstalowany, otwórz konsolę i uruchom:

firebase --version

Upewnij się, że wersja Firebase CLI jest wyższa niż 4.0.0 , aby zawierała wszystkie najnowsze funkcje wymagane przez Cloud Functions. Jeśli nie, uruchom npm install -g firebase-tools aby dokonać aktualizacji, jak pokazano powyżej.

Autoryzuj interfejs CLI Firebase, uruchamiając:

firebase login

Upewnij się, że jesteś w katalogu cloud-functions-start , a następnie skonfiguruj interfejs CLI Firebase, aby korzystać z projektu Firebase:

firebase use --add

Następnie wybierz swój identyfikator projektu i postępuj zgodnie z instrukcjami. Po wyświetleniu monitu możesz wybrać dowolny alias, taki jak codelab .

5. Wdróż i uruchom aplikację internetową

Teraz, gdy zaimportowałeś i skonfigurowałeś swój projekt, możesz uruchomić aplikację internetową po raz pierwszy! Otwórz okno terminala, przejdź do folderu cloud-functions-start i wdróż aplikację internetową na hostingu Firebase, używając:

firebase deploy --except functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Otwórz aplikację internetową

Ostatnia linia powinna wyświetlać adres URL hostingu. Aplikacja internetowa powinna teraz być obsługiwana z tego adresu URL, który powinien mieć postać https://<project-id>.firebaseapp.com. Otwórz to. Powinieneś zobaczyć działający interfejs aplikacji do czatowania.

Zaloguj się do aplikacji za pomocą przycisku ZALOGUJ SIĘ Z GOOGLE i możesz dodać kilka wiadomości i opublikować zdjęcia:

3b1284f5144b54f6.png

Jeśli logujesz się do aplikacji po raz pierwszy w nowej przeglądarce, pamiętaj o włączeniu powiadomień po wyświetleniu monitu: 8b9d0c66dc36153d.png

Będziemy musieli włączyć powiadomienia w późniejszym czasie.

Jeśli przypadkowo kliknąłeś Blokuj , możesz zmienić to ustawienie, klikając przycisk 🔒 Bezpieczne po lewej stronie adresu URL w pasku omnibarowym przeglądarki Chrome i przełączając pasek obok Powiadomień :

e926868b0546ed71.png

Teraz dodamy pewne funkcje za pomocą pakietu Firebase SDK dla Cloud Functions.

6. Katalog funkcji

Cloud Functions umożliwia łatwe uruchomienie kodu w chmurze bez konieczności konfigurowania serwera. Omówimy, jak tworzyć funkcje reagujące na zdarzenia w bazie danych Firebase Auth, Cloud Storage i Firebase Firestore. Zacznijmy od autoryzacji.

Podczas korzystania z pakietu SDK Firebase dla Cloud Functions kod funkcji będzie znajdować się w katalogu functions (domyślnie). Twój kod funkcji jest również aplikacją Node.js i dlatego potrzebuje package.json , który zawiera pewne informacje o Twojej aplikacji i listę zależności.

Aby Ci to ułatwić, stworzyliśmy już functions/index.js , w którym będzie umieszczony Twój kod. Zanim przejdziesz dalej, możesz sprawdzić ten plik.

cd functions
ls

Jeśli nie znasz Node.js , pomocne będzie zdobycie większej wiedzy na ten temat przed kontynuowaniem ćwiczeń z kodowania.

Plik package.json zawiera już listę dwóch wymaganych zależności: pakietu SDK Firebase dla funkcji w chmurze i pakietu SDK administratora Firebase . Aby zainstalować je lokalnie, przejdź do folderu functions i uruchom:

npm install

Przyjrzyjmy się teraz plikowi index.js :

indeks.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.

Zaimportujemy wymagane moduły, a następnie napiszemy trzy funkcje w miejsce TODO. Zacznijmy od zaimportowania wymaganych modułów Node.

7. Zaimportuj moduły Cloud Functions i Firebase Admin

Podczas tych zajęć z programowania wymagane będą dwa moduły: firebase-functions umożliwia pisanie wyzwalaczy i dzienników Cloud Functions, natomiast firebase-admin umożliwia korzystanie z platformy Firebase na serwerze z dostępem administratora w celu wykonywania takich czynności, jak zapisywanie w Cloud Firestore lub wysyłanie powiadomień FCM.

W pliku index.js zamień pierwsze TODO na następujące:

indeks.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.

Pakiet Firebase Admin SDK można skonfigurować automatycznie po wdrożeniu w środowisku Cloud Functions lub innych kontenerach Google Cloud Platform, a dzieje się tak, gdy wywołujemy admin.initializeApp() bez argumentów.

Teraz dodajmy funkcję uruchamianą, gdy użytkownik loguje się po raz pierwszy w aplikacji czatu, a także dodamy wiadomość na czacie powitalną użytkownika.

8. Witamy nowych użytkowników

Struktura wiadomości czatu

Wiadomości publikowane na czacie FriendlyChat są przechowywane w Cloud Firestore. Przyjrzyjmy się strukturze danych, której używamy w wiadomości. Aby to zrobić, opublikuj nową wiadomość na czacie o treści „Hello World”:

11f5a676fbb1a69a.png

Powinno to wyglądać następująco:

fe6d1c020d0744cf.png

W konsoli Firebase kliknij bazę danych Firestore w sekcji Kompilacja . Powinieneś zobaczyć kolekcję wiadomości i jeden dokument zawierający wiadomość, którą napisałeś:

442c9c10b5e2b245.png

Jak widać, wiadomości czatu są przechowywane w Cloud Firestore jako dokument z name , profilePicUrl , text i timestamp dodanymi do kolekcji messages .

Dodawanie wiadomości powitalnych

Pierwsza funkcja chmury dodaje wiadomość witającą nowych użytkowników na czacie. W tym celu możemy wykorzystać wyzwalacz functions.auth().onCreate , który uruchamia tę funkcję za każdym razem, gdy użytkownik loguje się po raz pierwszy w aplikacji Firebase. Dodaj funkcję addWelcomeMessages do swojego pliku index.js :

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

Dodanie tej funkcji do specjalnego obiektu exports to sposób, w jaki Node udostępnia tę funkcję poza bieżącym plikiem i jest wymagany w przypadku Cloud Functions.

W powyższej funkcji dodajemy do listy wiadomości na czacie nową wiadomość powitalną wysłaną przez „Firebase Bot”. Robimy to za pomocą metody add w kolekcji messages w Cloud Firestore, gdzie przechowywane są wiadomości z czatu.

Ponieważ jest to operacja asynchroniczna, musimy zwrócić Promise wskazującą, kiedy Cloud Firestore zakończy zapisywanie, aby funkcje Cloud Functions nie uruchomiły się zbyt wcześnie.

Wdrażaj funkcje chmury

Cloud Functions będą aktywne dopiero po ich wdrożeniu. Aby to zrobić, uruchom to w wierszu poleceń:

firebase deploy --only functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Przetestuj funkcję

Po pomyślnym wdrożeniu funkcji konieczne będzie zalogowanie się użytkownika po raz pierwszy.

  1. Otwórz aplikację w przeglądarce, korzystając z adresu URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Będąc nowym użytkownikiem, zaloguj się po raz pierwszy w swojej aplikacji za pomocą przycisku Zaloguj .
  • Jeśli już zalogowałeś się do aplikacji, możesz otworzyć Uwierzytelnianie Konsoli Firebase i usunąć swoje konto z listy użytkowników. Następnie zaloguj się ponownie.

262535d1b1223c65.png

  1. Po zalogowaniu automatycznie powinna wyświetlić się wiadomość powitalna:

1c70e0d64b23525b.png

9. Moderacja zdjęć

Użytkownicy mogą przesyłać na czacie wszelkiego rodzaju obrazy i zawsze ważne jest, aby moderować obraźliwe obrazy, szczególnie na publicznych platformach społecznościowych. W FriendlyChat obrazy publikowane na czacie są przechowywane w Google Cloud Storage .

Dzięki Cloud Functions możesz wykrywać nowe przesłane obrazy za pomocą wyzwalacza functions.storage().onFinalize . Będzie to uruchamiane za każdym razem, gdy nowy plik zostanie przesłany lub zmodyfikowany w Cloud Storage.

Aby moderować obrazy, przejdziemy przez następujący proces:

  1. Sprawdź, czy obraz jest oznaczony jako dla dorosłych lub przedstawiający przemoc, korzystając z interfejsu Cloud Vision API .
  2. Jeśli obraz został oflagowany, pobierz go w działającej instancji Functions.
  3. Rozmyj obraz za pomocą ImageMagick .
  4. Prześlij zamazany obraz do Cloud Storage.

Włącz interfejs Cloud Vision API

Ponieważ w tej funkcji będziemy używać interfejsu API Google Cloud Vision, musisz włączyć interfejs API w swoim projekcie Firebase. Kliknij ten link , następnie wybierz projekt Firebase i włącz interfejs API:

5c77fee51ec5de49.png

Zainstaluj zależności

Do moderowania obrazów użyjemy biblioteki klienta Google Cloud Vision dla Node.js, @google-cloud/vision , aby uruchomić obrazy za pośrednictwem interfejsu API Cloud Vision w celu wykrycia nieodpowiednich obrazów.

Aby zainstalować ten pakiet w aplikacji Cloud Functions, uruchom następujące polecenie npm install --save . Upewnij się, że robisz to z katalogu functions .

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

Spowoduje to zainstalowanie pakietu lokalnie i dodanie go jako zadeklarowanej zależności w pliku package.json .

Importuj i konfiguruj zależności

Aby zaimportować zainstalowane zależności i niektóre podstawowe moduły Node.js ( path , os i fs ), których będziemy potrzebować w tej sekcji, dodaj następujące wiersze na górze pliku index.js :

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

Ponieważ Twoja funkcja będzie działać w środowisku Google Cloud, nie ma potrzeby konfigurowania bibliotek Cloud Storage i Cloud Vision: zostaną one skonfigurowane automatycznie do korzystania z Twojego projektu.

Wykrywanie nieodpowiednich obrazów

Będziesz używać wyzwalacza functions.storage.onChange Cloud Functions, który uruchamia Twój kod natychmiast po utworzeniu lub zmodyfikowaniu pliku lub folderu w zasobniku Cloud Storage. Dodaj funkcję blurOffensiveImages do swojego pliku index.js :

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

Pamiętaj, że dodaliśmy konfigurację instancji Cloud Functions, która będzie uruchamiać tę funkcję. W przypadku .runWith({memory: '2GB'}) żądamy, aby instancja otrzymała 2 GB pamięci zamiast domyślnej, ponieważ ta funkcja intensywnie zużywa pamięć.

Po uruchomieniu tej funkcji obraz jest przepuszczany przez interfejs API Cloud Vision w celu wykrycia, czy jest oznaczony jako przeznaczony dla dorosłych lub zawierający przemoc. Jeśli na podstawie tych kryteriów obraz zostanie wykryty jako nieodpowiedni, zamazujemy go, co odbywa się za pomocą funkcji blurImage , jak zobaczymy dalej.

Rozmycie obrazu

Dodaj następującą funkcję blurImage w swoim pliku index.js :

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

W powyższej funkcji plik binarny obrazu jest pobierany z Cloud Storage. Obraz jest następnie rozmazany za pomocą narzędzia convert ImageMagick, a rozmyta wersja jest ponownie przesyłana do Storage Bucket. Następnie usuwamy plik z instancji Cloud Functions, aby zwolnić trochę miejsca na dysku, a robimy to, ponieważ ta sama instancja Cloud Functions może zostać ponownie wykorzystana, a jeśli pliki nie zostaną wyczyszczone, może zabraknąć miejsca na dysku. Na koniec do wiadomości na czacie dodajemy wartość logiczną wskazującą, że obraz był moderowany, co spowoduje odświeżenie wiadomości na kliencie.

Wdróż funkcję

Funkcja będzie aktywna dopiero po jej wdrożeniu. W wierszu poleceń uruchom firebase deploy --only functions :

firebase deploy --only functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Przetestuj funkcję

Po pomyślnym wdrożeniu funkcji:

  1. Otwórz aplikację w przeglądarce, korzystając z adresu URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Po zalogowaniu się do aplikacji prześlij obraz: 4db9fdab56703e4a.png
  3. Wybierz najlepszy obraźliwy obraz do przesłania (lub możesz użyć tego mięsa jedzącego Zombie !), a po kilku chwilach powinieneś zobaczyć odświeżenie posta z rozmytą wersją obrazu: 83dd904fbaf97d2b.png

10. Powiadomienia o nowych wiadomościach

W tej sekcji dodasz Funkcję Cloud, która wysyła powiadomienia do uczestników czatu, gdy zostanie opublikowana nowa wiadomość.

Korzystając z Firebase Cloud Messaging (FCM), możesz niezawodnie wysyłać powiadomienia do użytkowników na różnych platformach. Aby wysłać powiadomienie do użytkownika, potrzebujesz jego tokena urządzenia FCM. Aplikacja internetowa do czatu, z której korzystamy, zbiera już tokeny urządzeń od użytkowników, gdy otwierają oni aplikację po raz pierwszy w nowej przeglądarce lub urządzeniu. Te tokeny są przechowywane w Cloud Firestore w kolekcji fcmTokens .

Jeśli chcesz dowiedzieć się, jak uzyskać tokeny urządzeń FCM w aplikacji internetowej, możesz skorzystać z laboratorium Firebase Web Codelab .

Wysyłaj powiadomienia

Aby wykryć publikację nowych wiadomości, użyjesz wyzwalacza functions.firestore.document().onCreate Cloud Functions, który uruchamia Twój kod po utworzeniu nowego obiektu w danej ścieżce Cloud Firestore. Dodaj funkcję sendNotifications do swojego pliku index.js :

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

W powyższej Funkcji zbieramy tokeny urządzeń wszystkich użytkowników z bazy danych Cloud Firestore i wysyłamy powiadomienie do każdego z nich za pomocą funkcji admin.messaging().sendToDevice .

Oczyść tokeny

Na koniec chcemy usunąć tokeny, które nie są już ważne. Dzieje się tak, gdy token, który otrzymaliśmy kiedyś od użytkownika, nie jest już używany przez przeglądarkę lub urządzenie. Dzieje się tak na przykład, jeśli użytkownik cofnął pozwolenie na powiadamianie dla sesji przeglądarki. Aby to zrobić, dodaj następującą funkcję cleanupTokens w swoim pliku index.js :

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

Wdróż funkcję

Funkcja będzie aktywna dopiero po jej wdrożeniu. Aby ją wdrożyć, uruchom tę komendę w wierszu poleceń:

firebase deploy --only functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Przetestuj funkcję

  1. Po pomyślnym wdrożeniu funkcji otwórz aplikację w przeglądarce, korzystając z adresu URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Jeśli logujesz się do aplikacji po raz pierwszy, pamiętaj o włączeniu powiadomień po wyświetleniu monitu: 8b9d0c66dc36153d.png
  3. Zamknij kartę aplikacji czatu lub wyświetl inną kartę: Powiadomienia pojawiają się tylko wtedy, gdy aplikacja działa w tle. Jeśli chcesz dowiedzieć się jak odbierać wiadomości, gdy Twoja aplikacja jest na pierwszym planie, zapoznaj się z naszą dokumentacją .
  4. Korzystając z innej przeglądarki (lub okna incognito), zaloguj się do aplikacji i opublikuj wiadomość. Powinieneś zobaczyć powiadomienie wyświetlone w pierwszej przeglądarce: 45282ab12b28b926.png

11. Gratulacje!

Użyłeś pakietu SDK Firebase dla Cloud Functions i dodałeś komponenty po stronie serwera do aplikacji do czatu.

Co omówiliśmy

  • Tworzenie funkcji w chmurze przy użyciu pakietu SDK Firebase dla funkcji w chmurze.
  • Uruchamiaj funkcje chmury w oparciu o zdarzenia Auth, Cloud Storage i Cloud Firestore.
  • Dodaj obsługę Firebase Cloud Messaging do swojej aplikacji internetowej.
  • Wdrażaj funkcje chmury za pomocą interfejsu wiersza polecenia Firebase.

Następne kroki

Ucz się więcej