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