Cette page a été traduite par l'API Cloud Translation.

Envoyer des notifications pour une application Web à l'aide de Cloud Messaging et Cloud Functions

1. Présentation

Dans cet atelier de programmation, vous allez apprendre à utiliser Cloud Functions for Firebase pour ajouter des fonctionnalités à une application Web de chat en envoyant des notifications aux utilisateurs de cette application.

Points abordés

Créer des fonctions Google Cloud Functions avec le SDK Firebase
Déclencher des fonctions Cloud Functions basées sur des événements Auth, Cloud Storage et Cloud Firestore
Rendre votre application Web compatible avec Firebase Cloud Messaging

Prérequis

Une carte de crédit. Cloud Functions for Firebase nécessite la formule Firebase Blaze, ce qui signifie que vous devez activer la facturation sur votre projet Firebase à l'aide d'une carte de crédit.
L'IDE/éditeur de texte de votre choix, tel que WebStorm, Atom ou Sublime.
Un terminal permettant d'exécuter des commandes shell et avec NodeJS v9 installé
Un navigateur tel que Chrome.
L'exemple de code Pour ce faire, consultez l'étape suivante.

2. Obtenir l'exemple de code

Clonez le dépôt GitHub à partir de la ligne de commande:

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

Importer l'application de démarrage

À l'aide de votre IDE, ouvrez ou importez le répertoire cloud-functions-start à partir du répertoire de l'exemple de code. Ce répertoire contient le code de démarrage de l'atelier de programmation, qui se compose d'une application Web Chat entièrement fonctionnelle.

3. Créer un projet Firebase et configurer votre application

Créer un projet

Dans la console Firebase, cliquez sur Ajouter un projet et nommez-le FriendlyChat.

Cliquez sur Créer un projet.

Passer à la formule Blaze

Pour que vous puissiez utiliser Cloud Functions for Firebase et Cloud Storage for Firebase, votre projet Firebase doit disposer du forfait avec paiement à l'usage (Blaze), ce qui signifie qu'il est associé à un compte de facturation Cloud.

Un compte de facturation Cloud nécessite un mode de paiement, comme une carte de crédit.
Si vous débutez avec Firebase et Google Cloud, vérifiez si vous pouvez bénéficier d'un crédit de 300 $ et d'un compte de facturation Cloud en essai gratuit.
Si vous suivez cet atelier de programmation dans le cadre d'un événement, demandez à votre organisateur si des crédits Cloud sont disponibles.

Si vous n'avez pas accès à une carte de crédit ou si vous ne souhaitez pas continuer avec le forfait Blaze, envisagez d'utiliser la suite Emulator Firebase, qui vous permettra d'émuler Cloud Functions gratuitement sur votre ordinateur local.

Tous les projets Firebase, y compris ceux du forfait Blaze, ont toujours accès aux quotas d'utilisation sans frais pour Cloud Functions. Les étapes décrites dans cet atelier de programmation sont soumises aux limites d'utilisation de la version sans frais. Cependant, des frais minimes (environ 0,03 $) seront appliqués à Cloud Storage, utilisé pour héberger vos images de compilation Cloud Functions.

Pour passer à la formule Blaze, procédez comme suit:

Dans la console Firebase, sélectionnez l'option Mettre à niveau votre forfait.
Sélectionnez le forfait Blaze. Suivez les instructions à l'écran pour associer un compte de facturation Cloud à votre projet.
Si vous avez dû créer un compte de facturation Cloud pour cette mise à niveau, vous devrez peut-être revenir au processus de mise à niveau dans la console Firebase pour effectuer la mise à niveau.

Activer Google Auth

Pour permettre aux utilisateurs de se connecter à l'application, nous allons utiliser Google Auth, qui doit être activé.

Dans la console Firebase, ouvrez la section Build > Authentication > Sign-in method (Authentification > Méthode de connexion) (ou cliquez ici pour y accéder). Ensuite, activez le fournisseur de connexion Google, puis cliquez sur Save (Enregistrer). Cela permettra aux utilisateurs de se connecter à l'application Web avec leur compte Google.

De plus, n'hésitez pas à définir le nom public de votre application sur Friendly Chat:

Configurer Cloud Storage for Firebase

L'application utilise Cloud Storage pour importer les photos.

Voici comment configurer Cloud Storage for Firebase dans votre projet Firebase:

Dans le panneau de gauche de la console Firebase, développez Build (Compiler), puis sélectionnez Storage (Stockage).
Cliquez sur Commencer.
Sélectionnez un emplacement pour votre bucket Storage par défaut.
Les buckets dans US-WEST1, US-CENTRAL1 et US-EAST1 peuvent profiter du niveau "Toujours gratuit" pour Google Cloud Storage. Les buckets situés dans toutes les autres zones géographiques sont soumis aux tarifs et à l'utilisation de Google Cloud Storage.
Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à votre bucket Storage.
Cliquez sur Créer.

Ajouter une application Web

Dans la console Firebase, ajoutez une application Web. Pour ce faire, accédez aux Paramètres du projet et faites défiler la page jusqu'à Ajouter une application. Choisissez "Web" comme plate-forme et cochez la case permettant de configurer Firebase Hosting, puis enregistrez l'application et cliquez sur Suivant pour effectuer les étapes restantes, puis sur Accéder à la console.

4. Installer l'interface de ligne de commande Firebase

L'interface de ligne de commande (CLI) Firebase vous permet de diffuser l'application Web en local et de la déployer, ainsi que Cloud Functions.

Pour installer ou mettre à niveau la CLI, exécutez la commande npm suivante :

npm -g install firebase-tools

Pour vérifier que la CLI a été installée correctement, ouvrez une console et exécutez la commande suivante:

firebase --version

Assurez-vous de disposer de la version 4.0.0 (ou d'une version ultérieure) de la CLI Firebase pour être certain de bénéficier des toutes dernières fonctionnalités requises pour Cloud Functions. Si ce n'est pas le cas, exécutez npm install -g firebase-tools pour effectuer la mise à niveau, comme indiqué ci-dessus.

Autorisez la CLI Firebase en exécutant la commande suivante:

firebase login

Assurez-vous d'être dans le répertoire cloud-functions-start, puis configurez la CLI Firebase pour utiliser votre projet Firebase :

firebase use --add

Sélectionnez ensuite l'ID de votre projet et suivez les instructions. Lorsque vous y êtes invité, vous pouvez choisir n'importe quel alias, par exemple codelab.

5. Déployer et exécuter l'application Web

Maintenant que vous avez importé et configuré votre projet, vous êtes prêt à exécuter l'application Web pour la première fois. Ouvrez une fenêtre de terminal, accédez au dossier cloud-functions-start, puis déployez l'application Web sur Firebase Hosting à l'aide de la commande suivante:

firebase deploy --except functions

La console doit afficher le résultat suivant :

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

Ouvrir l'application Web

La dernière ligne doit afficher l'URL d'hébergement. L'application Web doit désormais être diffusée à partir de cette URL, qui doit se présenter sous la forme https://<project-id>.firebaseapp.com. Ouvrez-la. L'interface utilisateur d'une application de chat s'affiche, et elle est fonctionnelle.

Connectez-vous à l'application via le bouton SIGN-IN WITH GOOGLE (SE CONNECTER AVEC GOOGLE). N'hésitez pas à y publier des messages et des images :

Si vous vous connectez à l'application pour la première fois dans un nouveau navigateur, assurez-vous d'autoriser les notifications lorsque vous y êtes invité:

Les notifications devront être activées ultérieurement.

Si vous avez sélectionné Block (Bloquer) par erreur, vous pouvez modifier ce paramètre en cliquant sur le bouton 🔒 Secure (Sécurisé) à gauche de l'URL dans l'omnibox de Chrome, puis en activant la barre à côté de Notifications :

Nous allons maintenant ajouter des fonctionnalités à l'aide du SDK Firebase pour Cloud Functions.

6. Répertoire Functions

Cloud Functions vous permet d'exécuter facilement du code dans le cloud sans avoir à configurer de serveur. Nous allons voir comment créer des fonctions qui réagissent aux événements de base de données Firebase Auth, Cloud Storage et Firebase Firestore. Commençons par Auth.

Par défaut, le SDK Firebase pour Cloud Functions stocke le code Functions dans le répertoire functions. Votre code Functions est également une application Node.js. Il a donc besoin d'un élément package.json qui fournit des informations sur votre application et liste les dépendances.

Pour vous faciliter la tâche, nous avons déjà créé le fichier functions/index.js dans lequel votre code sera placé. N'hésitez pas à l'inspecter avant de continuer.

cd functions
ls

Si vous ne connaissez pas Node.js, nous vous recommandons de vous renseigner sur cette technologie avant de poursuivre l'atelier de programmation.

Le fichier package.json répertorie déjà deux dépendances obligatoires: le SDK Firebase pour Cloud Functions et le SDK Admin Firebase. Pour les installer localement, accédez au dossier functions et exécutez la commande suivante:

npm install

Examinons maintenant le fichier index.js :

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.

Nous allons importer les modules requis, puis écrire trois fonctions à la place de TODO. Commençons par importer les modules Node requis.

7. Importer les modules Cloud Functions et Admin Firebase

Deux modules seront nécessaires pour cet atelier de programmation : firebase-functions permet d'écrire des déclencheurs et des journaux Cloud Functions, tandis que firebase-admin permet d'utiliser la plate-forme Firebase sur un serveur avec accès administrateur pour effectuer des actions telles que l'écriture dans Cloud Firestore ou l'envoi de notifications FCM.

Dans le fichier index.js, remplacez la première valeur TODO par ce qui suit:

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.

Le SDK Admin Firebase peut être configuré automatiquement lorsqu'il est déployé dans un environnement Cloud Functions ou d'autres conteneurs Google Cloud Platform. Cela se produit lorsque nous appelons admin.initializeApp() sans arguments.

Ajoutons maintenant une fonction qui s'exécute lorsqu'un utilisateur se connecte pour la première fois à l'application de chat, et ajoutons un message de chat pour souhaiter la bienvenue à l'utilisateur.

8. Souhaiter la bienvenue aux nouveaux utilisateurs

Structure des messages du chat

Les messages publiés sur le flux de chat Friendly Chat sont conservés dans Cloud Firestore. Examinons la structure de données que nous utilisons pour un message. Pour ce faire, publiez un nouveau message dans le chat indiquant "Hello World" :

Vous devriez obtenir ce résultat :

Dans la console Firebase, cliquez sur Base de données Firestore sous la section Créer. Vous devriez voir la collection de messages et un document contenant le message que vous avez écrit:

Comme vous pouvez le voir, les messages de chat sont stockés dans Cloud Firestore sous la forme d'un document avec les attributs name, profilePicUrl, text et timestamp ajoutés à la collection messages.

Ajouter des messages de bienvenue

La première fonction Cloud ajoute un message de bienvenue aux nouveaux utilisateurs. Pour ce faire, nous pouvons utiliser le déclencheur functions.auth().onCreate, qui exécute la fonction chaque fois qu'un utilisateur se connecte pour la première fois dans l'application Firebase. Ajoutez la fonction addWelcomeMessages dans votre fichier index.js :

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

Node permet d'ajouter cette fonction à l'objet spécial exports pour la rendre accessible en dehors du fichier actuel. Elle est requise pour Cloud Functions.

Dans la fonction ci-dessus, nous ajoutons un nouveau message de bienvenue publié par "Firebase Bot" à la liste des messages de chat. Pour ce faire, nous allons utiliser la méthode add sur la collection messages dans Cloud Firestore, où sont stockés les messages du chat.

Comme il s'agit d'une opération asynchrone, nous devons renvoyer la Promise indiquant quand Cloud Firestore a terminé l'écriture pour que les fonctions Cloud ne s'exécutent pas trop tôt.

Déployer Cloud Functions

Les fonctions Cloud ne sont actives qu'après leur déploiement. Pour ce faire, exécutez la commande suivante dans la ligne de commande:

firebase deploy --only functions

La console doit afficher le résultat suivant :

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

Tester la fonction

Une fois la fonction déployée, vous devez attendre qu'un utilisateur se connecte pour la première fois.

Ouvrez votre application dans votre navigateur à l'aide de l'URL d'hébergement (au format https://<project-id>.firebaseapp.com).
Avec un nouvel utilisateur, connectez-vous pour la première fois à votre application à l'aide du bouton Connexion.

Si vous vous êtes déjà connecté à l'application, vous pouvez ouvrir Firebase Console Authentication (Authentification de la console Firebase) et supprimer votre compte de la liste des utilisateurs. puis reconnectez-vous.

Une fois connecté, un message de bienvenue devrait s'afficher automatiquement:

9. Modération des images

Les utilisateurs peuvent importer tous types d'images dans le chat, et il est toujours important de modérer les images choquantes, en particulier sur les réseaux sociaux publics. Dans FriendlyChat, les images publiées dans le chat sont stockées dans des buckets Cloud Storage.

Avec Cloud Functions, vous pouvez détecter de nouvelles importations d'images à l'aide du déclencheur functions.storage().onFinalize. Il s'exécute à chaque fois qu'un nouveau fichier est importé ou modifié dans Cloud Storage.

Pour modérer les images, nous suivons le processus suivant :

Avec l'API Cloud Vision, vérifiez si l'image a été signalée comme contenu pour adultes ou comme contenu violent.
Si tel est le cas, téléchargez-la dans l'instance Functions en cours d'exécution.
Floutez l'image à l'aide de l'outil ImageMagick.
Importez l'image floutée dans Cloud Storage.

Activer l'API Cloud Vision

Comme nous allons utiliser l'API Google Cloud Vision dans cette fonction, vous devez l'activer dans votre projet Firebase. Suivez ce lien, puis sélectionnez votre projet Firebase et activez l'API :

Installer les dépendances

Pour modérer les images, nous allons utiliser la bibliothèque cliente Google Cloud Vision pour Node.js (@google-cloud/vision) afin d'analyser les images via l'API Cloud Vision afin de détecter les images inappropriées.

Pour installer ce package dans votre application Cloud Functions, exécutez la commande npm install --save suivante. Assurez-vous de le faire à partir du répertoire functions.

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

Le package sera installé localement et ajouté en tant que dépendance déclarée dans votre fichier package.json.

Importer et configurer des dépendances

Pour importer les dépendances installées et certains modules de base de Node.js (path, os et fs) dont nous aurons besoin dans cette section, ajoutez les lignes suivantes en haut de votre fichier index.js :

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

Comme votre fonction s'exécute dans un environnement Google Cloud, il n'est pas nécessaire de configurer les bibliothèques Cloud Storage et Cloud Vision. Elles seront automatiquement configurées pour utiliser votre projet.

Détecter des images inappropriées

Vous allez utiliser le déclencheur functions.storage.onChange de Cloud Functions, qui exécute votre code dès qu'un fichier ou un dossier est créé ou modifié dans un bucket Cloud Storage. Ajoutez la fonction blurOffensiveImages à votre fichier index.js:

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

Notez que nous avons ajouté une configuration de l'instance Cloud Functions qui exécutera la fonction. Avec .runWith({memory: '2GB'}), nous demandons à l'instance de disposer de 2 Go de mémoire au lieu de la valeur par défaut, car cette fonction est gourmande en mémoire.

Lorsque la fonction se déclenche, l'image est traitée dans l'API Cloud Vision, qui détecte les contenus pour adultes et les contenus violents. Si l'image est jugée inappropriée selon ces critères, elle est floutée à l'aide de la fonction blurImage, comme nous le verrons par la suite.

Flouter l'image

Ajoutez la fonction blurImage suivante dans votre fichier index.js :

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

Dans la fonction ci-dessus, le fichier binaire de l'image est téléchargé depuis Cloud Storage. L'image est ensuite floutée à l'aide de l'outil convert d'ImageMagick, et la version floutée est réimportée dans le bucket Storage. Nous supprimons ensuite le fichier de l'instance Cloud Functions pour libérer de l'espace disque. En effet, cette même instance peut être réutilisée, et si les fichiers ne sont pas nettoyés, elle risque de manquer d'espace disque. Pour finir, nous ajoutons une valeur booléenne au message de chat pour indiquer que l'image a été modérée. Cela déclenchera une actualisation du message sur le client.

Déployer la fonction

La fonction ne sera active qu'après son déploiement. Dans la ligne de commande, exécutez firebase deploy --only functions :

firebase deploy --only functions

La console doit afficher le résultat suivant :

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

Tester la fonction

Une fois la fonction déployée, procédez comme suit :

Ouvrez votre application dans votre navigateur à l'aide de l'URL d'hébergement (au format https://<project-id>.firebaseapp.com).
Une fois connecté à l'application, importez une image:
Envoyez l'image la plus choquante que vous avez (ou utilisez ce zombie mangeur de chair), puis attendez que votre publication soit remplacée par une image floutée :

10. Notification de nouveau message

Dans cette section, vous allez ajouter une fonction Cloud qui envoie des notifications aux participants du chat lorsqu'un nouveau message est publié.

Firebase Cloud Messaging (FCM) vous permet d'envoyer des notifications aux utilisateurs de manière fiable sur toutes les plates-formes. Pour envoyer une notification à un utilisateur, vous devez disposer de son jeton d'appareil FCM. L'application Web de chat que nous utilisons collecte déjà les jetons d'appareil des utilisateurs qui ouvrent l'application depuis un navigateur ou un appareil inconnu. Ces jetons sont stockés dans Cloud Firestore, dans la collection fcmTokens.

Si vous souhaitez savoir comment obtenir des jetons d'appareil FCM sur une application Web, vous pouvez suivre l'atelier de programmation Web consacré à Firebase.

Envoyer des notifications

Pour détecter la publication de nouveaux messages, vous utiliserez le déclencheur Cloud Functions functions.firestore.document().onCreate, qui exécute votre code lorsqu'un objet est créé sur un chemin d'accès donné de Cloud Firestore. Ajoutez la fonction sendNotifications à votre fichier index.js:

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

Dans la fonction ci-dessus, nous collectons les jetons d'appareil de tous les utilisateurs à partir de la base de données Cloud Firestore, puis nous envoyons une notification à chacun d'eux à l'aide de la fonction admin.messaging().sendToDevice.

Nettoyer les jetons

Pour finir, nous allons supprimer les jetons qui ne sont plus valides. Cela se produit lorsque le jeton que nous avons obtenu de l'utilisateur n'est plus utilisé par le navigateur ou l'appareil. Cela se produit, par exemple, si l'utilisateur a révoqué l'autorisation de notification pour la session du navigateur. Pour ce faire, ajoutez la fonction cleanupTokens suivante dans votre fichier index.js:

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

Déployer la fonction

La fonction ne sera active qu'après avoir été déployée. Pour la déployer, exécutez la commande suivante dans la ligne de commande :

firebase deploy --only functions

La console doit afficher le résultat suivant :

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

Tester la fonction

Une fois la fonction déployée, ouvrez votre application dans votre navigateur à l'aide de l'URL d'hébergement (au format https://<project-id>.firebaseapp.com).
Si vous vous connectez à l'application pour la première fois, veillez à autoriser les notifications lorsque vous y êtes invité :
Fermer l'onglet de l'application de chat ou afficher un autre onglet: les notifications ne s'affichent que si l'application est exécutée en arrière-plan. Si vous souhaitez savoir comment recevoir des messages lorsque votre application est exécutée au premier plan, consultez notre documentation.
Connectez-vous à l'application depuis un autre navigateur (ou via une fenêtre de navigation privée) et publiez un message. Le premier navigateur doit afficher une notification :

11. Félicitations !

Vous avez utilisé le SDK Firebase pour Cloud Functions et ajouté des composants côté serveur à une application de chat.

Points abordés

Créer des fonctions Cloud Functions à l'aide du SDK Firebase pour Cloud Functions
Déclencher des fonctions Cloud Functions basées sur des événements Auth, Cloud Storage et Cloud Firestore
Rendre votre application Web compatible avec Firebase Cloud Messaging
Déployer Cloud Functions à l'aide de la CLI Firebase

Étapes suivantes

Découvrez les autres types de déclencheurs Cloud Functions.
Utilisez Firebase et Cloud Functions dans votre application.

Envoyer des notifications pour une application Web à l'aide de Cloud Messaging et Cloud Functions

1. Présentation

Points abordés

Prérequis

2. Obtenir l'exemple de code

Importer l'application de démarrage

3. Créer un projet Firebase et configurer votre application

Créer un projet

Passer à la formule Blaze

Activer Google Auth

Configurer Cloud Storage for Firebase

Ajouter une application Web

4. Installer l'interface de ligne de commande Firebase

5. Déployer et exécuter l'application Web

Ouvrir l'application Web

6. Répertoire Functions

index.js

7. Importer les modules Cloud Functions et Admin Firebase

index.js

8. Souhaiter la bienvenue aux nouveaux utilisateurs

Structure des messages du chat

Ajouter des messages de bienvenue

index.js

Déployer Cloud Functions

Tester la fonction

9. Modération des images

Activer l'API Cloud Vision

Installer les dépendances

Importer et configurer des dépendances

index.js

Détecter des images inappropriées

index.js

Flouter l'image

index.js

Déployer la fonction

Tester la fonction

10. Notification de nouveau message

Envoyer des notifications

index.js

Nettoyer les jetons

index.js

Déployer la fonction

Tester la fonction

11. Félicitations !

Points abordés

Étapes suivantes

En savoir plus