Недавно я работал над новым пакетом webpush, созданным с нуля с использованием только веб-API. Это позволяет (по крайней мере теоретически) отправлять сообщения Web Push прямо из вашего браузера.

Цель этого поста в блоге — объяснить, что такое протокол Web Push и как он работает
(RFC 8291) и как отправлять сообщения Web Push с помощью моей библиотеки.

Что такое протокол Web Push?

Протокол Web Push — это промежуточный протокол, который позволяет приложению отправлять сообщения пользовательскому агенту (обычно браузеру).

Это похоже на события, отправленные сервером (SSE) в том смысле, что сообщения передаются пользовательскому агенту, но служат другой цели. Сообщения Web Push не требуют, чтобы на веб-сайтах была открыта вкладка в качестве сервис-воркеров
может прослушивать push-сообщения. Работает в фоновом режиме.

Как работает протокол Web Push?

В протоколе Web Push участвуют три участника:

• Пользовательский агент: обычно браузер посетителя вашего сайта
• Push-сервис: push-сервер, поддерживаемый и принадлежащий Google, Mozilla или Apple, в зависимости от браузера.
• Сервер приложений: ваш сервер

Вот обзор взаимодействия между ними:

     -------             --------------         ------------- 
    |  UA   |           | Push Service |       | Application |
     -------             --------------         ------------- 
        |                      |                      |
        |        Setup         |                      |
        ||                      |
        |           Provide Subscription              |
        |-------------------------------------------->|
        |                      |                      |
        :                      :                      :
        |                      |     Push Message     |
        |    Push Message      |



Промежуточная служба push-уведомлений требуется по нескольким причинам.

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

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

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

Если вы, как и я, заботитесь о конфиденциальности, обратите внимание на посреднический сервис

получение всех сообщений вызывает тревогу. Чтобы решить эту проблему, Web Push

Сообщения защищены с помощью HTTP-шифрования контента (см. мой 

http-ece), гарантируя, что 

конфиденциальная информация остается защищенной и нечитаемой для третьих лиц

услуги в пути.

  
  
  Настраивать


Возможно, вы заметили, что стрелка настройки отличается от других на графике ASCII выше. Это связано с тем, что этап настройки зависит от реализации. Все основные браузеры поддерживают JavaScript

Push API в 

другой путь. Метод PushManager.subscribe(), который возвращает стандартный 

PushSubscription открыт.

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

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

(RFC 8292). Ключи VAPID используются для смягчения DDOS-атак на push-сервисы. Кроме того, добавление аутентификации между сервером приложений и службой push снижает риски утечки конечной точки подписки. По этим причинам они обязательны в Firefox.

  
  
  Предоставить подписку


Второй шаг — отправить подписку на сервер приложений, чтобы он мог начать отправку сообщений.

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

  
  
  Push-сообщение


Наконец, чтобы отправить сообщение, сервер приложений отправляет зашифрованный HTTP-запрос с бессодержательной схемой аутентификации, если для создания подписки был предоставлен ключ applicationServerKey.

Если пользовательский агент находится в сети, когда сообщение получено службой push, это 

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

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

  
  
  Настройка сервера приложений с помощью webpush


Сначала вам необходимо сгенерировать ключи VAPID, поскольку в некоторых браузерах они являются обязательными:



$ deno run https://raw.githubusercontent.com/negrel/webpush/master/cmd/generate-vapid-keys.ts




Скопируйте выходные данные и сохраните их в файл, вам не нужно снова генерировать ключи VAPID.

В коде сервера приложений вы можете загрузить их следующим образом:



import * as webpush from "jsr:@negrel/webpush";

// Read generated VAPID file.
const vapidKeysJson = Deno.readTextFileSync("./path/to/vapid.json");

// Import VAPID keys.
webpush.importVapidKeys(JSON.parse(vapidKeysJson));




Затем вам нужно будет создать экземпляр объекта ApplicationServer.



// adminEmail is used by Push services maintainer to contact you in case there
// is problem with your application server.
const adminEmail = "[email protected]";

// Create an application server object.
const appServer = await webpush.ApplicationServer.new({
  contactInformation: "mailto:"   adminEmail,
  vapidKeys,
});




Затем, чтобы отправлять push-сообщения, просто создайте PushSubscriber и вызовите его

pushMessage()/pushTextMessage() следующим образом: 



const subsribers = [];

// HTTP handler for user agent sending their subscription.
function subscribeHandler(req) {
  // Extract subscription send by user agent.
  const subscription = await req.json();

  // Store subscription in db.
  // ...

  // Create a subscriber object.
  const sub = appServer.subscribe(subscription);

  // Store subscriber in memory.
  subscribers.push(sub);
}

// Helper method to send message to all subscribers.
function broadcastMessage(msg) {
  for (const sub of subscribes) {
    sub.pushTextMessage(msg, {});
  }
}




Вот и все, вы отправляете push-сообщения своим подписчикам!

Репозиторий webpush содержит интерактивный пример с похожим кодом, который можно запускать локально. Он также содержит код JavaScript на стороне клиента, поэтому обязательно проверьте его!