Як додати push-сповіщення до веб-програми за допомогою Firebase? +?

У міру розвитку веб-додатків все частіше трапляється функціональність, яку ви зазвичай асоціюєте з власною програмою у веб-програмі. Багато сайтів надсилають своїм користувачам сповіщення через браузер про різні події, що відбуваються у веб-програмі.

Сьогодні я детально покажу вам кроки, необхідні для досягнення такої функціональності у вашому веб-додатку за допомогою Firebase .

Сповіщення з Firebase

Firebase - це платформа, яка пропонує різні послуги для мобільних та веб-додатків та допомагає розробникам швидко створювати додатки з великою кількістю функцій.

Для надсилання сповіщень ми будемо використовувати службу під назвою Cloud Messaging, яка дозволяє нам надсилати повідомлення на будь-який пристрій за допомогою HTTP-запитів.

Налаштування проекту

Перш за все, вам потрібно мати обліковий запис Firebase, і вам потрібно буде створити в ньому новий проект.

Для цього демонстраційного налаштування я буду використовувати простий проект, створений за допомогою програми create-response-app , але ви можете використовувати той самий код де завгодно, де використовується JavaScript.

Окрім цього, нам потрібно додати до проекту бібліотеку Firebase.

npm install firebase --save

Тож давайте кодувати!

Після завершення налаштування ми можемо розпочати кодування модуля, який буде відповідати за сповіщення.

Давайте створимо файл всередині каталогу проекту з назвою push-notification.js.

Всередині файлу давайте створимо функцію, яка ініціалізує Firebase і передає ключі вашого проекту.

import firebase from 'firebase'; export const initializeFirebase = () => { firebase.initializeApp({ messagingSenderId: "your messagingSenderId" }); }

Ну, тепер, коли у нас є функція, нам потрібно її викликати.

Усередині точки входу проекту імпортуйте функцію та зателефонуйте їй.

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { initializeFirebase } from './push-notification'; ReactDOM.render(, document.getElementById('root')); initializeFirebase();
Ви можете знайти ключі до свого проекту в консолі Firebase.

Службовці

Сервісний працівник - це сценарій, який ваш браузер запускає у фоновому режимі, окремо від веб-сторінки, включаючи функції, які не потребують веб-сторінки або взаємодії користувача.

Щоб отримати подію onMessage , вашій програмі потрібен службовець. За замовчуванням під час запуску Firebase він шукає файл із назвою firebase-messaging-sw.js.

Але якщо у вас його вже є і ви хочете скористатися ним для отримання сповіщень, під час запуску Firebase ви можете вказати, якого працівника служби він буде використовувати. Наприклад:

export const inicializarFirebase = () => { firebase.initializeApp({ messagingSenderId: 'your messagingSenderId' }); navigator.serviceWorker .register('/my-sw.js') .then((registration) => { firebase.messaging().useServiceWorker(registration); }); }

Цей працівник служби в основному імпортує скрипт, необхідний для показу сповіщень, коли ваш додаток перебуває у фоновому режимі.

Нам потрібно додати firebase-messaging-sw.jsдо місця, де подаються ваші файли. Оскільки я використовую додаток create-response-, я збираюся додати його до загальної папки з таким вмістом:

importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-app.js'); importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js'); firebase.initializeApp({ messagingSenderId: "your messagingSenderId again" }); const messaging = firebase.messaging();

Запит дозволу на надсилання сповіщень

Що ж, всі знають, як прикро заходити на сайт і просити дозволу на надсилання повідомлень. Тож давайте зробимо це по-іншому!

Дозвольте користувачеві вибрати, отримувати повідомлення чи ні.

Перш за все, давайте створимо функцію, яка зробить запит і поверне маркер користувача.

Всередині нашого файлу push-notification.js додайте функцію:

export const askForPermissioToReceiveNotifications = async () => { try { const messaging = firebase.messaging(); await messaging.requestPermission(); const token = await messaging.getToken(); console.log('token do usuário:', token); return token; } catch (error) { console.error(error); } }

Нам потрібно звідкись викликати цю функцію, тому я додаю її натисканням кнопки.

import React from 'react'; import { askForPermissioToReceiveNotifications } from './push-notification'; const NotificationButton = () => (  Clique aqui para receber notificações  ); export default NotificationButton;

Гаразд, давайте подивимось, як це працює:

Надсилання сповіщень

Щоб надіслати сповіщення, нам потрібно зробити запит до Firebase API, повідомивши його про маркер, який отримає користувач.

У наведених нижче прикладах я використовую Postman, але ви можете зробити це з будь-якого іншого клієнта REST.

В основному нам потрібно зробити запит POST на //fcm.googleapis.com/fcm/send, надіславши JSON в тілі запиту.

Нижче наведена структура JSON, яка буде надіслана:

{ "notification": { "title": "Firebase", "body": "Firebase is awesome", "click_action": "//localhost:3000/", "icon": "//url-to-an-icon/icon.png" }, "to": "USER TOKEN" }

У заголовку запиту нам потрібно передати серверний ключ нашого проекту у Firebase та тип вмісту:

Content-Type: application/json Authorization: key=SERVER_KEY
Ключ сервера знаходиться в налаштуваннях проекту на консолі Firebase на вкладці Cloud Messaging.

Повідомлення в дії

Пам’ятайте, що сповіщення з’являться лише тоді, коли ваш додаток згорнуто або у фоновому режимі.

Саме так ми надсилаємо пряме сповіщення на пристрій.

Надсилати сповіщення групі користувачів

Що ж, тепер, коли ми побачили, як надіслати повідомлення одному користувачеві, як надіслати повідомлення одночасно кільком користувачам?

To do this, Firebase has a feature called topic, where you insert multiple tokens for a specific topic, and you can send the same notification to all of them from a single request.

How to do this

We will basically send a POST request to the address //iid.googleapis.com/iid/v1/TOKEN/rel/topics/TOPIC_NAME,passing the topic name and the token in the URL.

Do not forget to pass in the header the same authorization that we used to send the notification.

Sending the notification to users subscribed to any topic is very similar to sending a notification to a single user. The difference is that we need to pass the topic name in the “to” attribute instead of the token.

See the example below:

{ "notification": { "title": "Firebase", "body": "Firebase topic message", "click_action": "//localhost:3000/", "icon": "//localhost:3000/icon.png" }, "to": "/topics/TOPIC_NAME" }

Conclusion

Thanks for reading this! I hope you now understand how to make use of push notifications. The repository with the demo code can be found here.

To get notified of my future posts, follow me on GitHub or Twitter.