Push-уведомления Firebase в React

В наши дни уведомления стали стабильной частью Интернета. Нередко встречаются сайты, запрашивающие разрешение на отправку уведомлений в ваш браузер. Большинство современных веб-браузеров реализуют push API и могут обрабатывать push-уведомления. Быстрая проверка caniuse показывает, что API пользуется широкой поддержкой современных браузеров на основе Chrome и браузера Firefox.

В сети есть различные сервисы для реализации уведомлений. Известными из них являются Pusher и Firebase. В этой статье мы реализуем push-уведомления с помощью службы Firebase Cloud Messaging (FCM), которая представляет собой «кроссплатформенное решение для обмена сообщениями, позволяющее надежно отправлять сообщения бесплатно».

Я предполагаю, что читатель немного знаком с написанием серверного приложения на Express.js и/или немного знаком с React. Если вы знакомы с любой из этих технологий, вы можете работать либо с интерфейсом, либо с сервером. Сначала мы реализуем бэкенд, а затем перейдем к фронтэнду. Таким образом, вы можете использовать тот раздел, который вам больше нравится.

Итак, приступим.

Типы сообщений Firebase

В документации Firebase указано, что для реализации FCM требуются два компонента.

1. Надежная среда, такая как облачные функции для Firebase или сервер приложений, на котором можно создавать, настраивать и отправлять сообщения.
2. Клиентское приложение для iOS, Android или веб-приложение (JavaScript), которое получает сообщения через соответствующую транспортную службу для конкретной платформы.

Мы позаботимся о пункте 1 в нашем экспресс-серверном приложении и о пункте 2 в нашем интерфейсном приложении для реагирования.

В документах также указано, что FCM позволяет нам отправлять два типа сообщений.

1. Уведомляющие сообщения (иногда называемые «отображаемыми сообщениями») обрабатываются FCM SDK автоматически.
2. Сообщения данных обрабатываются клиентским приложением.

Уведомления автоматически обрабатываются веб-браузером. Они также могут принимать дополнительные полезные data , которые должны обрабатываться клиентским приложением. В этом руководстве мы будем отправлять и получать сообщения с данными, которые должны обрабатываться клиентским приложением. Это дает нам больше свободы в принятии решения о том, как обрабатывать полученное сообщение.

Настройка проекта Firebase

Самое первое, что нам нужно сделать, это настроить проект Firebase. FCM — это сервис, и поэтому нам понадобятся некоторые ключи API. Этот шаг требует, чтобы у вас была учетная запись Google. Создайте его, если у вас его еще нет. Вы можете нажать здесь, чтобы начать.

После настройки учетной записи Google перейдите в консоль Firebase.

Нажмите « Добавить проект» . Введите имя для вашего проекта и нажмите « Продолжить ». На следующем экране вы можете отключить аналитику. Вы всегда можете включить его позже в меню Analytics на странице вашего проекта. Нажмите « Продолжить » и подождите несколько минут, пока проект будет создан. Обычно это меньше минуты. Затем нажмите « Продолжить », чтобы открыть страницу вашего проекта.

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

Внешний интерфейс

На странице проекта щелкните значок, чтобы добавить Firebase в ваше веб-приложение.

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

Нам понадобится объект конфигурации позже. Нажмите «Продолжить в консоли», чтобы вернуться к консоли.

Бэкенд

Нам нужны учетные данные сервисной учетной записи для подключения к нашему проекту Firebase из серверной части. На странице вашего проекта щелкните значок шестеренки рядом с Обзором проекта, чтобы создать учетную запись службы для использования с нашим бэкэндом Express. Обратитесь к скриншоту ниже. Выполните шаги с 1 по 4, чтобы загрузить файл JSON с учетными данными вашей учетной записи. Обязательно храните файл служебной учетной записи в надежном месте.

Я советую вам не скачивать его, пока вы не будете готовы его использовать. Просто не забудьте вернуться к этим разделам, если вам нужно освежить в памяти.

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

Начиная

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

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

1. Разветвите репо и проверьте ветку 01-get-started .
2. Откройте проект в выбранном вами редакторе кода и просмотрите содержимое.
3. В корне проекта у нас есть две папки: client/ и server/ . Также есть файл .editorconfig , .gitignore и README.md .
4. Папка клиента содержит приложение React. Здесь мы будем слушать уведомления.
5. Папка сервера содержит экспресс-приложение. Отсюда мы будем отправлять уведомления. Приложение взято из проекта, который мы создали в другой моей статье «Как настроить серверный проект Express API с помощью PostgreSQL».
6. Откройте терминал и перейдите в папку client/ . Запустите команду yarn install , чтобы установить зависимости проекта. Затем запустите yarn start , чтобы запустить проект. Посетите https://localhost:3000 , чтобы увидеть живое приложение.
7. Создайте файл .env внутри папки server/ и добавьте переменную среды CONNECTION_STRING . Эта переменная представляет собой URL-адрес подключения к базе данных, указывающий на базу данных PostgreSQL. Если вам нужна помощь в этом, ознакомьтесь с разделом « Connecting The PostgreSQL Database And Writing A Model » моей связанной статьи. Вы также должны указать переменную среды PORT , поскольку React уже работает на порту 3000 . Я установил PORT=3001 в своем файле .env .
8. Откройте отдельный терминал и перейдите к server/ папке. Запустите команду yarn install , чтобы установить зависимости проекта. Запустите yarn runQuery , чтобы создать базу данных проекта. Запустите yarn startdev , чтобы запустить проект. Посетите https://localhost:3001/v1/messages, и вы должны увидеть несколько сообщений в формате JSON.

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

Настройка обмена сообщениями администратора Firebase на серверной части

Для отправки push-уведомлений с помощью FCM на серверной части требуется либо SDK администратора Firebase, либо протоколы сервера FCM. В этом руководстве мы будем использовать SDK администратора. Также есть компоновщик уведомлений, который хорош для «тестирования и отправки маркетинговых сообщений и сообщений о взаимодействии с мощным встроенным таргетингом и аналитикой».

В терминале перейдите к server/ папке и установите Admin SDK.

 # install firebase admin SDK yarn add firebase-admin

Откройте файл .env и добавьте следующую переменную среды.

 GOOGLE_APPLICATION_CREDENTIALS="path-to-your-service-account-json-file"

Значение этой переменной — это путь к загруженным учетным данным учетной записи службы. На этом этапе вы, вероятно, захотите вернуться к разделу, где мы создали учетную запись службы для нашего проекта. Вы должны скопировать код инициализации администратора оттуда, а также загрузить файл ключа вашей учетной записи службы. Поместите этот файл в папку server/ и добавьте его в свой .gitignore .

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

Откройте server/src/settings.js и экспортируйте путь к файлу учетных данных приложения.

 # export the service account key file path export const googleApplicationCredentials = process.env.GOOGLE_APPLICATION_CREDENTIALS;

Создайте файл server/src/firebaseInit.js и добавьте приведенный ниже код.

 import admin from 'firebase-admin'; import { googleApplicationCredentials } from './settings' const serviceAccount = require(googleApplicationCredentials); admin.initializeApp({ credential: admin.credential.cert(serviceAccount), databaseURL: 'your-database-url-here' }); export const messaging = admin.messaging();

Мы импортируем модуль администратора из firebase-admin . Затем мы инициализируем приложение администратора с помощью нашего файла служебной учетной записи. Наконец, мы создаем и экспортируем функцию обмена сообщениями.

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

Чтобы убедиться, что вы успешно завершили инициализацию, откройте server/src/app.js и включите следующие строки.

 import { messaging } from './firebaseInit' console.log(messaging)

Мы импортируем экземпляр обмена сообщениями и регистрируем его в консоли. Вы должны увидеть что-то похожее на картинку ниже. Вы должны удалить их, как только убедитесь, что ваш администратор настроен правильно.

Если у вас возникнут какие-либо проблемы, вы можете проверить ветку 02-connect-firebase-admin моего репозитория для сравнения.

Теперь, когда мы успешно настроили обмен сообщениями администратора, давайте теперь напишем код для отправки уведомлений.

Отправка push-уведомлений из бэкенда

Конфигурация сообщений данных FCM очень проста. Все, что вам нужно сделать, это указать одну или несколько целей и JSON сообщения, которое вы хотите отправить клиенту (клиентам). В JSON нет обязательных ключей. Вы сами решаете, какие пары ключ-значение вы хотите включить в данные. Форма сообщений данных работает на всех платформах, поэтому наше уведомление также может быть обработано мобильными устройствами.

Есть дополнительные настройки для других платформ. Например, есть настройки android , которые работают только с устройствами Android, и настройки apns , которые работают только на устройствах iOS. Вы можете найти руководство по настройке здесь.

Создайте файл server/src/notify.js и введите приведенный ниже код.

 import { messaging } from './firebaseInit'; export const sendNotificationToClient = (tokens, data) => { // Send a message to the devices corresponding to the provided // registration tokens. messaging .sendMulticast({ tokens, data }) .then(response => { // Response is an object of the form { responses: [] } const successes = response.responses.filter(r => r.success === true) .length; const failures = response.responses.filter(r => r.success === false) .length; console.log( 'Notifications sent:', `${successes} successful, ${failures} failed` ); }) .catch(error => { console.log('Error sending message:', error); }); };

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

Метод sendMulticast экземпляра обмена сообщениями возвращает обещание. В случае успеха мы получаем массив, из которого мы подсчитываем количество успешных и неудачных уведомлений. Вы, конечно, можете обрабатывать этот ответ так, как хотите.

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

Откройте server/src/controllers/message.js и обновите функцию addMessage .

 import { sendNotificationToClient } from '../notify'; export const addMessage = async (req, res) => { const { name, message } = req.body; const columns = 'name, message'; const values = `'${name}', '${message}'`; try { const data = await messagesModel.insertWithReturn(columns, values); const tokens = []; const notificationData = { title: 'New message', body: message, }; sendNotificationToClient(tokens, notificationData); res.status(200).json({ messages: data.rows }); } catch (err) { res.status(200).json({ messages: err.stack }); } };

Эта функция обрабатывает почтовый запрос к конечной точке /messages . После успешного создания сообщения функция sendNotificationToClient отправляет уведомление, за которым следует ответ клиенту. Единственная недостающая часть в этом коде — это tokens для отправки уведомлений.

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

С этим последним фрагментом кода мы завершили внутреннюю реализацию. Давайте теперь переключимся на интерфейс.

Соответствующая ветка в моем репо на данный момент — 03-send-notification.

Настройка уведомлений Firebase Messaging на клиенте

Давайте взглянем на основные компоненты нашего внешнего приложения React.

Откройте client/src/App.js и проверьте содержимое. Я пропущу большую часть операторов импорта и просто взгляну на логику программы.

 # library imports import { Messaging } from './Messaging'; axios.defaults.baseURL = 'https://localhost:3001/v1'; const App = () => { return ( <Fragment> <ToastContainer autoClose={2000} position="top-center" /> <Navbar bg="primary" variant="dark"> <Navbar.Brand href="#home">Firebase notifictations with React and Express</Navbar.Brand> </Navbar> <Container className="center-column"> <Row> <Col> <Messaging /> </Col> </Row> </Container> </Fragment> ); }; export default App;

Это обычный реагирующий компонент, стилизованный под react-bootstrap. В верхней части нашего приложения есть всплывающий компонент, который мы будем использовать для отображения уведомлений. Обратите внимание, что мы также установили baseURL для библиотеки axios . Все самое важное происходит внутри компонента <Messaging /> . Давайте теперь посмотрим на его содержание.

Откройте client/src/Messaging.js и проверьте содержимое.

 export const Messaging = () => { const [messages, setMessages] = React.useState([]); const [requesting, setRequesting] = React.useState(false); React.useEffect(() => { setRequesting(true); axios.get("/messages").then((resp) => { setMessages(resp.data.messages); setRequesting(false); }); }, []); return ( <Container> {/* form goes here */} <div className="message-list"> <h3>Messages</h3> {requesting ? ( <Spinner animation="border" role="status"> <span className="sr-only">Loading...</span> </Spinner> ) : ( <> {messages.map((m, index) => { const { name, message } = m; return ( <div key={index}> {name}: {message} </div> ); })} </> )} </div> </Container> ); };

У нас есть две переменные состояния, messages и requesting . messages представляют собой список сообщений из нашей базы данных, а requesting предназначен для переключения состояния нашего загрузчика. У нас есть блок React.useEffect , в котором мы делаем вызов API к конечной точке /messages и устанавливаем возвращаемые данные в состояние наших messages .

В операторе return мы сопоставляем сообщения и отображаем поля name и message . На той же странице мы включаем форму для создания новых сообщений.

 <Formik initialValues={{ name: "", message: "", }} onSubmit={(values, actions) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); actions.setSubmitting(false); toast.success("Submitted succesfully"); }, 1000); }} > {(prop) => { const { handleSubmit, handleChange, isSubmitting } = prop; return ( <> <InputGroup className="mb-3"> <InputGroup.Prepend> <InputGroup.Text>Name</InputGroup.Text> </InputGroup.Prepend> <FormControl placeholder="Enter your name" onChange={handleChange("name")} /> </InputGroup> <InputGroup className="mb-3"> <InputGroup.Prepend> <InputGroup.Text>Message</InputGroup.Text> </InputGroup.Prepend> <FormControl onChange={handleChange("message")} placeholder="Enter a message" /> </InputGroup> {isSubmitting ? ( <Button variant="primary" disabled> <Spinner as="span" size="sm" role="status" animation="grow" aria-hidden="true" /> Loading... </Button> ) : ( <Button variant="primary" onClick={() => handleSubmit()}> Submit </Button> )} </> ); }} </Formik>

Мы используем библиотеку Formik для управления нашей формой. Мы передаем компоненту <Formik /> свойства initialvalues , onSubmit и компонент формы, который мы хотим отобразить. Взамен мы получаем некоторые удобные функции, такие как handleChange , которые мы можем использовать для управления входными данными формы, и handleSubmit , которые мы используем для отправки формы. isSubmitting — это boolean , которое мы используем для переключения состояния кнопки отправки.

Я призываю вас попробовать formik. Это действительно упрощает работу с формами. Мы заменим код в методе onSubmit позже.

Давайте теперь реализуем метод, который будет запрашивать разрешение браузера и назначать ему токен.

Чтобы начать использовать Firebase во внешнем интерфейсе, нам необходимо установить клиентскую библиотеку Firebase JavaScript. Обратите внимание, что это пакет, отличный от firebase-admin SDK .

 # install firebase client library yarn add firebase

Создайте файл client/src/firebaseInit.js и добавьте следующее содержимое.

 import firebase from 'firebase/app'; import 'firebase/messaging'; const config = { apiKey: "API-KEY", authDomain: "AUTH-DOMAIN", databaseURL: "DATABASE-URL", projectId: "PROJECT-ID", storageBucket: "STORAGE-BUCKET", messagingSenderId: "MESSAGING-SENDER-ID", appId: "APP-ID" }; firebase.initializeApp(config); const messaging = firebase.messaging(); // next block of code goes here

В документах Firebase указано, что:

«Полный клиент Firebase JavaScript включает поддержку аутентификации Firebase, базы данных Firebase Realtime, хранилища Firebase и обмена облачными сообщениями Firebase».

Итак, здесь мы импортируем только функцию обмена сообщениями. На этом этапе вы можете обратиться к разделу о создании проекта Firebase, чтобы получить объект config . Затем мы инициализируем Firebase и экспортируем функцию обмена сообщениями. Давайте добавим последний блок кода.

 export const requestFirebaseNotificationPermission = () => new Promise((resolve, reject) => { messaging .requestPermission() .then(() => messaging.getToken()) .then((firebaseToken) => { resolve(firebaseToken); }) .catch((err) => { reject(err); }); }); export const onMessageListener = () => new Promise((resolve) => { messaging.onMessage((payload) => { resolve(payload); }); });

Функция requestFirebaseNotificationPermission запрашивает у браузера разрешение на отправку уведомлений и разрешается с помощью токена, если запрос удовлетворен. Это токен, который FCM использует для отправки уведомления в браузер. Это то, что вызывает запрос, который вы видите в браузерах, запрашивающий разрешение на отправку уведомления.

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

Откройте client/src/App.js и импортируйте функцию requestFirebaseNotificationPermission .

 import { requestFirebaseNotificationPermission } from './firebaseInit'

Затем внутри функции App добавьте приведенный ниже код перед оператором return.

 requestFirebaseNotificationPermission() .then((firebaseToken) => { // eslint-disable-next-line no-console console.log(firebaseToken); }) .catch((err) => { return err; });

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

Теперь запустите приложение, и вы должны увидеть сообщение с запросом на уведомление. Нажмите «Разрешить» и подождите, пока токен будет зарегистрирован в консоли. Поскольку вы предоставили разрешение браузеру, если мы обновим страницу, вы больше не увидите баннер, но токен все равно будет зарегистрирован в консоли.

Вы должны знать, что браузер Firefox (v75) по умолчанию не запрашивает разрешение на уведомление. Запрос разрешения должен быть инициирован действием пользователя, таким как щелчок.

Это хороший момент для меня, чтобы зафиксировать мои изменения. Соответствующая ветвь — 04-запрос-разрешение.

Давайте теперь завершим код для сохранения сообщения в нашу базу данных.

Откройте client/src/Messaging.js и замените функцию onSubmit нашей формы приведенным ниже кодом.

 onSubmit={(values, actions) => { axios .post("/messages", values) .then((resp) => { setMessages(resp.data.messages.concat(messages)); actions.setSubmitting(false); toast.success("Submitted succesfully"); }) .catch((err) => { console.log(err); toast.error("There was an error saving the message"); }); }}

Мы делаем post запрос к конечной точке /messages , чтобы создать новое сообщение. Если запрос выполнен успешно, мы берем возвращенные данные и помещаем их в начало списка messages . Мы также показываем тост успеха.

Давайте попробуем, чтобы увидеть, работает ли это. Запустите внешний и внутренний серверы. Прежде чем опробовать почтовый запрос, откройте server/src/controllers/messages.js и закомментируйте строку, в которую мы отправляем уведомление.

 # this line will throw an error if tokens is an empty array comment it out temporarily // sendNotificationToClient(tokens, notificationData);

Попробуйте добавить несколько сообщений в базу данных. Работает? Замечательно. Теперь раскомментируйте эту строку, прежде чем продолжить.

Скопируйте токен уведомления из консоли разработчика и вставьте его в массив токенов. Маркер представляет собой очень длинную строку, как показано ниже.

 const tokens = [ 'eEa1Yr4Hknqzjxu3P1G3Ox:APA91bF_DF5aSneGdvxXeyL6BIQy8wd1f600oKE100lzqYq2zROn50wuRe9nB-wWryyJeBmiPVutYogKDV2m36PoEbKK9MOpJPyI-UXqMdYiWLEae8MiuXB4mVz9bXD0IwP7bappnLqg', ];

Откройте client/src/Messaging.js , импортируйте onMessageListener и вызовите его прямо под блоком useEffect . Любая позиция внутри функции допустима, если она находится перед оператором return .

 import { onMessageListener } from './firebaseInit'; React.useEffect(() => { ... }, []); onMessageListener() .then((payload) => { const { title, body } = payload.data; toast.info(`${title}; ${body}`); }) .catch((err) => { toast.error(JSON.stringify(err)); });

Прослушиватель возвращает обещание, которое в случае успеха преобразуется в полезную нагрузку уведомления. Затем мы отображаем заголовок и текст в тосте. Обратите внимание, что мы могли бы предпринять любые другие действия, как только получили это уведомление, но здесь я делаю все просто. Когда оба сервера работают, попробуйте и посмотрите, работает ли он.

Работает? Замечательно.

Если у вас возникнут проблемы, вы всегда можете сравнить с моим репозиторием. Соответствующая ветвь на этом этапе — 05-прослушивание-уведомления.

Нам нужно позаботиться об одной мелочи. Прямо сейчас мы можем видеть уведомления только тогда, когда браузер находится на переднем плане. Суть уведомлений в том, что они должны появляться независимо от того, находится ли браузер на переднем плане или нет.

Если бы мы должны были отправить отображаемое сообщение, т. е. мы включили объект notification в нашу полезную нагрузку уведомления, браузер позаботится об этом самостоятельно. Но поскольку мы отправляем сообщение с данными, мы должны сообщить браузеру, как вести себя в ответ на уведомление, когда наш браузер находится в фоновом режиме.

Для обработки фонового уведомления нам нужно зарегистрировать сервисного работника в нашем внешнем клиенте.

Создайте файл client/public/firebase-messaging-sw.js и введите следующее содержимое:

 importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js'); const config = { apiKey: "API-KEY", authDomain: "AUTH-DOMAIN", databaseURL: "DATABASE-URL", projectId: "PROJECT-ID", storageBucket: "STORAGE-BUCKET", messagingSenderId: "MESSAGING-SENDER-ID", appId: "APP-ID" }; firebase.initializeApp(config); const messaging = firebase.messaging(); messaging.setBackgroundMessageHandler(function(payload) { console.log('[firebase-messaging-sw.js] Received background message ', payload); const notificationTitle = payload.data.title; const notificationOptions = { body: payload.data.body, icon: '/firebase-logo.png' }; return self.registration.showNotification(notificationTitle, notificationOptions); }); self.addEventListener('notificationclick', event => { console.log(event) return event; });

В верхней части файла мы импортируем библиотеки firebase-app и firebase-messaging , поскольку нам нужна только функция обмена сообщениями. Не беспокойтесь, если синтаксис импорта новый. Это синтаксис для импорта внешних скриптов в файлы сервис-воркеров. Убедитесь, что импортируемая версия совпадает с версией в package.json . Я столкнулся с проблемами, которые решил путем согласования версий.

Как обычно, мы инициализируем Firebase, затем вызываем setBackgroundMessageHandler , передавая ему обратный вызов, который получает полезную нагрузку сообщения уведомления. Оставшаяся часть кода указывает, как браузер должен отображать уведомление. Обратите внимание, что мы также можем включить значок для отображения.

Мы также можем управлять тем, что происходит, когда мы нажимаем на notificationclick с помощью обработчика событияnotificationclick.

Создайте файл client/src/serviceWorker.js и введите нижеприведенное содержимое.

 export const registerServiceWorker = () => { if ('serviceWorker' in navigator) { navigator.serviceWorker .register('firebase-messaging-sw.js') .then(function (registration) { // eslint-disable-next-line no-console console.log('[SW]: SCOPE: ', registration.scope); return registration.scope; }) .catch(function (err) { return err; }); } };

Эта функция регистрирует наши файлы сервис-воркеров. Обратите внимание, что мы заменили более подробную версию, сгенерированную React. Сначала мы проверяем, присутствует ли serviceWorker в объекте navigator . Это простая поддержка браузера. Если браузер поддерживает сервис-воркеры, мы регистрируем созданный ранее файл сервис-воркеров.

Теперь откройте client/src/index.js , импортируйте эту функцию и вызовите ее.

 # other imports import { registerServiceWorker } from './serviceWorker' ReactDOM.render( ... ); registerServiceWorker()

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

Откройте https://localhost:3000/messaging во втором браузере и создайте сообщение. Вы должны увидеть уведомление из другого браузера.

На этом мы подошли к концу этого урока. Соответствующая ветка в моем репо — 06-handle-background-notification.

Заключение

В этой статье мы узнали о различных типах уведомлений, которые мы можем отправлять с помощью Firebase Cloud Messaging (FCM). API. Затем мы реализовали тип «сообщение данных» на бэкэнде. Наконец, мы сгенерировали токен в клиентском приложении, который мы использовали для получения уведомлений, запускаемых серверным приложением. Наконец, мы узнали, как прослушивать и отображать уведомления, когда браузер находится в фоновом или переднем плане.

Я рекомендую вам ознакомиться с документацией FCM, чтобы узнать больше.

Связанные ресурсы

• Firebase, официальный сайт
• Fireact, Орджи Чиди Мэтью, GitHub
• «Firebase: успех приложений стал проще», блог npm
• Консоль Firebase
• Firebase Admin Node.js SDK, блог npm
• WebpushConfig, документы Firebase
• sendMulticast , Документы Firebase
• Поваренная книга сервис-воркера, Mozilla
• Уведомление, Документы Firebase
• Облачный обмен сообщениями Firebase, документация Firebase
• «Как настроить серверный проект Express API с помощью PostgreSQL», Чиди Орджи.