Используйте веб-пуш

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

Получите разрешение на использование Push API.

При регистрации Push-сервера на обычном веб-сайте пользователю отображается запрос на предоставление или отказ в разрешении. В случае расширений этот запрос не отображается. Для использования Push API в вашем расширении необходимо установить разрешение notifications в файле manifest.json.

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

Если это разрешение отсутствует, любое взаимодействие с registration.pushManager приведет к немедленной ошибке, аналогичной той, что произошла, если пользователь отклонил запрос на разрешение. Кроме того, имейте в виду, что разрешение notifications вызовет предупреждение о нехватке прав при установке. Chrome также отключит расширение для всех существующих установок, пока пользователь не одобрит новый запрос на разрешение. Подробнее о том, как обрабатывать подобные ситуации, можно узнать в руководстве по предупреждениям о нехватке прав .

Поставщики push-уведомлений и сервисы push-уведомлений

После добавления разрешений в файл manifest.json вам потребуется настроить соединение между вашим бэкэндом и расширением. Это соединение можно разделить на две части: поставщик Push-уведомлений и служба Push-уведомлений. Поставщик — это SDK, используемый вами для отправки сообщений в службу Push-уведомлений. Существует множество различных вариантов, и любой поставщик Push-уведомлений может работать с Push API (хотя он может не предлагать SDK, упрощающий интеграцию). Вам нужно будет поэкспериментировать с SDK вашего поставщика, чтобы увидеть, что возможно. Служба Push-уведомлений — это то, к чему привязано устройство конечного пользователя, чтобы оно могло получать уведомления о любых push-сообщениях, отправленных поставщиком Push-уведомлений. Это то, что вы не можете контролировать, поскольку это жестко закодировано в каждом браузере. Для Chrome службой Push-уведомлений является Firebase Cloud Messaging . Любые сообщения, отправляемые пользователю Chrome, будут маршрутизироваться через нее.

Самостоятельное размещение поставщика push-уведомлений

Подойдет любой провайдер push-уведомлений, однако не все предлагают SDK, совместимый с сервисными воркерами. В случае проблем с запуском вам потребуется проконсультироваться со своим провайдером. Впрочем, использовать общедоступный провайдер необязательно. С помощью таких библиотек, как web-push , вы можете разместить свой собственный бэкэнд.

Вы можете протестировать эту библиотеку, используя web-push-codelab.glitch.me . В частности, вам потребуется скопировать открытый ключ VAPID Push-сервера, чтобы сгенерировать подписку на Push-уведомления в браузере. Этот открытый ключ представляет собой двоичное значение, закодированное в base64 , которое необходимо декодировать и преобразовать в Uint8Array для регистрации в Push-менеджере браузера. Существуют библиотеки, выполняющие эту логику, но ниже приведено все необходимое.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

Предоставленное значение передается в менеджер Push-уведомлений.

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

Функция subscribe возвращает объект PushSubscription , содержащий метаданные Push-сервера. Поскольку вы используете web-push-codelab.glitch.me , это значение необходимо скопировать в раздел «Подписка на Push-уведомления» на странице.

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

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

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

Поскольку это открытый веб-стандарт, существует множество документации по реализации Web Push, в том числе в блоге Chrome . Полную версию примера, рассмотренного здесь, можно найти в нашем репозитории примеров расширений .

Тихий толчок

С момента появления Manifest v3 в Chrome 88 вы можете получать push-уведомления в своих расширениях. Однако всегда существовало требование, чтобы уведомление отображало какой-либо видимый пользователю запрос, например, веб-уведомление . Это значительно снижало удобство отправки команд или обновлений данных в ваше расширение без отвлечения пользователя ненужной информацией. Начиная с Chrome 121 , расширения могут устанавливать userVisibleOnly в false . Теперь вы можете отправлять пользователям бесшумные, невидимые для них push-уведомления. Для этого установите userVisibleOnly в значение false при вызове pushManager.subscribe .

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});