Отправка уведомлений для веб-приложения с помощью Cloud Messaging и Cloud Functions.

1. Обзор

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

3b1284f5144b54f6.png

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

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

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

  • Кредитная карта. Для использования Cloud Functions for 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 из каталога примера кода. Этот каталог содержит исходный код для лаборатории кода, которая представляет собой полнофункциональное веб-приложение для чата.

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

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

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

Нажмите Создать проект .

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

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

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

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

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

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

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

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

8290061806aacb46.png

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

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

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

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

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

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

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

npm -g install firebase-tools

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

firebase --version

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

Авторизуйте Firebase CLI, выполнив:

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-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 и удалить свою учетную запись из списка пользователей. Затем войдите снова.

262535d1b1223c65.png

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

1c70e0d64b23525b.png

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

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

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

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

  1. Проверьте, помечено ли изображение как «Для взрослых» или «Жестокое», с помощью API Cloud Vision .
  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 ГБ памяти, а не память по умолчанию, поскольку эта функция интенсивно использует память.

Когда функция активируется, изображение пропускается через Cloud Vision API, чтобы определить, помечено ли оно как «взрослое» или «насильственное». Если изображение определяется как неприемлемое на основании этих критериев, мы размываем изображение, что делается в функции 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, и размытая версия повторно загружается в хранилище. Затем мы удаляем файл в экземпляре 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 .

Отправлять уведомления

Чтобы определить, когда публикуются новые сообщения, вы будете использовать триггер 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 для облачных функций.
  • Запускайте облачные функции на основе событий аутентификации, облачного хранилища и Cloud Firestore.
  • Добавьте поддержку Firebase Cloud Messaging в свое веб-приложение.
  • Разверните облачные функции с помощью интерфейса командной строки Firebase.

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

Узнать больше