Push API позволяет веб-приложением получать сообщения, нажатые сервером, даже если веб-приложение в настоящее время не открывается в браузере или не работает на устройстве.
Push API – это недавно дополнение к API для браузера, и он в настоящее время поддерживается Chrome (Desktop и Mobile), Firefox и Opera с 2016 года.
Т.е. и края еще не поддерживают его, а Safari имеет собственную реализацию из этого. Поскольку Chrome и Firefox поддерживают его, примерно 60% пользователей, просматривающих на рабочих столах, имеют доступ к нему доступ, поэтому это довольно безопасно для использования.
Что ты можешь сделать с этим
Вы можете отправлять сообщения своим пользователям, толкая их с сервера на клиента, даже когда пользователь не просматривает сайт.
Это позволяет предоставлять уведомления и обновления контента, предоставляя вам возможность больше участвовать в вашей аудитории.
Это огромный, потому что один из пропущенных столбов мобильной сети, по сравнению с нативными приложениями, имел возможность получать уведомления, а также в автономном режиме.
Как это работает
Когда пользователь посещает ваше веб-приложение, вы можете вызвать панель, задавая разрешение на отправку обновлений. А Сервисный работник установлен и работает на заднем плане для Push Event Отказ
Ваш Сервер Отправляет уведомление клиенту, а обслуживающий работник, если дано разрешение, получает Push Event. . Работник обслуживания реагирует на это событие по вызвать уведомление .
Получение разрешения пользователя
Первый шаг в работе с PUSH API является получение разрешения пользователя на получение данных от вас.
Есть шесть шагов, чтобы получить разрешение от вашего пользователя:
- Проверьте, поддерживаются ли обслуживание работников
- Проверьте, поддерживается ли push API
- Зарегистрировать сервис
- Запросить разрешение от пользователя
- Подпишитесь на пользователя и получите объект pushsubscription
- Отправьте объект pushsubscription на ваш сервер
Давайте пройдемся через них один за другим.
Проверьте, поддерживаются ли обслуживание работников
if (!('serviceWorker' in navigator)) { // Service Workers are not supported. Return return}Проверьте, поддерживается ли push API
if (!('PushManager' in window)) { // The Push API is not supported. Return return}Зарегистрировать сервис
Этот код регистрирует сервисный работник, расположенный в рабочий.js Файл размещен в корне домена:
window.addEventListener('load', () => { navigator.serviceWorker.register('/worker.js') .then((registration) => { console.log('Service Worker registration completed with scope: ', registration.scope) }, (err) => { console.log('Service Worker registration failed', err) })})Чтобы узнать больше о том, как работники обслуживания подробно работают, проверьте Руководство работников обслуживания Отказ
Запросить разрешение от пользователя
Теперь, когда служба зарегистрирован, вы можете запросить разрешение.
API для этого изменился со временем, и он пошел от принятия функции обратного вызова в качестве параметра для возврата Обещание , нарушая обратную и переднюю совместимость. И обратите внимание, что нам нужно сделать Оба, Как мы не знаем, какой подход реализован браузером пользователя.
Код следующий, вызывающий Notification.requestpermission () Отказ
const askPermission = () => { return new Promise((resolve, reject) => { const permissionResult = Notification.requestPermission( (result) => { resolve(result) } ) if (permissionResult) { permissionResult.then(resolve, reject) } }) .then((permissionResult) => { if (permissionResult !== 'granted') { throw new Error('Permission denied') } })} MARISSISCRESULT Значение – это строка, которая может иметь значение: – предоставлено – по умолчанию – отклонен
Этот код заставляет браузер отображать диалог разрешений:
Если пользователь нажимает заблокировать, вы не сможете запросить разрешение пользователя больше , если они вручную не пройдут и разблокируют сайт на панели «Дополнительные настройки» в браузере (очень вряд ли произойдет).
Если пользователь дал нам разрешение, мы можем подписаться на них, позвонив Регистрация. pushmanager.subscribe () Отказ
const APP_SERVER_KEY = 'XXX'window.addEventListener('load', () => { navigator.serviceWorker.register('/worker.js') .then((registration) => { askPermission().then(() => { const options = { userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(APP_SERVER_KEY) } return registration.pushManager.subscribe(options) }).then((pushSubscription) => { // we got the pushSubscription object } }, (err) => { console.log('Service Worker registration failed', err) })})App_server_key . это строка – называется Ключ сервера приложений или Вагунтный ключ — Это определяет открытый ключ приложений, часть публичной/частной пары ключей.
Он будет использоваться как часть проверки, который, по соображениям безопасности, чтобы убедиться, что вы (и только вы, а не кто-то еще).
Отправьте объект pushsubscription на ваш сервер
В предыдущем фрагменте мы получили pushsubscription Объект, который содержит все, что нам нужно, чтобы отправить сообщение для пользователя. Нам нужно отправить эту информацию на наш сервер, чтобы мы могли отправить уведомления позже.
Сначала мы создаем json представление объекта
const subscription = JSON.stringify(pushSubscription)
и мы можем опубликовать его на нашем сервере, используя Fetch API :
const sendToServer = (subscription) => { return fetch('/api/subscription', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(subscription) }) .then((res) => { if (!res.ok) { throw new Error('An error occurred') } return res.json() }) .then((resData) => { if (!(resData.data && resData.data.success)) { throw new Error('An error occurred') } })}sendToServer(subscription)Серверная сторона /API/Подписка Конечная точка получает запрос на почту и может хранить информацию о подписке в его хранилище.
Как работает серверная сторона
До сих пор мы говорили только о части клиентской части: получение разрешения пользователя для уведомления в будущем.
Как насчет сервера? Что следует делать, и как он должен взаимодействовать с клиентом?
Регистрация новой подписки клиента
Когда клиент отправляет новую подписку, помните, что мы использовали /API/Подписка Конечная точка http post, отправка деталей объекта pushsubscription в формате json, в организме.
Мы инициализируем Express.js:
const express = require('express')const app = express()Эта функция утилиты гарантирует, что запрос действителен и имеет тело и свойство конечной точки, в противном случае он возвращает ошибку клиенту:
const isValidSaveRequest = (req, res) => { if (!req.body || !req.body.endpoint) { res.status(400) res.setHeader('Content-Type', 'application/json') res.send(JSON.stringify({ error: { id: 'no-endpoint', message: 'Subscription must have an endpoint' } })) return false } return true}Следующая функция утилиты сохраняет подписку на базу данных, возвращая обещание, разрешенное при выполнении вставки (или не удалось). inserttodatabase . Функция – это заполнитель – мы не будем в этих деталях здесь:
const saveSubscriptionToDatabase = (subscription) => { return new Promise((resolve, reject) => { insertToDatabase(subscription, (err, id) => { if (err) { reject(err) return } resolve(id) }) })}Мы используем эти функции в обработчике запроса после запроса ниже. Мы проверяем, действительно ли запрос, то мы сохраняем запрос и вернем Data.success: True Ответ Вернуться на клиент или ошибка:
app.post('/api/subscription', (req, res) => { if (!isValidSaveRequest(req, res)) { return } saveSubscriptionToDatabase(req, res.body) .then((subscriptionId) => { res.setHeader('Content-Type', 'application/json') res.send(JSON.stringify({ data: { success: true } })) }) .catch((err) => { res.status(500) res.setHeader('Content-Type', 'application/json') res.send(JSON.stringify({ error: { id: 'unable-to-save-subscription', message: 'Subscription received but failed to save it' } })) })})app.listen(3000, () => { console.log('App listening on port 3000')})Отправка толкающего сообщения
Теперь, когда сервер зарегистрировал клиента в своем списке, мы можем отправить его нажать сообщения. Давайте посмотрим, как это работает, создавая пример кода-фрагмента, который выбирает все подписки и отправляет толкающий сообщение для всех из них одновременно.
Мы используем библиотеку, потому что Веб-протокол Push Это сложно, и Lib позволяет нам абстрагироваться много низкого уровня, который гарантирует, что мы можем безопасно работать и можем правильно обрабатывать любой край.
Сначала мы инициализируем Веб-толчок Lib, и мы генерируем кортеж частных и публичных ключей, и устанавливаем их в качестве падающих деталей:
const webpush = require('web-push')const vapidKeys = webpush.generateVAPIDKeys()const PUBLIC_KEY = 'XXX'const PRIVATE_KEY = 'YYY'const vapidKeys = { publicKey: PUBLIC_KEY, privateKey: PRIVATE_KEY}webpush.setVapidDetails( 'mailto:my@email.com', vapidKeys.publicKey, vapidKeys.privateKey)Затем мы настроили TriggerPush () Метод, ответственный за отправку Push-мероприятия клиенту. Это просто звонит WebPush.sendnotification () и ловит любую ошибку. Если ошибка возврата HTTP-код состояния является 410 , что означает Ушел Мы удаляем этот абонент из базы данных.
const triggerPush = (subscription, dataToSend) => { return webpush.sendNotification(subscription, dataToSend) .catch((err) => { if (err.statusCode === 410) { return deleteSubscriptionFromDatabase(subscription._id) } else { console.log('Subscription is no longer valid: ', err) } })}Мы не реализуем получение подписок из базы данных, но мы оставляем его как заглушку:
const getSubscriptionsFromDatabase = () => { //stub}Мясо кода – обратный вызов почтового запроса к /API/Push Конечная точка:
app.post('/api/push', (req, res) => { return getSubscriptionsFromDatabase() .then((subscriptions) => { let promiseChain = Promise.resolve() for (let i = 0; i < subscriptions.length; i++) { const subscription = subscriptions[i] promiseChain = promiseChain.then(() => { return triggerPush(subscription, dataToSend) }) } return promiseChain }) .then(() => { res.setHeader('Content-Type', 'application/json') res.send(JSON.stringify({ data: { success: true } })) }) .catch((err) => { res.status(500) res.setHeader('Content-Type', 'application/json') res.send(JSON.stringify({ error: { id: 'unable-to-send-messages', message: `Failed to send the push ${err.message}` } })) })})Приведенный выше код получает все подписки из базы данных, то она итерация на них, и она называет TriggerPush () Функция мы объяснили раньше.
Как только подписки сделаны, мы возвращаем успешный ответ JSON. Если ошибка не произошла, а затем мы возвращаем 500 ошибок.
В реальном мире…
Маловероятно, что вы настроите свой собственный push-сервер, если у вас нет особого случая использования, или вы просто хотите узнать Tech или вам нравится DIY.
Вместо этого вы обычно хотите использовать такие платформы, как Озецignignal Какой прозрачно обрабатывает толкающие события во все виды платформ, сафари и iOS, в комплекте бесплатно.
Получить толкающее событие
Когда на сервере отправляется кнопочное событие, как клиент получает его?
Это обычный слушатель событий JavaScript, на толчок Событие, которое работает внутри сервисного работника:
self.addEventListener('push', (event) => { // data is available in event.data})Event.data Содержит PushMessagedata Объект, который обнаруживает методы для извлечения push-данных, отправленных сервером, в формате хотите:
- ArrayBuffer () В качестве объекта ArrayBuffer
- BLOB () : как объект BLOB
- JSON () : анализируют как json
- Текст () : простой текст
Вы обычно используете event.data.json () Отказ
Отображение уведомления
Здесь мы немного пересекаемся с Уведомления API Но по своей веской причине, как одно из основных случаев использования PUSH API – отображать уведомления.
Внутри нашего толчок Слушатель событий на сервисном работнике нам нужно отобразить уведомление пользователю. Нам также необходимо сказать, чтобы мероприятие подождать, пока браузер не показал его до того, как функция не сможет завершить. Мы расширяем время жизни события, пока браузер не закончит отображение уведомления (пока обещание не будет решено), в противном случае сервисный работник может быть остановлен в середине вашей обработки:
self.addEventListener('push', (event) => { const promiseChain = self.registration.showNotification('Hey!') event.waitUntil(promiseChain)})Оригинал: “https://www.freecodecamp.org/news/a-guide-to-getting-the-most-out-of-the-push-api-72a139bfeb44/”