В этой кодовой лаборатории шаг за шагом показано, как создать сервер push-уведомлений. К концу работы над кодом у вас будет сервер, который:
- Отслеживает подписки на push-уведомления (т. е. сервер создает новую запись в базе данных, когда клиент соглашается на push-уведомления, и удаляет существующую запись базы данных, когда клиент отказывается).
- Отправляет push-уведомление одному клиенту
- Отправляет push-уведомление всем подписанным клиентам
Цель этой лаборатории кода – помочь вам учиться на практике, и в ней мало говорится о концепциях. Узнайте , как работают push-уведомления? узнать о концепциях push-уведомлений.
Клиентский код этой лаборатории уже готов. В этой лаборатории кода вы будете реализовывать только сервер. Чтобы узнать, как реализовать клиент push-уведомлений, ознакомьтесь с Codelab: Создание клиента push-уведомлений .
Ознакомьтесь с push-notifications-server-codelab-complete ( source ), чтобы увидеть полный код.
Совместимость с браузером
Известно, что эта кодовая лаборатория работает со следующими комбинациями операционной системы и браузера:
- Windows: Chrome, Edge
- macOS: Chrome, Firefox
- Андроид: Хром, Фаерфокс.
Известно, что эта кодовая лаборатория не работает со следующими операционными системами (или комбинациями операционной системы и браузера):
- macOS: Brave, Edge, Safari
- iOS
Стек приложений
- Сервер построен на основе Express.js .
- Библиотека web-push Node.js обрабатывает всю логику push-уведомлений.
- Данные о подписке записываются в файл JSON с помощью lowdb .
Вам не обязательно использовать какую-либо из этих технологий для реализации push-уведомлений. Мы выбрали эти технологии, потому что они обеспечивают надежную работу в лаборатории.
Настраивать
Получите редактируемую копию кода
Редактор кода, который вы видите справа от этих инструкций, в этой лаборатории кода будет называться Glitch UI .
- Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.
Настройка аутентификации
Прежде чем вы сможете заставить работать push-уведомления, вам необходимо настроить на сервере и клиенте ключи аутентификации. См . раздел «Подписание запросов протокола веб-push», чтобы узнать, почему.
- Откройте терминал Glitch, нажав «Инструменты» , а затем «Терминал» .
- В терминале запустите
npx web-push generate-vapid-keys
. Скопируйте значения закрытого и открытого ключей. - Откройте
.env
и обновитеVAPID_PUBLIC_KEY
иVAPID_PRIVATE_KEY
. Установите дляVAPID_SUBJECT
mailto:test@test.test
. Все эти значения должны быть заключены в двойные кавычки. После внесения обновлений ваш файл.env
должен выглядеть примерно так:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
- Закройте терминал Glitch.
- Откройте
public/index.js
. - Замените
VAPID_PUBLIC_KEY_VALUE_HERE
значением вашего открытого ключа.
Управление подписками
Ваш клиент берет на себя большую часть процесса подписки. Основное, что нужно сделать вашему серверу, — это сохранить новые подписки на push-уведомления и удалить старые подписки. Эти подписки позволят вам отправлять сообщения клиентам в будущем. Дополнительную информацию о процессе подписки см. в разделе Подписка клиента на push-уведомления .
Сохраните новую информацию о подписке
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
- Нажмите «Зарегистрировать сервисного работника» на вкладке приложения. В поле статуса вы должны увидеть сообщение, подобное этому:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
- На вкладке приложения нажмите «Подписаться», чтобы отправить рассылку . Ваш браузер или операционная система, вероятно, спросят вас, хотите ли вы, чтобы веб-сайт отправлял вам push-уведомления. Нажмите «Разрешить» (или любую аналогичную фразу, которую использует ваш браузер/ОС). В поле статуса вы должны увидеть сообщение, подобное этому:
Service worker subscribed to push. Endpoint: https://fcm.googleapis.com/fcm/send/…
- Вернитесь к своему коду, нажав «Просмотреть исходный код» в пользовательском интерфейсе Glitch.
- Откройте журналы сбоев, нажав «Инструменты» , а затем « Журналы» . Вы должны увидеть
/add-subscription
за которым следуют некоторые данные./add-subscription
— это URL-адрес, на который клиент отправляет запрос POST , когда хочет подписаться на push-уведомления. Следующие данные представляют собой информацию о подписке клиента, которую необходимо сохранить. - Откройте
server.js
. - Обновите логику обработчика маршрута
/add-subscription
используя следующий код:
app.post('/add-subscription', (request, response) => {
console.log('/add-subscription');
console.log(request.body);
console.log(`Subscribing ${request.body.endpoint}`);
db.get('subscriptions')
.push(request.body)
.write();
response.sendStatus(200);
});
Удалить старую информацию о подписке
- Вернитесь на вкладку приложения.
- Нажмите «Отписаться от push» .
- Посмотрите еще раз журналы сбоев. Вы должны увидеть
/remove-subscription
за которым следует информация о подписке клиента. - Обновите логику обработчика маршрута
/remove-subscription
используя следующий код:
app.post('/remove-subscription', (request, response) => {
console.log('/remove-subscription');
console.log(request.body);
console.log(`Unsubscribing ${request.body.endpoint}`);
db.get('subscriptions')
.remove({endpoint: request.body.endpoint})
.write();
response.sendStatus(200);
});
Отправлять уведомления
Как объяснено в разделе «Отправка push-сообщения» , ваш сервер на самом деле не отправляет push-сообщения напрямую клиентам. Скорее, для этого он полагается на службу push. По сути, ваш сервер просто запускает процесс отправки сообщений клиентам, отправляя запросы веб-службы (запросы протокола веб-push) к веб-службе (службе push), принадлежащей поставщику браузера, который использует ваш пользователь.
- Обновите логику обработчика маршрута
/notify-me
используя следующий код:
app.post('/notify-me', (request, response) => {
console.log('/notify-me');
console.log(request.body);
console.log(`Notifying ${request.body.endpoint}`);
const subscription =
db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
sendNotifications([subscription]);
response.sendStatus(200);
});
- Обновите функцию
sendNotifications()
следующим кодом:
function sendNotifications(subscriptions) {
// TODO
// Create the notification content.
const notification = JSON.stringify({
title: "Hello, Notifications!",
options: {
body: `ID: ${Math.floor(Math.random() * 100)}`
}
});
// Customize how the push service should attempt to deliver the push message.
// And provide authentication information.
const options = {
TTL: 10000,
vapidDetails: vapidDetails
};
// Send a push message to each client specified in the subscriptions array.
subscriptions.forEach(subscription => {
const endpoint = subscription.endpoint;
const id = endpoint.substr((endpoint.length - 8), endpoint.length);
webpush.sendNotification(subscription, notification, options)
.then(result => {
console.log(`Endpoint ID: ${id}`);
console.log(`Result: ${result.statusCode}`);
})
.catch(error => {
console.log(`Endpoint ID: ${id}`);
console.log(`Error: ${error} `);
});
});
}
- Обновите логику обработчика маршрута
/notify-all
используя следующий код:
app.post('/notify-all', (request, response) => {
console.log('/notify-all');
response.sendStatus(200);
console.log('Notifying all subscribers');
const subscriptions =
db.get('subscriptions').cloneDeep().value();
if (subscriptions.length > 0) {
sendNotifications(subscriptions);
response.sendStatus(200);
} else {
response.sendStatus(409);
}
});
- Вернитесь на вкладку приложения.
- Нажмите «Отменить подписку на рассылку» , а затем нажмите «Подписаться», чтобы повторить рассылку . Это необходимо только потому, что, как упоминалось ранее, Glitch перезапускает проект каждый раз, когда вы редактируете код, и проект настроен на удаление базы данных при запуске.
- Нажмите «Уведомить меня» . Вы должны получить push-уведомление. Заголовок должен быть
Hello, Notifications!
и тело должно иметьID: <ID>
, где<ID>
— случайное число. - Откройте свое приложение в других браузерах или устройствах и попробуйте подписаться на push-уведомления, а затем нажмите кнопку «Уведомить всех» . Вы должны получить одно и то же уведомление на всех своих подписанных устройствах (т. е. идентификатор в теле push-уведомления должен быть одинаковым).
Следующие шаги
- Прочтите обзор push-уведомлений , чтобы получить более глубокое концептуальное понимание того, как работают push-уведомления.
- Ознакомьтесь с Codelab: Создание клиента push-уведомлений, чтобы узнать, как создать клиент, который запрашивает разрешение на уведомление, подписывает устройство на получение push-уведомлений и использует сервисного работника для получения push-сообщений и отображения сообщений в виде уведомлений.