Usar push da Web

Em extensões, você pode usar qualquer provedor Push para enviar notificações push e e envio de mensagens. Um envio da API Push será processado pelo seu service worker como assim que ele for recebido. Se o service worker tiver sido suspenso, um push será ativá-la novamente. O processo para usá-lo em extensões é exatamente o mesmo você o 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 uma para concedê-la ou negá-la. Com extensões que não fazem mostrados. Para usar a API Push na sua extensão, você precisa definir o Permissão notifications no 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 que se o usuário negou a permissão. Além disso, tenha em mente que o A permissão notifications vai gerar um aviso de permissão que será exibido na instalação. O Chrome também desativa a extensão para qualquer instalações atuais até que o usuário aprove a nova solicitação de permissão. Você pode saiba mais sobre como lidar com isso na guia de aviso de permissão.

Provedores e serviços de push

Depois de adicionar a permissão ao manifest.json, você precisará configurar a conexão entre o back-end e a extensão. Esta conexão pode ser pensado em duas partes: o provedor de push e o serviço de push. Um O provedor é o SDK que está sendo usado por você para enviar a mensagem ao serviço Push. Há muitas opções diferentes, e qualquer provedor Push pode funcionar para o API (embora possam não oferecer um SDK que simplifique a integração). Você precisará testar o SDK do seu provedor para ver o que é possível. Um empurrãozinho serviço é onde o dispositivo do usuário final está registrado. Portanto, ele pode ser alertado para qualquer mensagem de push enviada por um provedor de push. Isso é algo sobre o qual você não tem controle, já que estão fixados no código em navegadores individuais. Para o Chrome, o Firebase O Cloud Messaging é o serviço Push. Todas as mensagens enviadas por push para um o usuário será roteado por ele.

Auto-hospedagem de um provedor de push

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

É possível testar essa biblioteca usando web-push-codelab.glitch.me. Especificamente, você precisará copiar a chave pública VAPID do servidor de push para gerar o assinatura no navegador. Essa chave pública é, na verdade, um valor base64 codificado que terá que ser decodificado e convertido em Uint8Array para se registrar com o comando Push do navegador de projeto. Há bibliotecas disponíveis para executar essa lógica, basta conferir 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 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, uma que contém os metadados do servidor Push. Como você está usando web-push-codelab.glitch.me, este valor precisa ser copiado para na parte "Assinatura de push" da página.

Depois de ter a PushSubscription, você está 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 no lugar, você pode enviar uma mensagem no web-push-codelab.glitch.me, e as mensagens serão conectadas a no console do service worker.

Por se tratar de um padrão aberto da Web, há muita documentação sobre como implementar o Web Push, inclusive no blog do Chrome. Para um versão completa do exemplo abordado aqui, há uma disponível na repositório de amostra de extensões (link em inglês).

Envio silencioso

Você conseguiu receber uma notificação push na sua extensão Manifest V3 desde que o Manifesto v3 foi lançado no Chrome 88. No entanto, sempre houve o requisito de que a notificação mostrasse algum tipo de aviso visível ao usuário, como uma notificação da Web. Isso a tornou muito menos útil se você quiser enviar comandos ou atualizações de dados para sua extensão sem incomodar o 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 que não sejam 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
});