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

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

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

Когда вы регистрируете Push-сервер на обычном веб-сайте, пользователю отображается запрос на разрешение разрешить или запретить его. С расширениями это приглашение не будет отображаться. Чтобы использовать Push API в вашем расширении, вам необходимо установить разрешение notifications в вашем манифесте.json.

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

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

Push-провайдеры и Push-сервисы

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

Получив 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 . Полную версию примера, описанного здесь, можно найти в нашем репозитории примеров расширений .

Тихий толчок

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

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