Облачные функции для Firebase

1. Обзор

В этой лабораторной работе вы узнаете, как использовать Firebase SDK для Google Cloud Functions для улучшения веб-приложения Chat и как использовать Cloud Functions для отправки уведомлений пользователям приложения Chat.

3b1284f5144b54f6.png

Что вы узнаете

  • Создавайте облачные функции Google с помощью Firebase SDK.
  • Активируйте облачные функции на основе событий Auth, Cloud Storage и Cloud Firestore.
  • Добавьте поддержку Firebase Cloud Messaging в свое веб-приложение.

Что вам понадобится

  • Кредитная карточка. Облачные функции для Firebase требуют плана Firebase Blaze, а это значит, что вам нужно будет включить выставление счетов в своем проекте Firebase с помощью кредитной карты.
  • IDE/текстовый редактор на ваш выбор, например WebStorm , Atom или Sublime .
  • Терминал для запуска команд оболочки с установленным NodeJS v9.
  • Браузер, например Chrome.
  • Образец кода. См. следующий шаг для этого.

2. Получите пример кода

Клонируйте репозиторий GitHub из командной строки:

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

Импортировать стартовое приложение

Используя вашу IDE, откройте или импортируйте android_studio_folder.png cloud-functions-start из каталога примера кода. Этот каталог содержит исходный код для лаборатории кода, состоящей из полнофункционального веб-приложения Chat.

3. Создайте проект Firebase и настройте свое приложение.

Создать проект

В консоли Firebase нажмите «Добавить проект» и назовите его « FriendlyChat ».

Щелкните Создать проект .

Перейти на план Blaze

Чтобы использовать Cloud Functions для Firebase, вам необходимо обновить свой проект Firebase до тарифного плана Blaze . Для этого вам потребуется добавить кредитную карту или другой платежный инструмент в свою учетную запись Google Cloud.

Все проекты Firebase, в том числе в плане Blaze, по-прежнему имеют доступ к бесплатным квотам на использование облачных функций. Шаги, описанные в этой кодовой лаборатории, будут соответствовать ограничениям на использование уровня бесплатного пользования. Однако вы увидите небольшую плату ( около 0,03 доллара США ) от облачного хранилища, которое используется для размещения образов сборки облачных функций.

Если у вас нет доступа к кредитной карте или вам неудобно продолжать план Blaze, рассмотрите возможность использования Firebase Emulator Suite , который позволит вам бесплатно эмулировать облачные функции на вашем локальном компьютере.

Включить аутентификацию Google

Чтобы пользователи могли войти в приложение, мы будем использовать аутентификацию Google, которую необходимо включить.

В консоли Firebase откройте раздел « Сборка » > « Аутентификация » > вкладка « Метод входа » (или нажмите здесь, чтобы перейти туда). Затем включите поставщика услуг входа Google и нажмите « Сохранить » . Это позволит пользователям входить в веб-приложение со своими учетными записями Google.

Кроме того, не стесняйтесь установить общедоступное имя вашего приложения на Дружественный чат :

8290061806aacb46.png

Включить облачное хранилище

Приложение использует облачное хранилище для загрузки изображений. Чтобы включить облачное хранилище в вашем проекте Firebase, перейдите в раздел « Хранилище » и нажмите кнопку « Начать ». Выполните описанные там шаги, и для местоположения облачного хранилища будет использоваться значение по умолчанию. Нажмите Готово после этого.

Добавить веб-приложение

В консоли Firebase добавьте веб-приложение. Для этого перейдите в «Настройки проекта» и прокрутите вниз до « Добавить приложение ». Выберите Интернет в качестве платформы и установите флажок для настройки Firebase Hosting, затем зарегистрируйте приложение и нажмите « Далее » для оставшихся шагов, наконец, нажав « Продолжить на консоли ».

4. Установите интерфейс командной строки Firebase

Интерфейс командной строки Firebase (CLI) позволит вам обслуживать веб-приложение локально и развертывать веб-приложение и облачные функции.

Чтобы установить или обновить CLI, выполните следующую команду npm:

npm -g install firebase-tools

Чтобы убедиться, что CLI установлен правильно, откройте консоль и выполните:

firebase --version

Убедитесь, что версия командной строки Firebase выше 4.0.0 , чтобы в ней были все последние функции, необходимые для облачных функций. Если нет, запустите npm install -g firebase-tools для обновления, как показано выше.

Авторизуйте интерфейс командной строки Firebase, выполнив:

firebase login

Убедитесь, что вы находитесь в каталоге cloud-functions-start , затем настройте интерфейс командной строки Firebase для использования вашего проекта Firebase:

firebase use --add

Затем выберите идентификатор проекта и следуйте инструкциям. При появлении запроса вы можете выбрать любой псевдоним, например codelab .

5. Разверните и запустите веб-приложение

Теперь, когда вы импортировали и настроили свой проект, вы готовы запустить веб-приложение в первый раз! Откройте окно терминала, перейдите в папку cloud-functions-start и разверните веб-приложение на хостинге Firebase, используя:

firebase deploy --except functions

Это вывод консоли, который вы должны увидеть:

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

Откройте веб-приложение

В последней строке должен отображаться URL-адрес хостинга. Теперь веб-приложение должно обслуживаться с этого URL-адреса, который должен иметь форму https://<project-id>.firebaseapp.com. Открой это. Вы должны увидеть функционирующий пользовательский интерфейс приложения чата.

Войдите в приложение с помощью кнопки ВХОД ЧЕРЕЗ GOOGLE и не стесняйтесь добавлять сообщения и публиковать изображения:

3b1284f5144b54f6.png

Если вы впервые входите в приложение в новом браузере, убедитесь, что вы разрешаете уведомления при появлении соответствующего запроса: 8b9d0c66dc36153d.png

Нам нужно будет включить уведомления позже.

Если вы случайно нажали « Заблокировать », вы можете изменить этот параметр, нажав кнопку 🔒 «Защита» слева от URL-адреса на омнибаре Chrome и переключив панель рядом с « Уведомлениями »:

e926868b0546ed71.png

Теперь мы добавим некоторые функции с помощью Firebase SDK для облачных функций.

6. Каталог функций

Облачные функции позволяют вам легко иметь код, который работает в облаке, без необходимости настраивать сервер. Мы рассмотрим, как создавать функции, которые реагируют на события базы данных Firebase Auth, Cloud Storage и Firebase Firestore. Начнем с авт.

При использовании Firebase SDK для облачных функций ваш код функций будет находиться в каталоге functions (по умолчанию). Ваш код функций также является приложением Node.js , и поэтому ему нужен package.json , который предоставляет некоторую информацию о вашем приложении и перечисляет зависимости.

Чтобы упростить вам задачу, мы уже создали файл functions/index.js , в котором будет храниться ваш код. Не стесняйтесь проверить этот файл, прежде чем двигаться дальше.

cd functions
ls

Если вы не знакомы с Node.js , было бы полезно узнать о нем больше, прежде чем продолжить работу с кодовой лабораторией.

В файле package.json уже указаны две обязательные зависимости: Firebase SDK для облачных функций и Firebase Admin SDK . Чтобы установить их локально, перейдите в папку functions и запустите:

npm install

Давайте теперь посмотрим на файл 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.

Мы импортируем необходимые модули, а затем напишем три функции вместо TODO. Начнем с импорта необходимых модулей Node.

7. Импортируйте облачные функции и модули администрирования Firebase.

Во время этой лаборатории кода потребуются два модуля: firebase firebase-functions позволяет записывать триггеры и журналы облачных функций, а firebase-admin позволяет использовать платформу Firebase на сервере с правами администратора для выполнения таких действий, как запись в Cloud Firestore или отправка уведомлений FCM.

В файле index.js замените первый TODO следующим:

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.

Firebase Admin SDK можно настроить автоматически при развертывании в среде Cloud Functions или других контейнерах Google Cloud Platform, и это происходит, когда мы вызываем admin.initializeApp() без аргументов.

Теперь давайте добавим функцию, которая запускается, когда пользователь впервые входит в приложение чата, и мы добавим сообщение чата, приветствующее пользователя.

8. Приветствуем новых пользователей

Структура сообщений чата

Сообщения, размещенные в чате FriendlyChat, хранятся в Cloud Firestore. Давайте посмотрим на структуру данных, которую мы используем для сообщения. Для этого опубликуйте в чате новое сообщение с надписью «Hello World»:

11f5a676fbb1a69a.png

Это должно выглядеть так:

fe6d1c020d0744cf.png

В консоли Firebase нажмите « База данных Firestore » в разделе « Сборка ». Вы должны увидеть коллекцию сообщений и один документ, содержащий сообщение, которое вы написали:

442c9c10b5e2b245.png

Как видите, сообщения чата хранятся в Cloud Firestore в виде документа с атрибутами name , profilePicUrl , text и timestamp , добавленными в коллекцию messages .

Добавление приветственных сообщений

Первая облачная функция добавляет сообщение, приветствующее новых пользователей в чате. Для этого мы можем использовать триггер functions.auth().onCreate , который запускает функцию каждый раз, когда пользователь впервые входит в приложение Firebase. Добавьте функцию addWelcomeMessages в ваш файл 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.');
});

Добавление этой функции в специальный объект exports — это способ Node сделать функцию доступной за пределами текущего файла и требуется для облачных функций.

В приведенной выше функции мы добавляем новое приветственное сообщение, отправленное «Firebase Bot», в список сообщений чата. Мы делаем это с помощью метода add в коллекции messages в Cloud Firestore, где хранятся сообщения чата.

Поскольку это асинхронная операция, нам нужно вернуть обещание , указывающее, когда Cloud Firestore закончил запись, чтобы облачные функции не выполнялись слишком рано.

Развертывание облачных функций

Облачные функции будут активны только после их развертывания. Для этого запустите это в командной строке:

firebase deploy --only functions

Это вывод консоли, который вы должны увидеть:

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

Проверьте функцию

После успешного развертывания функции вам понадобится пользователь, который входит в систему в первый раз.

  1. Откройте свое приложение в браузере, используя URL-адрес хостинга (в виде https://<project-id>.firebaseapp.com ).
  2. С новым пользователем впервые войдите в свое приложение с помощью кнопки « Войти ».
  • Если вы уже вошли в приложение, вы можете открыть аутентификацию Firebase Console и удалить свою учетную запись из списка пользователей. Затем снова войдите в систему.

262535d1b1223c65.png

  1. После входа в систему автоматически должно отображаться приветственное сообщение:

1c70e0d64b23525b.png

9. Модерация изображений

Пользователи могут загружать все типы изображений в чат, и всегда важно модерировать оскорбительные изображения, особенно на общедоступных социальных платформах. В FriendlyChat изображения, которые публикуются в чате, сохраняются в Google Cloud Storage .

С помощью облачных функций вы можете обнаруживать новые загрузки изображений с помощью триггера functions.storage().onFinalize . Это будет выполняться каждый раз, когда новый файл загружается или изменяется в облачном хранилище.

Чтобы модерировать изображения, мы выполним следующий процесс:

  1. Проверьте, помечено ли изображение как «Для взрослых» или «Насилие», с помощью Cloud Vision API .
  2. Если изображение было помечено, загрузите его в работающий экземпляр Functions.
  3. Размыть изображение с помощью ImageMagick .
  4. Загрузите размытое изображение в облачное хранилище.

Включить API Cloud Vision

Поскольку в этой функции мы будем использовать API Google Cloud Vision, вы должны включить API в своем проекте Firebase. Перейдите по этой ссылке , затем выберите свой проект Firebase и включите API:

5c77fee51ec5de49.png

Установить зависимости

Для модерации изображений мы будем использовать клиентскую библиотеку Google Cloud Vision для Node.js, @google-cloud/vision , чтобы запускать изображения через API Cloud Vision для обнаружения неприемлемых изображений.

Чтобы установить этот пакет в приложение Cloud Functions, выполните следующую команду npm install --save . Убедитесь, что вы делаете это из каталога functions .

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

Это установит пакет локально и добавит его в качестве объявленной зависимости в файл package.json .

Импорт и настройка зависимостей

Чтобы импортировать установленные зависимости и некоторые основные модули Node.js ( path , os и fs ), которые нам понадобятся в этом разделе, добавьте следующие строки в начало файла 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');

Поскольку ваша функция будет работать в среде Google Cloud, нет необходимости настраивать библиотеки Cloud Storage и Cloud Vision: они будут настроены автоматически для использования вашего проекта.

Обнаружение неприемлемых изображений

Вы будете использовать триггер functions.storage.onChange Cloud Functions, который запускает ваш код, как только файл или папка создается или изменяется в корзине Cloud Storage. Добавьте blurOffensiveImages в ваш файл 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.');
    });

Обратите внимание, что мы добавили некоторую конфигурацию экземпляра Cloud Functions, который будет запускать функцию. С помощью .runWith({memory: '2GB'}) мы запрашиваем, чтобы экземпляр получил 2 ГБ памяти, а не значение по умолчанию, потому что эта функция интенсивно использует память.

Когда функция активируется, изображение проходит через API Cloud Vision, чтобы определить, помечено ли оно как взрослое или агрессивное. Если изображение определяется как неприемлемое на основе этих критериев, мы размываем изображение, что делается в функции blurImage , как мы увидим далее.

Размытие изображения

Добавьте следующую функцию blurImage в файл 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.');
}

В приведенной выше функции двоичный файл изображения загружается из облачного хранилища. Затем изображение размывается с помощью инструмента convert ImageMagick, и размытая версия повторно загружается в Storage Bucket. Затем мы удаляем файл в экземпляре Cloud Functions, чтобы освободить место на диске, и мы делаем это, потому что один и тот же экземпляр Cloud Functions можно использовать повторно, и если файлы не очистить, ему может не хватить места на диске. Наконец, мы добавляем в сообщение чата логическое значение, указывающее, что изображение было проверено модератором, и это вызовет обновление сообщения на клиенте.

Разверните функцию

Функция будет активна только после того, как вы ее развернете. В командной строке запустите firebase deploy --only functions :

firebase deploy --only functions

Это вывод консоли, который вы должны увидеть:

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

Проверьте функцию

После успешного развертывания функции:

  1. Откройте свое приложение в браузере, используя URL-адрес хостинга (в виде https://<project-id>.firebaseapp.com ).
  2. После входа в приложение загрузите изображение: 4db9fdab56703e4a.png
  3. Выберите свое лучшее оскорбительное изображение для загрузки (или вы можете использовать этот Зомби, поедающий плоть !), и через несколько секунд вы увидите, что ваш пост обновится с размытой версией изображения: 83dd904fbaf97d2b.png

10. Уведомления о новых сообщениях

В этом разделе вы добавите облачную функцию, которая отправляет уведомления участникам чата при публикации нового сообщения.

Используя Firebase Cloud Messaging (FCM), вы можете надежно отправлять уведомления пользователям на разных платформах. Чтобы отправить уведомление пользователю, вам нужен токен его устройства FCM. Веб-приложение чата, которое мы используем, уже собирает токены устройств от пользователей, когда они впервые открывают приложение в новом браузере или на новом устройстве. Эти токены хранятся в Cloud Firestore в коллекции fcmTokens .

Если вы хотите узнать, как получить токены устройства FCM в веб-приложении, вы можете пройти Firebase Web Codelab .

Отправка уведомлений

Чтобы определить, когда публикуются новые сообщения, вы будете использовать триггер functions.firestore.document().onCreate Cloud Functions, который запускает ваш код при создании нового объекта по заданному пути в Cloud Firestore. Добавьте функцию sendNotifications в ваш файл 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.');
    }
  });

В приведенной выше функции мы собираем токены устройств всех пользователей из базы данных Cloud Firestore и отправляем каждому из них уведомление с помощью функции admin.messaging().sendToDevice .

Очистить токены

Наконец, мы хотим удалить токены, которые больше не действительны. Это происходит, когда токен, который мы когда-то получили от пользователя, больше не используется браузером или устройством. Например, это происходит, если пользователь отозвал разрешение на уведомление для сеанса браузера. Для этого добавьте следующую функцию cleanupTokens в файл 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);
}

Разверните функцию

Функция будет активна только после того, как вы ее развернете, и для ее развертывания запустите это в командной строке:

firebase deploy --only functions

Это вывод консоли, который вы должны увидеть:

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

Проверьте функцию

  1. После успешного развертывания функции откройте свое приложение в браузере, используя URL-адрес хостинга (в виде https://<project-id>.firebaseapp.com ).
  2. Если вы входите в приложение в первый раз, убедитесь, что вы разрешаете уведомления при появлении соответствующего запроса: 8b9d0c66dc36153d.png
  3. Закройте вкладку приложения чата или отобразите другую вкладку: уведомления появляются, только если приложение находится в фоновом режиме. Если вы хотите узнать, как получать сообщения, пока ваше приложение находится на переднем плане, ознакомьтесь с нашей документацией .
  4. Используя другой браузер (или окно в режиме инкогнито), войдите в приложение и опубликуйте сообщение. Вы должны увидеть уведомление, отображаемое первым браузером: 45282ab12b28b926.png

11. Поздравляем!

Вы использовали Firebase SDK для облачных функций и добавили серверные компоненты в приложение чата.

Что мы рассмотрели

  • Создание облачных функций с помощью Firebase SDK для облачных функций.
  • Активируйте облачные функции на основе событий Auth, Cloud Storage и Cloud Firestore.
  • Добавьте поддержку Firebase Cloud Messaging в свое веб-приложение.
  • Разверните облачные функции с помощью интерфейса командной строки Firebase.

Следующие шаги

Учить больше