Пошаговое руководство по интеграции Push API с использованием Service Workers в серверную часть Node.js и интерфейсную часть React.js.
Начнем с самого начала: что такое push-уведомления и почему я хочу их использовать?
Push-уведомления - это использование API уведомлений в сочетании с данными, отправляемыми через Push API. Они являются одной из многих функций, которые дают Progressive Web Apps по-настоящему конкурентоспособный опыт по сравнению с их аналогами из Native App. Как и сокеты, они позволяют серверу отправлять данные клиенту, не дожидаясь, пока клиент инициирует транзакцию, как это требуется по HTTP. Однако, в отличие от сокетов, они позволяют передавать эти данные в фоновом режиме, пока ваше приложение закрыто. Это то, что позволяет пользователю получать сообщения, уведомления о событиях, обновления транзакций и т. Д., Не открывая ваше приложение.
Так как же работает push?
Чтобы клиент мог получать push-уведомления в фоновом режиме, пока ваше приложение закрыто, ваше приложение должно использовать сервис-воркеров. Service worker - это файл Javascript, установленный на клиентском устройстве, который позволяет устройству знать, какие файлы следует кэшировать и какие события следует отслеживать. Этот сервисный работник может зарегистрировать устройство пользователя в облачной службе и запрограммирован с инструкциями о том, как обрабатывать push-уведомления из облака. Когда сервисный работник регистрируется в облаке, он запрограммирован на отправку полученного токена обратно на ваш сервер, который действует как адрес для устройства конечного пользователя.
Обработка Push API в Node.js
На этом семинаре мы будем использовать web-push для обработки Push API. Первое, что нам нужно настроить, - это сгенерировать ключи VAPID и получить ключ API Google. Начнем с: npm i -g web-push, глобальная установка позволит нам сгенерировать ключи VAPID прямо из командной строки. После установки мы можем просто запустить web-push generate-vapid-keys в командной строке, а затем скопировать / вставить полученные ключи в файл secrets.js или в переменные среды наших развернутых приложений. Чтобы получить ключ Google, вам нужно перейти в Консоль Google API, создать проект, включить Google Cloud Messaging API, а затем создать ключ API на вкладке учетных данных.
Следующим шагом будет создание нового push-маршрутизатора и его импорт в наш api-маршрутизатор: app.use('/push', require('./push'). Наш push-маршрутизатор - это то место, где мы будем обрабатывать всю нашу push-логику и шаблон, поэтому давайте продолжим и настроим все это:
Детали VAPID - это способ, с помощью которого клиенты могут привлекать к ответственности владельцев продуктов. Если произошла ошибка, негативно повлиявшая на клиента, эти данные VAPID дают облачной службе возможность предъявить претензию. Ключи VAPID также используются вместе с ключами, предоставляемыми пользовательской подпиской, для шифрования данных, отправляемых посредством push. Подробнее о VAPID читайте здесь
Далее будут предоставлены маршруты для публикации и удаления подписок, а также простой скрипт для отправки некоторых тестовых данных через определенные промежутки времени. Для целей этого руководства мы просто сохраним подписку в переменной, однако в реальной работе вы, вероятно, сохраните эти данные в базе данных вместе с другими данными пользователя.
В приведенном выше примере мы ожидаем, что регистрация будет размещена в теле. Функция webpush.sendNotification принимает всю эту подписку, которая должна включать конечную точку для доставки push-уведомлений и ключи для шифрования данных. Второй принимаемый параметр - это строка данных. Это может быть пустое сообщение, простое сообщение или, как описано выше, строка JSON. Для функции задан интервал, позволяющий нашему тесту продемонстрировать, что push-уведомления все еще принимаются и отображаются при закрытии вкладки или окна. Выше мы также включили маршрут удаления, который останавливает интервал отправки и удаляет объект подписки.
Подключение нашего внешнего интерфейса React к Push API
Передняя часть - это то место, где с пушем происходит большая часть настоящего волшебства. Когда клиент посещает наше приложение, мы хотим установить сервис-воркер, у которого есть прослушиватель событий для push-событий. Подробное описание того, как настроить сервис-воркеров, выходит за рамки этого семинара, но если вам интересно узнать больше, У Mozilla есть отличные ресурсы здесь. Что нас интересует, так это прослушиватель push-событий:
Как упоминалось выше, данные, прикрепленные к событию push, должны быть строкой. Итак, первое, что нам нужно сделать, это преобразовать его обратно в объект. Функция showNotification принимает заголовок и необязательный объект в качестве параметров.
Теперь, когда у нас есть слушатели событий, мы хотим предоставить нашим клиентам возможность подписаться и отказаться от подписки. Давайте начнем с создания нового модуля для обработки этого, если вы используете response-redux, эта функциональность может быть обработана в subreducer, а функции подписки / отписки могут выполняться в преобразователе. Однако для этого мы просто сосредоточимся на функциях обработки наших подписок. Модуль webpush предоставляет нам полезный шаблон в своей документации для преобразования безопасной строки base64 в URL-адрес в Uint8Array:
Теперь, когда у нас есть шаблон, давайте перейдем к этим подпискам!
В приведенном выше коде мы убеждаемся, что установленный нами сервис-воркер готов, затем берем регистрацию сервис-воркера и проверяем, присутствует ли pushManager, это то, что будет обрабатывать подписку и сохранять это для нашего клиента во внешнем интерфейсе. Мы передаем функции подписки pushManager объект с нашим теперь преобразованным публичным ключом VAPID и возможностью убедиться, что наши уведомления всегда отображаются. Затем мы, наконец, отправляем подписку обратно на наш сервер и альт! Если вы следили за этим и включали это в существующий проект, то эту функцию просто нужно прикрепить к кнопке или запустить при загрузке страницы, и она будет готова для демонстрации! Вы должны иметь возможность закрыть вкладку в своем веб-приложении и по-прежнему получать уведомления.
Но нет! Теперь мы получаем бесконечные уведомления о тестировании нашего приложения, и конца этому не видно! Нам лучше пойти дальше и дать себе и нашим пользователям возможность отказаться от подписки:
Приведенный выше код сначала находит подписку, а затем проверяет, существует она или нет. Если он существует, он отписывается, а затем отправляет запрос на удаление на наш сервер, тем самым завершая наш бесконечный поток тестовых данных!
