Usar push da Web

Nas extensões, você pode usar qualquer provedor de push para enviar notificações e mensagens push. Um push da API Push será processado pelo service worker assim que for recebido. Se o service worker tiver sido suspenso, um push vai reativá-lo. O processo para usar em extensões é exatamente o mesmo que você usaria na Web aberta.

Receber permissão para usar a API Push

Quando você registra um servidor push em um site normal, o usuário recebe uma solicitação de permissão para conceder ou negar. Com extensões, essa solicitação não será mostrada. Para usar a API Push na sua extensão, defina a permissão notifications no arquivo manifest.json.

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

Se você não tiver essa permissão, qualquer interação com registration.pushManager vai resultar em um erro imediato, o mesmo resultado de se o usuário tiver negado a permissão. Além disso, lembre-se de que a permissão notifications vai fazer com que um aviso de permissão seja exibido na instalação. O Chrome também vai desativar a extensão para todas as instalações atuais até que o usuário aprove a nova solicitação de permissão. Saiba mais sobre como lidar com isso no guia de avisos de permissão.

Provedores e serviços de push

Depois de adicionar a permissão ao manifest.json, configure a conexão entre o back-end e a extensão. Essa conexão pode ser dividida em duas partes: o provedor e o serviço de push. Um provedor é o SDK usado para enviar a mensagem ao serviço de push. Há muitas opções diferentes, e qualquer provedor de push pode funcionar com a API Push (embora talvez não ofereça um SDK que facilite a integração). Você precisa testar o SDK do seu provedor para saber o que é possível fazer. Um serviço de push é aquele em que o dispositivo do usuário final está registrado para receber alertas de qualquer mensagem push enviada por um provedor de push. Isso é algo que você não pode controlar, já que está codificado em navegadores individuais. Para o Chrome, o serviço de push é o Firebase Cloud Messaging. Todas as mensagens enviadas para um usuário do Chrome serão encaminhadas por ele.

Auto-hospedagem de um provedor de push

Qualquer provedor de push pode funcionar, mas nem todos oferecem um SDK que funcione em service workers. Consulte seu provedor se tiver problemas para executar o serviço. No entanto, não é necessário usar um provedor público. Usando bibliotecas como web-push, é possível hospedar seu próprio back-end.

Você pode testar essa biblioteca usando web-push-codelab.glitch.me. Especificamente, você precisará copiar a chave pública VAPID do servidor push para gerar a assinatura push no navegador. Essa chave pública é um valor binário codificado em base64 que precisa ser decodificado e convertido em um Uint8Array para ser registrado no Push manager do navegador. Há bibliotecas disponíveis para realizar essa lógica, mas o seguinte é tudo o que é necessário.

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;
}

Esse valor fornecido é transmitido para o gerenciador de 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();

A função subscribe retorna um PushSubscription, um objeto que contém os metadados do servidor push. Como você está usando web-push-codelab.glitch.me, esse valor precisa ser copiado para a parte de inscrição por push da página.

Depois de ter o PushSubscription, você poderá registrar um listener para mensagens push no service worker da extensão.

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

Com o listener no lugar, você pode enviar uma mensagem em web-push-codelab.glitch.me, e as mensagens serão registradas no console do service worker.

Como é um padrão da Web aberta, há muita documentação sobre como implementar o Web Push, inclusive no blog do Chrome. Para uma versão completa do exemplo abordado aqui, acesse o repositório de amostras de extensões.

Notificação silenciosa

Você já pode receber uma notificação push na sua extensão do Manifest v3 desde que o Manifest v3 foi lançado no Chrome 88. No entanto, sempre houve a exigência de que a notificação mostrasse algum tipo de solicitação visível ao usuário, como uma notificação da Web. Isso tornava o recurso muito menos útil se você quisesse enviar comandos ou atualizações de dados para a extensão sem incomodar o usuário com informações desnecessárias. A partir do Chrome 121, as extensões podem definir userVisibleOnly como false. Agora você pode enviar notificações push silenciosas e não voltadas ao usuário. Para usar isso, defina userVisibleOnly como false ao chamar pushManager.subscribe.

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