1. Przegląd
W tym laboratorium kodowania dowiesz się, jak korzystać z Cloud Functions dla Firebase, aby dodawać funkcje do aplikacji internetowej czatu przez wysyłanie powiadomień do użytkowników aplikacji czatu.
Czego się nauczysz
- Utwórz Google Cloud Functions przy użyciu Firebase SDK.
- Wyzwalaj 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 musisz włączyć rozliczanie projektu 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 w tym celu.
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 
cloud-functions-start z przykładowego katalogu kodu. Ten katalog zawiera kod startowy dla codelab, który składa się z w pełni funkcjonalnej aplikacji Chat Web App.
3. Utwórz projekt Firebase i skonfiguruj swoją aplikację
Utwórz projekt
W konsoli Firebase kliknij Dodaj projekt i nazwij go FriendlyChat .
Kliknij Utwórz projekt .
Przejdź na plan Blaze
Aby korzystać z Cloud Functions dla Firebase, musisz zaktualizować 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. Czynności opisane w tym laboratorium kodu będą mieścić się w limitach użycia warstwy bezpłatnej. Zobaczysz jednak niewielkie opłaty ( około 0,03 USD ) za usługę Cloud Storage, która jest używana do przechowywania obrazów kompilacji Cloud Functions.
Jeśli nie masz dostępu do karty kredytowej lub nie chcesz kontynuować planu Blaze, rozważ użycie pakietu Firebase Emulator Suite , który pozwoli Ci bezpłatnie emulować Cloud Functions na komputerze lokalnym.
Włącz autoryzację Google
Aby umożliwić użytkownikom logowanie się w aplikacji, użyjemy autoryzacji Google, która musi być włączona.
W konsoli Firebase otwórz sekcję Kompilacja > Uwierzytelnianie > karta 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 też ustawić publiczną nazwę swojej aplikacji na Przyjazny czat :
Włącz przechowywanie w chmurze
Aplikacja korzysta z Cloud Storage do przesyłania zdjęć. Aby włączyć Cloud Storage w swoim projekcie Firebase, przejdź do sekcji Storage i kliknij przycisk Rozpocznij . Wykonaj podane tam czynności, a dla lokalizacji Cloud Storage będzie używana wartość domyślna. Kliknij Gotowe później.
Dodaj aplikację internetową
W Firebase Console 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 Hostingu Firebase, a następnie zarejestruj aplikację i kliknij Dalej , aby wykonać pozostałe czynności, na koniec klikając Kontynuuj do konsoli .
4. Zainstaluj interfejs wiersza poleceń Firebase
Interfejs wiersza poleceń Firebase (CLI) umożliwia lokalną obsługę aplikacji internetowej oraz wdrażanie aplikacji internetowej i Cloud Functions.
Aby zainstalować lub zaktualizować CLI, uruchom następującą komendę npm:
npm -g install firebase-tools
Aby sprawdzić, czy CLI zostało poprawnie zainstalowane, 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 zaktualizować, jak pokazano powyżej.
Autoryzuj Firebase CLI, uruchamiając:
firebase login
Upewnij się, że znajdujesz się w katalogu cloud-functions-start , a następnie skonfiguruj Firebase CLI do korzystania z projektu Firebase:
firebase use --add
Następnie wybierz identyfikator projektu i postępuj zgodnie z instrukcjami. Po wyświetleniu monitu możesz wybrać dowolny alias, na przykład codelab .
5. Wdróż i uruchom aplikację internetową
Po zaimportowaniu i skonfigurowaniu projektu możesz po raz pierwszy uruchomić aplikację internetową! 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ą
Ostatni wiersz powinien wyświetlać adres URL hostingu. Aplikacja internetowa powinna być teraz obsługiwana z tego adresu URL, który powinien mieć postać https://<identyfikator-projektu>.firebaseapp.com. Otwórz to. Powinieneś zobaczyć działający interfejs aplikacji czatu.
Zaloguj się do aplikacji za pomocą przycisku ZALOGUJ SIĘ Z GOOGLE i możesz dodać kilka wiadomości i opublikować zdjęcia:
Jeśli logujesz się do aplikacji po raz pierwszy w nowej przeglądarce, upewnij się, że zezwalasz na powiadomienia po wyświetleniu monitu: 
W późniejszym czasie będziemy musieli włączyć powiadomienia.
Jeśli przypadkowo kliknąłeś Zablokuj , możesz zmienić to ustawienie, klikając przycisk 🔒 Zabezpiecz po lewej stronie adresu URL w Omnibarze Chrome i przełączając pasek obok Powiadomień :
Teraz dodamy kilka funkcji za pomocą pakietu Firebase SDK for Cloud Functions.
6. Katalog funkcji
Cloud Functions pozwala łatwo mieć kod działający w chmurze bez konieczności konfigurowania serwera. Omówimy, jak tworzyć funkcje reagujące na zdarzenia bazy danych Firebase Auth, Cloud Storage i Firebase Firestore. Zacznijmy od autoryzacji.
Podczas korzystania z pakietu Firebase SDK for Cloud Functions kod funkcji będzie przechowywany w katalogu functions (domyślnie). Twój kod Functions jest również aplikacją Node.js i dlatego potrzebuje pliku package.json , który zawiera pewne informacje o Twojej aplikacji i wyświetla listę zależności.
Aby Ci to ułatwić, utworzyliśmy już plik functions/index.js do którego trafi Twój kod. Zanim przejdziesz dalej, przejrzyj ten plik.
cd functions
ls
Jeśli nie jesteś zaznajomiony z Node.js , pomocne byłoby zapoznanie się z nim przed kontynuowaniem pracy z codelab.
Plik package.json zawiera już dwie wymagane zależności: pakiet Firebase SDK for Cloud Functions i Firebase Admin SDK . 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 zamiast TODO. Zacznijmy od zaimportowania wymaganych modułów Node.
7. Zaimportuj moduły Cloud Functions i Firebase Admin
Podczas tego laboratorium będą wymagane dwa moduły: firebase-functions umożliwia pisanie wyzwalaczy i dzienników Cloud Functions, a firebase-admin umożliwia korzystanie z platformy Firebase na serwerze z dostępem administratora do wykonywania działań, takich jak zapisywanie w Cloud Firestore lub wysyłanie powiadomień FCM.
W pliku index.js zastąp pierwsze TODO następującym:
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. Dzieje się tak, gdy wywołujemy admin.initializeApp() bez argumentów.
Teraz dodajmy funkcję, która jest uruchamiana, gdy użytkownik loguje się po raz pierwszy w aplikacji czatu, i dodamy wiadomość czatu, aby powitać użytkownika.
8. Witamy nowych użytkowników
Struktura wiadomości czatu
Wiadomości publikowane w kanale czatu FriendlyChat są przechowywane w Cloud Firestore. Rzućmy okiem na strukturę danych, której używamy w wiadomości. Aby to zrobić, opublikuj nową wiadomość na czacie o treści „Hello World”:
Powinno to wyglądać tak:
W konsoli Firebase kliknij opcję Baza danych Firestore w sekcji Kompilacja . Powinieneś zobaczyć kolekcję wiadomości i jeden dokument zawierający wiadomość, którą napisałeś:
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 w chmurze dodaje wiadomość, która wita nowych użytkowników na czacie. W tym celu możemy użyć wyzwalacza 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 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 Node na udostępnienie funkcji poza bieżącym plikiem i jest wymagany w Cloud Functions.
W powyższej funkcji dodajemy nową wiadomość powitalną wysłaną przez „Firebase Bot” do listy wiadomości na czacie. Robimy to za pomocą metody add w kolekcji messages w Cloud Firestore, w której przechowywane są wiadomości z czatu.
Ponieważ jest to operacja asynchroniczna, musimy zwrócić obietnicę wskazującą, kiedy Cloud Firestore zakończy pisanie, aby funkcje Cloud Functions nie zostały wykonane zbyt wcześnie.
Wdróż 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 musisz mieć użytkownika, który loguje się po raz pierwszy.
- Otwórz swoją aplikację w przeglądarce przy użyciu adresu URL hostingu (w postaci
https://<project-id>.firebaseapp.com). - Z 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.
- Po zalogowaniu się automatycznie powinna wyświetlić się wiadomość powitalna:
9. Moderacja zdjęć
Użytkownicy mogą przesyłać wszelkiego rodzaju obrazy na czacie i zawsze ważne jest, aby moderować obraźliwe obrazy, zwłaszcza 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ć przesłane nowe obrazy za pomocą wyzwalacza functions.storage().onFinalize . Będzie to działać za każdym razem, gdy nowy plik zostanie przesłany lub zmodyfikowany w Cloud Storage.
Aby moderować obrazy, wykonamy następujący proces:
- Sprawdź, czy obraz jest oznaczony jako dla dorosłych lub przedstawiający przemoc, używając interfejsu Cloud Vision API .
- Jeśli obraz został oflagowany, pobierz go na działającą instancję usługi Functions.
- Rozmyj obraz za pomocą ImageMagick .
- Prześlij rozmyty obraz do Cloud Storage.
Włącz interfejs Cloud Vision API
Ponieważ w tej funkcji będziemy używać interfejsu Google Cloud Vision API, musisz włączyć ten interfejs API w swoim projekcie Firebase. Kliknij ten link , a następnie wybierz swój projekt Firebase i włącz interfejs API:
Zainstaluj zależności
Aby moderować obrazy, użyjemy Biblioteki klienta Google Cloud Vision dla Node.js, @google-cloud/vision , aby uruchamiać obrazy przez interfejs 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 początku 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, gdy tylko plik lub folder zostanie utworzony lub zmodyfikowany w zasobniku Cloud Storage. Dodaj funkcję blurOffensiveImages do 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 pewną 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 wartości domyślnej, ponieważ ta funkcja wymaga dużo pamięci.
Po uruchomieniu funkcji obraz jest przepuszczany przez interfejs Cloud Vision API w celu wykrycia, czy jest oznaczony jako dorosły lub brutalny. Jeśli obraz zostanie wykryty jako nieodpowiedni na podstawie tych kryteriów, rozmywamy obraz, co jest wykonywane w funkcji blurImage , jak zobaczymy dalej.
Rozmycie obrazu
Dodaj następującą funkcję blurImage w 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. Robimy to, ponieważ ta sama instancja Cloud Functions może zostać ponownie użyta, a jeśli pliki nie zostaną wyczyszczone, może zabraknąć miejsca na dysku. Na koniec dodajemy wartość logiczną do wiadomości na czacie 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:
- Otwórz swoją aplikację w przeglądarce przy użyciu adresu URL hostingu (w postaci
https://<project-id>.firebaseapp.com). - Po zalogowaniu się do aplikacji prześlij obraz:
- Wybierz najbardziej obraźliwy obraz do przesłania (lub użyj tego mięsożernego zombie !), a po kilku chwilach Twój post powinien zostać odświeżony z rozmytą wersją obrazu:
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. Używana przez nas aplikacja internetowa do czatu już zbiera tokeny urządzeń od użytkowników, gdy otwierają aplikację po raz pierwszy w nowej przeglądarce lub na nowym urządzeniu. Te tokeny są przechowywane w Cloud Firestore w kolekcji fcmTokens .
Jeśli chcesz dowiedzieć się, jak uzyskać tokeny urządzenia FCM w aplikacji internetowej, możesz przejść przez Firebase Web Codelab .
Wysyłaj powiadomienia
Aby wykryć, kiedy publikowane są nowe wiadomości, użyjesz wyzwalacza functions.firestore.document().onCreate Cloud Functions, który uruchamia Twój kod, gdy nowy obiekt zostanie utworzony w danej ścieżce Cloud Firestore. Dodaj funkcję sendNotifications do 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 kiedyś otrzymaliśmy od użytkownika, nie jest już używany przez przeglądarkę lub urządzenie. Na przykład dzieje się tak, jeśli użytkownik cofnął pozwolenie na powiadomienie dla sesji przeglądarki. Aby to zrobić, dodaj następującą funkcję cleanupTokens do 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, a aby ją wdrożyć, 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: 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ę
- Po pomyślnym wdrożeniu funkcji otwórz aplikację w przeglądarce przy użyciu adresu URL hostingu (w postaci
https://<project-id>.firebaseapp.com). - Jeśli logujesz się do aplikacji po raz pierwszy, upewnij się, że zezwalasz na powiadomienia po wyświetleniu monitu:
- 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 działa na pierwszym planie, zajrzyj do naszej dokumentacji .
- Za pomocą innej przeglądarki (lub okna incognito) zaloguj się do aplikacji i opublikuj wiadomość. Powinieneś zobaczyć powiadomienie wyświetlane przez pierwszą przeglądarkę:
11. Gratulacje!
Użyłeś pakietu Firebase SDK for Cloud Functions i dodałeś komponenty po stronie serwera do aplikacji czatu.
Co omówiliśmy
- Tworzenie funkcji Cloud Functions przy użyciu Firebase SDK for Cloud Functions.
- Wyzwalaj funkcje chmury w oparciu o zdarzenia Auth, Cloud Storage i Cloud Firestore.
- Dodaj obsługę Firebase Cloud Messaging do swojej aplikacji internetowej.
- Wdrażaj Cloud Functions przy użyciu Firebase CLI.
Następne kroki
- Dowiedz się więcej o innych typach wyzwalaczy Cloud Functions .
- Korzystaj z Firebase i Cloud Functions we własnej aplikacji.