Usar push da Web

Nas extensões, é possível usar qualquer provedor de push para enviar notificações e mensagens. Um push da API Push será processado pelo service worker assim que for recebido. Se o service worker tiver sido suspenso, um push vai acordá-lo novamente. O processo para usá-lo 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 concedê-lo ou negá-lo. Com extensões, esse aviso não é exibido. Para usar a API Push na sua extensão, você precisa definir a permissão notifications em 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, igual ao resultado de negação da 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 desativa 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 aviso de permissão.

Provedores e serviços de push

Depois de adicionar a permissão ao manifest.json, você vai precisar configurar a conexão entre o back-end e a extensão. Essa conexão pode ser dividida 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 com a API push, embora não ofereça um SDK que simplifique a integração. Você precisará testar o SDK do seu provedor para ver o que é possível. Um serviço de push é o que o dispositivo do usuário final está registrado. Assim, ele pode ser alertado para qualquer mensagem push enviada por um provedor de push. Isso é algo que você não controla, porque está codificado em navegadores individuais. No Chrome, o Firebase Cloud Messaging é o serviço de push. Todas as mensagens enviadas a 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. Se você tiver problemas para fazer isso, consulte seu provedor. No entanto, você não precisa usar um provedor público. Usando bibliotecas como web-push, é possível hospedar seu próprio back-end.

É possível testar essa biblioteca usando web-push-codelab.glitch.me. Especificamente, você vai precisar copiar a chave pública VAPID do servidor Push para gerar a assinatura Push no navegador. Essa chave pública é, na verdade, um valor binário codificado em base64 que precisa 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 o código a seguir é 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 uma 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 em push da página.

Depois de ter a PushSubscription, você pode 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 o listener em vigor, 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 aberto da Web, há muita documentação sobre como implementar o Web Push, inclusive no blog do Chrome. Para uma versão completa do exemplo abordado aqui, há uma disponível no nosso repositório de exemplo de extensões.

Push silencioso

Você pode receber uma notificação push na sua extensão do Manifest V3 desde que o Manifest V3 foi introduzido no Chrome 88. No entanto, sempre houve a exigência de que a notificação mostrasse algum tipo de solicitação visível para o 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
});