Invia notifiche per un'app Web utilizzando Cloud Messaging e Cloud Functions

1. Panoramica

In questo codelab imparerai come utilizzare Cloud Functions for Firebase per aggiungere funzionalità a un'app Web di chat inviando notifiche agli utenti dell'app di chat.

3b1284f5144b54f6.png

Cosa imparerai

  • Crea Google Cloud Functions utilizzando l'SDK Firebase.
  • Attiva le funzioni cloud in base agli eventi di autenticazione, cloud storage e cloud firestore.
  • Aggiungi il supporto Firebase Cloud Messaging alla tua app Web.

Di cosa avrai bisogno

  • Una carta di credito. Cloud Functions for Firebase richiede il piano Firebase Blaze, il che significa che dovrai abilitare la fatturazione sul tuo progetto Firebase utilizzando una carta di credito.
  • L'IDE/editor di testo di tua scelta come WebStorm , Atom o Sublime .
  • Un terminale per eseguire comandi shell con NodeJS v9 installato.
  • Un browser come Chrome.
  • Il codice di esempio. Vedi il passaggio successivo per questo.

2. Ottieni il codice di esempio

Clona il repository GitHub dalla riga di comando:

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

Importa l'app iniziale

Utilizzando il tuo IDE, apri o importa il file android_studio_folder.png directory cloud-functions-start dalla directory del codice di esempio. Questa directory contiene il codice iniziale per il codelab che consiste in un'app Web Chat completamente funzionale.

3. Crea un progetto Firebase e configura la tua app

Crea progetto

Nella Console Firebase , fai clic su Aggiungi progetto e chiamalo FriendlyChat .

Fare clic su Crea progetto .

Passa al piano Blaze

Per utilizzare Cloud Functions for Firebase, dovrai aggiornare il tuo progetto Firebase al piano di fatturazione Blaze . Ciò richiederà l'aggiunta di una carta di credito o di un altro strumento di fatturazione al tuo account Google Cloud.

Tutti i progetti Firebase, compresi quelli del piano Blaze, hanno ancora accesso alle quote di utilizzo gratuite per Cloud Functions. I passaggi descritti in questo codelab rientreranno nei limiti di utilizzo del livello gratuito. Tuttavia, vedrai piccoli addebiti ( circa $ 0,03 ) da Cloud Storage che viene utilizzato per ospitare le immagini di build di Cloud Functions.

Se non hai accesso a una carta di credito o ti senti a disagio nel continuare con il piano Blaze, considera l'utilizzo di Firebase Emulator Suite che ti consentirà di emulare Cloud Functions gratuitamente sul tuo computer locale.

Abilita autenticazione Google

Per consentire agli utenti di accedere all'app, utilizzeremo l'autenticazione di Google che deve essere abilitata.

Nella Console Firebase, apri la sezione Compila > Autenticazione > scheda Metodo di accesso (o fai clic qui per andare lì). Quindi, attiva il provider di accesso Google e fai clic su Salva . Ciò consentirà agli utenti di accedere all'app Web con i propri account Google.

Inoltre, sentiti libero di impostare il nome pubblico della tua app su Friendly Chat :

8290061806aacb46.png

Abilita archiviazione cloud

L'app utilizza Cloud Storage per caricare le immagini. Per abilitare Cloud Storage sul tuo progetto Firebase, visita la sezione Archiviazione e fai clic sul pulsante Inizia . Segui i passaggi indicati qui e per la posizione di Cloud Storage sarà presente un valore predefinito da utilizzare. Successivamente fare clic su Fine .

Aggiungi un'app Web

Sulla console Firebase, aggiungi un'app Web. Per fare ciò, vai su Impostazioni progetto e scorri verso il basso fino a Aggiungi app . Scegli il Web come piattaforma e seleziona la casella per configurare Firebase Hosting, quindi registra l'app e fai clic su Avanti per il resto dei passaggi, infine facendo clic su Continua sulla console .

4. Installa l'interfaccia della riga di comando di Firebase

L'interfaccia a riga di comando (CLI) di Firebase ti consentirà di servire l'app Web localmente e di distribuire l'app Web e Cloud Functions.

Per installare o aggiornare la CLI eseguire il seguente comando npm:

npm -g install firebase-tools

Per verificare che la CLI sia stata installata correttamente, apri una console ed esegui:

firebase --version

Assicurati che la versione della CLI Firebase sia superiore alla 4.0.0 in modo che disponga di tutte le funzionalità più recenti richieste per Cloud Functions. In caso contrario, esegui npm install -g firebase-tools per eseguire l'aggiornamento come mostrato sopra.

Autorizza la CLI Firebase eseguendo:

firebase login

Assicurati di essere nella directory cloud-functions-start , quindi configura la CLI Firebase per utilizzare il tuo progetto Firebase:

firebase use --add

Successivamente, seleziona il tuo ID progetto e segui le istruzioni. Quando richiesto, puoi scegliere qualsiasi alias, come codelab .

5. Distribuire ed eseguire l'app Web

Ora che hai importato e configurato il tuo progetto, sei pronto per eseguire l'app Web per la prima volta! Apri una finestra di terminale, vai alla cartella cloud-functions-start e distribuisci l'app Web sull'hosting Firebase utilizzando:

firebase deploy --except functions

Questo è l'output della console che dovresti vedere:

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

Apri l'app Web

L'ultima riga dovrebbe visualizzare l' URL dell'hosting. L'app Web dovrebbe ora essere fornita da questo URL, che dovrebbe essere nel formato https://<project-id>.firebaseapp.com. Aprilo. Dovresti vedere l'interfaccia utente funzionante di un'app di chat.

Accedi all'app utilizzando il pulsante ACCEDI CON GOOGLE e sentiti libero di aggiungere alcuni messaggi e pubblicare immagini:

3b1284f5144b54f6.png

Se accedi all'app per la prima volta su un nuovo browser, assicurati di consentire le notifiche quando richiesto: 8b9d0c66dc36153d.png

Dovremo abilitare le notifiche in un secondo momento.

Se hai cliccato accidentalmente su Blocca , puoi modificare questa impostazione facendo clic sul pulsante 🔒 Proteggi a sinistra dell'URL nella Omnibar di Chrome e attivando la barra accanto a Notifiche :

e926868b0546ed71.png

Ora aggiungeremo alcune funzionalità utilizzando Firebase SDK for Cloud Functions.

6. La directory delle funzioni

Cloud Functions ti consente di avere facilmente codice che viene eseguito nel Cloud senza dover configurare un server. Esamineremo come creare funzioni che reagiscono agli eventi del database Firebase Auth, Cloud Storage e Firebase Firestore. Iniziamo con l'autenticazione.

Quando utilizzi l'SDK Firebase per Cloud Functions, il codice Functions si troverà nella directory functions (per impostazione predefinita). Il tuo codice Functions è anche un'app Node.js e pertanto necessita di un package.json che fornisca alcune informazioni sulla tua app ed elenchi le dipendenze.

Per semplificarti le cose, abbiamo già creato il file functions/index.js in cui verrà inserito il tuo codice. Sentiti libero di controllare questo file prima di andare avanti.

cd functions
ls

Se non hai familiarità con Node.js , sarebbe utile saperne di più prima di continuare il codelab.

Il file package.json elenca già due dipendenze richieste: Firebase SDK for Cloud Functions e Firebase Admin SDK . Per installarli localmente, vai alla cartella functions ed esegui:

npm install

Diamo ora un'occhiata al file index.js :

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

Importeremo i moduli richiesti e quindi scriveremo tre funzioni al posto delle TODO. Iniziamo con l'importazione dei moduli Node richiesti.

7. Importa i moduli Cloud Functions e Firebase Admin

Durante questo codelab saranno richiesti due moduli: firebase-functions consente di scrivere trigger e log di Cloud Functions mentre firebase-admin consente di utilizzare la piattaforma Firebase su un server con accesso amministrativo per eseguire azioni come scrivere su Cloud Firestore o inviare notifiche FCM.

Nel file index.js , sostituisci il primo TODO con quanto segue:

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

L'SDK Admin Firebase può essere configurato automaticamente quando distribuito in un ambiente Cloud Functions o in altri contenitori Google Cloud Platform e ciò accade quando chiamiamo admin.initializeApp() senza argomenti.

Ora aggiungiamo una funzione che viene eseguita quando un utente accede per la prima volta all'app di chat e aggiungeremo un messaggio di chat per dare il benvenuto all'utente.

8. Benvenuto ai nuovi utenti

Struttura dei messaggi di chat

I messaggi pubblicati nel feed della chat di FriendlyChat vengono archiviati in Cloud Firestore. Diamo un'occhiata alla struttura dei dati che utilizziamo per un messaggio. Per fare ciò, pubblica un nuovo messaggio nella chat che dice "Hello World":

11f5a676fbb1a69a.png

Questo dovrebbe apparire come:

fe6d1c020d0744cf.png

Nella console Firebase, fai clic su Database Firestore nella sezione Compila . Dovresti vedere la raccolta dei messaggi e un documento contenente il messaggio che hai scritto:

442c9c10b5e2b245.png

Come puoi vedere, i messaggi di chat vengono archiviati in Cloud Firestore come documento con gli attributi name , profilePicUrl , text e timestamp aggiunti alla raccolta messages .

Aggiunta di messaggi di benvenuto

La prima Cloud Function aggiunge un messaggio che dà il benvenuto ai nuovi utenti nella chat. Per questo, possiamo utilizzare il trigger functions.auth().onCreate , che esegue la funzione ogni volta che un utente accede per la prima volta all'app Firebase. Aggiungi la funzione addWelcomeMessages nel tuo file index.js :

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

L'aggiunta di questa funzione all'oggetto exports speciale è il modo in cui Node rende la funzione accessibile all'esterno del file corrente ed è necessaria per Cloud Functions.

Nella funzione sopra, stiamo aggiungendo un nuovo messaggio di benvenuto pubblicato da "Firebase Bot" all'elenco dei messaggi di chat. Lo stiamo facendo utilizzando il metodo add sulla raccolta messages in Cloud Firestore, che è dove vengono archiviati i messaggi della chat.

Poiché si tratta di un'operazione asincrona, dobbiamo restituire la Promise che indica quando Cloud Firestore ha terminato la scrittura in modo che le Funzioni Cloud non vengano eseguite troppo presto.

Distribuisci funzioni cloud

Le Funzioni Cloud saranno attive solo dopo averle distribuite. Per fare ciò, esegui questo sulla riga di comando:

firebase deploy --only functions

Questo è l'output della console che dovresti vedere:

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

Testare la funzione

Una volta distribuita correttamente la funzione, sarà necessario che un utente esegua l'accesso per la prima volta.

  1. Apri la tua app nel browser utilizzando l'URL di hosting (sotto forma di https://<project-id>.firebaseapp.com ).
  2. Con un nuovo utente, accedi per la prima volta alla tua app utilizzando il pulsante Accedi .
  • Se hai già effettuato l'accesso all'app, puoi aprire Firebase Console Authentication ed eliminare il tuo account dall'elenco degli utenti. Quindi, accedi di nuovo.

262535d1b1223c65.png

  1. Dopo aver effettuato l'accesso, dovrebbe essere visualizzato automaticamente un messaggio di benvenuto:

1c70e0d64b23525b.png

9. Moderazione delle immagini

Gli utenti possono caricare tutti i tipi di immagini nella chat ed è sempre importante moderare le immagini offensive, soprattutto nelle piattaforme social pubbliche. In FriendlyChat, le immagini pubblicate nella chat vengono archiviate in Google Cloud Storage .

Con Cloud Functions, puoi rilevare nuovi caricamenti di immagini utilizzando il trigger functions.storage().onFinalize . Questo verrà eseguito ogni volta che un nuovo file viene caricato o modificato in Cloud Storage.

Per moderare le immagini, seguiremo la seguente procedura:

  1. Controlla se l'immagine è contrassegnata come Per adulti o Violenta utilizzando l' API Cloud Vision .
  2. Se l'immagine è stata contrassegnata, scaricala nell'istanza di Functions in esecuzione.
  3. Sfoca l'immagine utilizzando ImageMagick .
  4. Carica l'immagine sfocata su Cloud Storage.

Abilita l'API Cloud Vision

Poiché utilizzeremo l'API Google Cloud Vision in questa funzione, devi abilitare l'API sul tuo progetto Firebase. Segui questo collegamento , quindi seleziona il tuo progetto Firebase e abilita l'API:

5c77fee51ec5de49.png

Installa le dipendenze

Per moderare le immagini, utilizzeremo la libreria client Google Cloud Vision per Node.js, @google-cloud/vision , per eseguire le immagini tramite l'API Cloud Vision per rilevare immagini inappropriate.

Per installare questo pacchetto nell'app Cloud Functions, esegui il seguente comando npm install --save . Assicurati di farlo dalla directory functions .

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

Ciò installerà il pacchetto localmente e lo aggiungerà come dipendenza dichiarata nel file package.json .

Importa e configura le dipendenze

Per importare le dipendenze installate e alcuni moduli principali di Node.js ( path , os e fs ) di cui avremo bisogno in questa sezione, aggiungi le seguenti righe all'inizio del tuo file index.js :

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

Poiché la tua funzione verrà eseguita all'interno di un ambiente Google Cloud, non è necessario configurare le librerie Cloud Storage e Cloud Vision: verranno configurate automaticamente per utilizzare il tuo progetto.

Rilevamento di immagini inappropriate

Utilizzerai il trigger functions.storage.onChange Cloud Functions, che esegue il codice non appena un file o una cartella viene creato o modificato in un bucket Cloud Storage. Aggiungi la funzione blurOffensiveImages nel tuo file index.js :

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

Tieni presente che abbiamo aggiunto alcune configurazioni dell'istanza Cloud Functions che eseguirà la funzione. Con .runWith({memory: '2GB'}) , chiediamo che l'istanza ottenga 2 GB di memoria anziché quella predefinita, poiché questa funzione utilizza molta memoria.

Quando la funzione viene attivata, l'immagine viene eseguita attraverso l'API Cloud Vision per rilevare se è contrassegnata come adulta o violenta. Se l'immagine viene rilevata come inappropriata in base a questi criteri, stiamo sfocando l'immagine, operazione eseguita nella funzione blurImage , come vedremo in seguito.

Sfocatura dell'immagine

Aggiungi la seguente funzione blurImage nel tuo file index.js :

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

Nella funzione precedente, il file binario dell'immagine viene scaricato da Cloud Storage. L'immagine viene quindi sfocata utilizzando lo strumento convert di ImageMagick e la versione sfocata viene ricaricata nel bucket di archiviazione. Successivamente, eliminiamo il file sull'istanza Cloud Functions per liberare spazio su disco e lo facciamo perché la stessa istanza Cloud Functions può essere riutilizzata e se i file non vengono ripuliti, potrebbe esaurire lo spazio su disco. Infine, aggiungiamo un valore booleano al messaggio di chat che indica che l'immagine è stata moderata e questo attiverà un aggiornamento del messaggio sul client.

Distribuire la funzione

La funzione sarà attiva solo dopo averla distribuita. Sulla riga di comando, esegui firebase deploy --only functions :

firebase deploy --only functions

Questo è l'output della console che dovresti vedere:

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

Testare la funzione

Una volta che la funzione è stata distribuita con successo:

  1. Apri la tua app nel browser utilizzando l'URL di hosting (sotto forma di https://<project-id>.firebaseapp.com ).
  2. Una volta effettuato l'accesso all'app, carica un'immagine: 4db9fdab56703e4a.png
  3. Scegli la tua migliore immagine offensiva da caricare (oppure puoi usare questo Zombie mangiatore di carne !) e dopo pochi istanti dovresti vedere il tuo post aggiornarsi con una versione sfocata dell'immagine: 83dd904fbaf97d2b.png

10. Notifiche di nuovi messaggi

In questa sezione aggiungerai una Cloud Function che invia notifiche ai partecipanti alla chat quando viene pubblicato un nuovo messaggio.

Utilizzando Firebase Cloud Messaging (FCM), puoi inviare notifiche in modo affidabile agli utenti su tutte le piattaforme. Per inviare una notifica a un utente, è necessario il token del dispositivo FCM. L'app Web di chat che stiamo utilizzando raccoglie già i token del dispositivo dagli utenti quando aprono l'app per la prima volta su un nuovo browser o dispositivo. Questi token sono archiviati in Cloud Firestore nella raccolta fcmTokens .

Se desideri sapere come ottenere token dispositivo FCM su un'app Web, puoi utilizzare Firebase Web Codelab .

Invia notifiche

Per rilevare quando vengono pubblicati nuovi messaggi, utilizzerai il trigger functions.firestore.document().onCreate Cloud Functions, che esegue il codice quando viene creato un nuovo oggetto in un determinato percorso di Cloud Firestore. Aggiungi la funzione sendNotifications nel tuo file index.js :

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

Nella funzione sopra, raccogliamo i token dei dispositivi di tutti gli utenti dal database Cloud Firestore e inviamo una notifica a ciascuno di questi utilizzando la funzione admin.messaging().sendToDevice .

Pulisci i token

Infine, vogliamo rimuovere i token che non sono più validi. Ciò accade quando il token che abbiamo ricevuto una volta dall'utente non viene più utilizzato dal browser o dal dispositivo. Ciò accade, ad esempio, se l'utente ha revocato il permesso di notifica per la sessione del browser. Per fare ciò, aggiungi la seguente funzione cleanupTokens nel tuo file index.js :

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

Distribuire la funzione

La funzione sarà attiva solo dopo averla distribuita e, per distribuirla, eseguilo nella riga di comando:

firebase deploy --only functions

Questo è l'output della console che dovresti vedere:

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

Testare la funzione

  1. Una volta distribuita correttamente la funzione, apri la tua app nel browser utilizzando l'URL di hosting (sotto forma di https://<project-id>.firebaseapp.com ).
  2. Se accedi all'app per la prima volta, assicurati di consentire le notifiche quando richiesto: 8b9d0c66dc36153d.png
  3. Chiudi la scheda dell'app di chat o visualizza una scheda diversa: le notifiche vengono visualizzate solo se l'app è in background. Se desideri sapere come ricevere messaggi mentre la tua app è in primo piano, dai un'occhiata alla nostra documentazione .
  4. Utilizzando un browser diverso (o una finestra di navigazione in incognito), accedi all'app e pubblica un messaggio. Dovresti vedere una notifica visualizzata dal primo browser: 45282ab12b28b926.png

11. Congratulazioni!

Hai utilizzato l'SDK Firebase per Cloud Functions e aggiunto componenti lato server a un'app di chat.

Di cosa abbiamo parlato

  • Creazione di Cloud Functions utilizzando Firebase SDK for Cloud Functions.
  • Attiva le funzioni cloud in base agli eventi di autenticazione, cloud storage e cloud firestore.
  • Aggiungi il supporto Firebase Cloud Messaging alla tua app Web.
  • Distribuisci Cloud Functions utilizzando la CLI Firebase.

Prossimi passi

Saperne di più