Usar push da Web

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

Conseguir permissão para usar a API Push

Quando você registra um servidor Push em um site normal, o usuário recebe um prompt de permissão para concedê-lo ou negá-lo. Com as extensões, esse comando não é mostrado. Para usar a API Push na sua extensão, você precisa definir a permissão notifications no seu 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 tivesse negado a permissão. Além disso, lembre-se de que a permissão notifications fará com que um aviso de permissão seja exibido na instalação. O Chrome também desativará a extensão para qualquer instalação existente até que o usuário aprove a nova solicitação de permissão. Saiba mais sobre como lidar com isso no guia de aviso de permissão.

Provedores de push e serviços de push

Depois de adicionar a permissão ao seu manifest.json, você precisará configurar a conexão entre seu back-end e a extensão. Essa conexão pode ser pensada em duas partes: o provedor de push e o serviço de push. Um provedor é o SDK que você está usando para enviar a mensagem ao serviço Push. Há muitas opções diferentes, e qualquer provedor de Push pode funcionar para a API Push, embora talvez não ofereça um SDK que simplifique a integração. Você vai precisar testar o SDK do seu provedor para ver o que é possível. Um serviço push é registrado no dispositivo do usuário final. Assim, ele pode ser alertado sobre qualquer mensagem push enviada por um provedor de push. Você não tem controle sobre isso, porque está fixado no código em navegadores individuais. No caso do Chrome, o Firebase Cloud Messaging é o serviço Push. Todas as mensagens enviadas para um usuário do Chrome serão roteadas por ele.

Hospedar um provedor de push automaticamente

Qualquer provedor de push pode funcionar, mas nem todos oferecem um SDK que funciona em service workers. Será necessário consultar o provedor se tiver problemas para fazer a execução. No entanto, você não precisa usar um provedor público. Com bibliotecas como o web-push, é possível hospedar seu próprio back-end.

Você pode testar essa biblioteca usando web-push-codelab.glitch.me (link em inglês). Especificamente, você precisará copiar a chave pública VAPID do servidor Push para gerar a assinatura Push no navegador. Na verdade, essa chave pública é um valor binário codificado em base64 que precisará ser decodificado e convertido em um Uint8Array para ser registrado no gerenciador de push do navegador. Há bibliotecas disponíveis para executar essa lógica, mas isso é 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;
}

O valor fornecido é transmitido para o gerenciador 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 uma PushSubscription, um objeto que contém os metadados do servidor Push. Como você está usando o web-push-codelab.glitch.me, esse valor precisa ser copiado para a parte da assinatura de push da página.

Depois que você tiver o PushSubscription, você estará pronto para registrar um listener para mensagens push no service worker da nossa extensão.

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

Com seu listener ativado, é possível enviar uma mensagem em web-push-codelab.glitch.me (link em inglês), e as mensagens serão registradas no console do service worker.

Como ele é um padrão aberto da Web, há muita documentação sobre como implementar o push da Web, inclusive no blog do Chrome (em inglês). Para uma versão completa do exemplo abordado aqui, há uma disponível no nosso repositório de amostras de extensões.

Push silencioso

Você pode receber uma notificação push na extensão Manifest V3 desde o lançamento do Manifesto v3 no Chrome 88. No entanto, sempre houve o requisito de que a notificação mostrasse algum tipo de solicitação visível ao usuário, como uma notificação da Web. Isso tornou muito menos útil se você quisesse enviar comandos ou atualizações de dados para sua 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 é possível enviar notificações push silenciosas e que não são voltadas para o usuário. Para usar isso, defina userVisibleOnly como false ao chamar pushManager.subscribe.

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