Новости программирования

Внедрение push-уведомлений с помощью Firebase для приложений Javascript

Краткое описание по статье Внедрение push-уведомлений с помощью Firebase для приложений Javascript

Название: Внедрение push-уведомлений с помощью Firebase для приложений Javascript . Краткое описание: [ad_1] ⭐ Эти уведомления, к которым мы привыкли на сма . Дата публикации: 21.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

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

И эти уведомления в Интернете, которые мы ненавидим, потому что каждый спам-сайт запрашивает у нас разрешение на отправку нам своего спама. Однако сама технология полезна. Раньше я не реализовывал push-уведомления. Такого случая не было, но недавно мне нужно было как можно быстрее оповестить своих пользователей о важной информации. Электронная почта — это хорошо, но сначала пользователь должен открыть почтовый клиент. С уведомлениями вы сразу видите всплывающее окно.

Я решил написать эту статью, потому что не нашел исчерпывающей информации о реализации браузерных уведомлений для приложений React, Next.JS, Node. Мы будем использовать Firebase для этой цели, чтобы сэкономить время, не создавая решения с нуля.

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

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

  • новые комментарии под постом пользователя;
  • новое сообщение на какой-либо платформе;
  • важная информация, которую следует обрабатывать быстро;

Остальные неважные вещи могут отправляться по электронной почте.

Как это работает

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

Обзор push-уведомлений

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

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

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

Сервер обмена сообщениями? Это любой сервер, который знает, как общаться с вашим сервис-воркером. Вы можете создать его самостоятельно и закодировать сервис-воркера, который будет оттуда управлять сообщениями. Но мы не будем усложнять себе жизнь и будем использовать Firebase.

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

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

Для дальнейшей настройки вы должны создать проект в консоли Firebase и иметь конфигурацию оттуда (файл JSON).

Настройка внешнего интерфейса

У меня есть приложение Next.js, но этот алгоритм охватывает любое приложение, написанное на Javascript, оно не зависит от библиотеки и фреймворка.

Установите Firebase в свой проект, чтобы мы могли использовать простые функции, а не выполнять запросы к FCM (Firebase Cloud Messaging) вручную.

$ npm install firebase
# or
$ yarn add firebase

Найдите место, где вы хотите спросить пользователя о разрешении на уведомление. Например, это может быть кнопка с надписью «Подписаться на уведомления браузера». При нажатии этой кнопки вы будете вызывать функцию getFCMToken() написано ниже:

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken } from 'firebase/messaging';

// Replace these values with your project's ones
// (you can find such code in the Console)
const firebaseConfig = {
    apiKey: 'xxxxx-xxx',
    authDomain: 'xxxx.firebaseapp.com',
    projectId: 'xxxx-xxxx',
    storageBucket: 'xxxx.appspot.com',
    messagingSenderId: '00000000',
    appId: '0:00000:00000000'
};

export const app = initializeApp(firebaseConfig);
const messaging = getMessaging();

export async function getFCMToken() {
    try {
        // Don't et to paste your VAPID key here
    // (you can find it in the Console too)
        const token = await getToken(messaging, { vapidKey: <YOUR_VAPID_KEY> });
        return token;
    } catch (e) {
        console.log('getFCMToken error', e);
        return undefined
    }
}

С помощью этого кода мы инициализируем библиотеку Firebase и пишем это getFCMToken() функция. Он извлекает регистрационный токен из FCM и он также запрашивает у пользователя разрешение на уведомление. Если разрешения приняты, только тогда он свяжется с FCM, чтобы зарегистрировать этого пользователя. В противном случае код выдает ошибку, которую вы поймаете в catch блокировать.

Затем вы получаете токен FCM (уникальный токен пользователя в системе FCM), который вы будете использовать для отправки уведомлений. Так что вам нужно сохранить его где-то. Обычно у вас есть сервер, на который вы можете отправить токен, и он сохранит его в базе данных для этого конкретного пользователя. В противном случае вы не сможете отправлять уведомления пользователям. Требуется наличие Firebase Admin SDK, который доступен в серверных средах.

Однако есть некоторые исключения. В некоторых случаях, когда вы хотите только подписывать пользователей на ваши уведомления, например, в новостной рассылке, вы не можете хранить токены FCM. Они есть в Firebase, и вы можете отправлять уведомления вручную из консоли. Но их невозможно отправить автоматически (программно), потому что вы не можете различать пользователей (у вас нет токенов).

И последнее, что нужно иметь сервис-воркеру, который будет обрабатывать уведомления от FCM. Создайте файл, который будет доступен в корневом каталоге вашего веб-приложения, файл с именем firebase-messaging-sw.js. Он должен быть доступен на https://yourwebsite.com/firebase-messaging-sw.js. Его содержание:

// It's a static script file, so it won't be covered by a module bundling system
// hence, it uses "importScripts" function to load the other libs
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');

// Replace the values with yours
const firebaseConfig = {
    apiKey: 'xxx',
    authDomain: 'xxx',
    projectId: 'xxx',
    storageBucket: 'xxx',
    messagingSenderId: 'xxx',
    appId: 'xxx'
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

// Not necessary, but if you want to handle clicks on notifications
self.addEventListener('notificationclick', (event) => {
    event.notification.close()

    const pathname = event.notification?.data?.FCM_MSG?.notification?.data?.link
    if (!pathname) return
    const url = new URL(pathname, self.location.origin).href

    event.waitUntil(
        self.clients
            .matchAll({ type: 'window', includeUncontrolled: true })
            .then((clientsArr) => {
                const hadWindowToFocus = clientsArr.some((windowClient) =>
                    windowClient.url === url ? (windowClient.focus(), true) : false
                )

                if (!hadWindowToFocus)
                    self.clients
                        .openWindow(url)
                        .then((windowClient) =>
                            windowClient ? windowClient.focus() : null
                        )
            })
    )
})

Это все на лицевой стороне! Вы можете проверить свою кнопку, при нажатии она должна запросить ваше разрешение (если быть точным, браузер спрашивает) на отправку вам уведомлений. Когда вы разрешите это, вы должны увидеть токен FCM (console.log его где-то)

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

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

$ npm install firebase-admin

У вас также есть конфигурация для серверной части в консоли. Он отличается от клиентского тем, что имеет закрытый ключ, которым нужно подписать ваше уведомление, которое будет отправлено в FCM. Положи это firebase.json файл (он называется служебной учетной записью) где-то, чтобы быть доступным из кода, вы можете поместить его как переменную среды.

Затем вы должны инициализировать библиотеку Firebase при запуске сервера (или позже, если вы хотите контролировать поток). Я поместил эту логику в отдельный файл:

import admin from 'firebase-admin';

import serviceAccount from './config/firebase.json';

export function init() {
    admin.initializeApp({
        credential: admin.credential.cert(serviceAccount),
    });
}

При запуске сервера вызовите init() и Firebase готов служить вам.

Я не буду рассказывать о хранении токенов FCM, я уверен, что вы знаете, как это сделать, и это не является целью этой статьи. Итак, если у вас есть инициализированная Firebase на сервере (из последнего абзаца) и у вас есть токен FCM пользователя, вы готовы отправлять push-уведомления в браузер пользователя! Это выглядит так:

import { getMessaging } from 'firebase-admin/messaging';

// I use Typescript, you may not, but types will help you
// to understand what data structures FCM expects.
// It's an internal structure though, firebase-admin has
// good typings in the library
interface Message {
  title: string;
    body: string;
    requireInteraction?: boolean;
    link?: string;
}

// Use this function to send push notifications to a specific user
export async function sendFCMMessage(fcmToken: string, msg: Message): Promise<string> {
    try {
        const res = await getMessaging().send({
            webpush: {
                notification: {
                    ...msg,
                    icon: 'https://your-website.com/favicon.png',
                    requireInteraction: msg.requireInteraction ?? false,
                    actions: [{
                        title: 'Open',
                        action: 'open',
                    }],
                    data: {
                        link: msg.link,
                    },
                },
            },
            token: fcmToken,
        });
        return res;
    } catch (e) {
        console.error('sendFCMMessage error', e);
    }
}

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

interface BaseMessage {
    data?: {
        [key: string]: string;
    };
    notification?: Notification;
    android?: AndroidConfig;
    webpush?: WebpushConfig;
    apns?: ApnsConfig;
    fcmOptions?: FcmOptions;
}

я пытался использовать notification как универсальный, но у меня были проблемы с нажатием на уведомления, браузер не обрабатывал клики (у сервис-воркера был обработчик кликов). Плюс были проблемы с отображением иконок на уведомлениях. Лучше использовать webpush если вы ориентируетесь на пользователей настольных компьютеров. Токен FCM может быть для разных платформ: Android, iOS, веб.

Внутри webpush, Есть title и body которые соответствуют заголовку и телу уведомления. есть icon если вы хотите, чтобы ваше уведомление имело значок. Поместите общедоступное изображение, которое вы хотите показать. Набор requireInteraction к true если вы не хотите, чтобы уведомление закрывалось через несколько секунд, оно должно дождаться явной реакции пользователя.
есть обычай link поле внутри data, он предназначен для того, чтобы сервис-воркер правильно читал и обрабатывал нажатия на уведомления.

Я не знаю обо всех браузерах, но мой браузер (Brave) не обрабатывает уведомление по умолчанию, щелкающее по всей области, должны быть настраиваемые кнопки. Я определяю их в actions поле. Вроде неважно какие кнопки с действиями я ставлю, кнопка «Открыть»(действие) будет открывать урл из data.link собственность я посылаю.

Резюме

Веб-push-уведомления несложно реализовать, если вы можете использовать Firebase. Кроме того, легко отправлять сообщения на разные устройства на разных платформах. Получите токен FCM только на стороне клиента (на мобильном устройстве, в Интернете или на рабочем столе) и отправляйте уведомления с сервера.

Источник

[ad_2]
Source: codementor.io/community/new

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»