Как интегрировать push-уведомления в PWA

Опубликовано: 2021-04-28

Оглавление

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

Прогрессивные веб-приложения и push-уведомления

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

 Рекомендуемая литература: PWA vs Native: что вам больше подходит?

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

Джон Крафчик, Chrome Dev Summit 2019
Триггеры push-уведомлений — Chrome Dev Summit 2019
Новое в Chrome 80: триггеры уведомлений позволяют получать уведомления даже в режиме полета.

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

 Рекомендуемая литература: 9 обязательных функций прогрессивного веб-приложения (PWA) для электронной коммерции

Как интегрировать Push-уведомления в PWA

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

Предпосылки

  • Учетная запись Firebase (поскольку вы будете создавать проект в Firebase)
  • Прогрессивное веб-приложение. Для упрощенной демонстрации мы будем использовать приложение create-react-app, которое представляет собой базовое PWA, которое можно создать с помощью команды
Push-уведомления PWA: создание проекта Firebase
Создайте проект с помощью Firebase

Шаг 1. Создайте базовое PWA

Поскольку мы будем создавать базовое PWA с помощью приложения create-react-app, давайте сначала загрузим NodeJS. После завершения установки NodeJS откройте командную строку NodeJS и выполните следующие команды.

Чтобы создать простое приложение React в указанном вами каталоге: 

 npx создать-реагировать-приложение ваш-pwa-каталог

Измените текущий рабочий каталог на только что созданное приложение React: 

 cd ваш-pwa-каталог

Добавьте библиотеку JavaScript Firebase в проект: 

 npm установить firebase --save
Установка Firebase

Шаг 2: Создайте свой push-notification.js

Следующим шагом будет создание модуля, который будет отвечать за всю обработку ваших уведомлений. В <your-pwa-directory>\src создайте файл с именем push-notification.js .

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

Firebase SDK для push-уведомлений PWA

Это направит вас на другую страницу, содержащую Firebase SDK для вашего PWA:

SDK Firebase

Теперь, когда у нас есть ключи для нашего проекта, давайте добавим следующий код в ваш push-notification.js . 

 импортировать firebase из «firebase»;
экспортировать константу initializeFirebase = () => {
  firebase.initializeApp({
    APIKey: "ХХХХХХХХХХХ",
    authDomain: "ХХХХХХХХХХХ",
    URL-адрес базы данных: "ХХХХХХХХХХХ",
    ID проекта: "ХХХХХХХХХХХ",
    storageBucket: "ХХХХХХХХХХХ",
    идентификатор отправителя сообщений: "XXXXXXXXXXXXXXX",
    идентификатор приложения: "ХХХХХХХХХХХ"
  });
}

С этим вы создали функцию, отвечающую за всю вашу обработку уведомлений, теперь вам нужно импортировать и вызывать ее. Отредактируйте свой index.js следующим образом: 

 импортировать React из «реагировать»;
импортировать ReactDOM из 'react-dom';
импортировать './index.css';
импортировать приложение из './App';
импортировать * как serviceWorkerRegistration из './serviceWorkerRegistration';
импортировать reportWebVitals из './reportWebVitals';
импортировать firebase из «firebase»;
импортировать {initializeFirebase} из './push-notification';
ReactDOM.render(<App/>, document.getElementById('root'));
инициализироватьFirebase();

Шаг 3. Создайте сервис-воркера

Service Workers — это название технологии, лежащей в основе прогрессивного веб-приложения, которая поддерживает его автономные возможности, push-уведомления и кэширование ресурсов.

SimiCart, все, что вам нужно знать о прогрессивных веб-приложениях

Service Worker требуется для получения события onMessage и, следовательно, для отправки уведомлений на устройство пользователя. По умолчанию Firebase автоматически ищет файл с именем firebase-messaging-sw.js .

Давайте добавим firebase-messaging-sw.js в каталог, где обслуживаются ваши файлы. Поскольку наш проект create-react-app , этот firebase-messaging-sw.js будет находиться в нашей общей папке: 

 importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
    APIKey: "ХХХХХХХХХХХ",
    authDomain: "ХХХХХХХХХХХ",
    URL-адрес базы данных: "ХХХХХХХХХХХ",
    ID проекта: "ХХХХХХХХХХХ",
    storageBucket: "ХХХХХХХХХХХ",
    идентификатор отправителя сообщений: "XXXXXXXXXXXXXXX",
    идентификатор приложения: "ХХХХХХХХХХХ"
});
постоянный обмен сообщениями = firebase.messaging();

Если вы еще не слышали об PWA Service Worker, у нас есть эксклюзивная статья, в которой вы узнаете все об этой удивительной технологии.

Шаг 4. Запросите разрешения пользователя на отправку уведомлений

Это век конфиденциальности, и вы не хотите раздражать своих пользователей, отправляя нежелательные и несанкционированные уведомления!

Чтобы запросить разрешение вашего пользователя, просто добавьте это в свой push-notification.js : 

 импортировать firebase из «firebase»;
 
экспортировать константу initializeFirebase = () => {
  firebase.initializeApp({
    APIKey: "ХХХХХХХХХХХ",
    authDomain: "ХХХХХХХХХХХ",
    URL-адрес базы данных: "ХХХХХХХХХХХ",
    ID проекта: "ХХХХХХХХХХХ",
    storageBucket: "ХХХХХХХХХХХ",
    идентификатор отправителя сообщений: "XXXXXXXXXXXXXXX",
    идентификатор приложения: "ХХХХХХХХХХХ"
  });
}
 
export const askForPermissionToReceiveNotifications = async () => {
  пытаться {
    постоянный обмен сообщениями = firebase.messaging();
    ждать сообщения.requestPermission();
    константный токен = ожидание сообщений.getToken();
    console.log('Ваш токен:', токен);
    
    токен возврата;
  } поймать (ошибка) {
    консоль.ошибка(ошибка);
  }
}

А так как эту функцию нужно будет откуда-то вызывать, то добавим ее по нажатию кнопки. Отредактируйте файл app.js в вашем каталоге /src/ следующим образом: 

 импортировать логотип из './logo.svg';
импортировать './App.css';
import { askForPermissionToReceiveNotifications } из './push-notification';

приложение функции () {
  возвращаться (
    <div className="Приложение">
      <header className="Заголовок приложения">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Отредактируйте <code>src/App.js</code> и сохраните для перезагрузки.
        </p>
        <а
          className="Ссылка на приложение"
          href="https://reactjs.org"
          цель = "_ пусто"
          rel="noopener noreferrer"
        >
          Изучите реакцию
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          Нажмите, чтобы получать уведомления
        </кнопка>
      </заголовок>
    </div>
  );
}

экспортировать приложение по умолчанию;

Теперь давайте запустим наш проект, и вы должны увидеть кнопку « Нажмите, чтобы получать уведомления », например:

Нажмите, чтобы получать уведомления

Нажмите на кнопку, и вы должны увидеть всплывающее окно с запросом вашего разрешения:

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

Нажмите « Разрешить » и проверьте консоль браузера. Вы должны увидеть сообщение, уведомляющее вас о вашем токене:

Сгенерированный токен использования

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

Шаг 5: Отправляйте push-уведомления с помощью Postman

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

В Postman создайте запрос POST со следующей информацией:

  • URL-адрес запроса : https://fcm.googleapis.com/fcm/send
  • Заголовки : в заголовках вашего запроса POST вам понадобятся следующие ключи:

Авторизация: ключ= SERVER_KEY

Тип содержимого : приложение/json

Правильно настроенная авторизация и Content-Type

Примечания : SERVER_KEY можно найти на вкладке Cloud Messaging в настройках Firebase.

  • Body : заполните тело вашего POST-запроса следующим кодом: 
 {
    "уведомление": {
        "title": "СимиКарт",
        "body": "Тестовое push-уведомление",
        "click_action": "http://localhost:3000/",
        "значок": "https://i.imgur.com/5zO5cce.png"
    }
    "кому": "USER_TOKEN"
}

Замените USER_TOKEN токеном, который вы получили (нажав кнопку « Нажмите для получения уведомлений ») на шаге 4. Не забудьте выбрать «Тип тела» как « сырой » и « JSON ».

Тело почтальона

Теперь нажмите « Отправить », и вы должны увидеть всплывающее уведомление в правом нижнем углу:

Результат тестового push-уведомления

Примечания . Эти уведомления появляются только тогда, когда приложение находится в фоновом режиме или свернуто.

Поздравляем! Теперь ваше PWA может отправлять уведомления!

Вывод

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

Исследуйте Simicart PWA