Como gerenciar Notificações da Web em sites e PWA

As notificações push são comuns na web moderna. Eles permitem que você comunique informações oportunas ao usuário, mesmo que seu site não esteja realmente aberto. O navegador do usuário lida com eventos de push de entrada e exibe notificações por meio de superfícies de interface do usuário do sistema, como a Central de Ações do Windows e a tela de bloqueio do Android.

A implementação do Web Push em seu site ou PWA requer a combinação de duas APIs de navegador diferentes. O código responsável por assinar e receber notificações usa o componente Push API dos service workers. Esse código é executado continuamente em segundo plano e será invocado pelo navegador quando uma nova notificação precisar ser tratada.

Quando um evento é recebido, o service worker deve usar a API de notificação para ver a notificação. Isso cria um alerta visual por meio de interfaces no nível do sistema operacional.

Aqui está um guia completo para fazer o Web Push funcionar em seu site. Digamos que você já tenha um componente do lado do servidor que pode registrar assinaturas push e enviar seus alertas.

índice

1. o trabalhador de serviço
2. Registro para assinaturas push
3. Quando registrar o usuário?
4. Gestão de prazos e renovações
5. Adicionar botões de ação
6. Resumo

o trabalhador de serviço

Vamos começar com o service worker. Os service workers têm várias funções: eles podem armazenar dados em cache para uso offline, realizar sincronizações regulares em segundo plano e atuar como manipuladores de notificações. Os service workers usam uma arquitetura orientada a eventos. Uma vez logado em um site, o navegador do usuário chamará o operador de serviço em segundo plano quando os eventos que ele assina forem gerados.

Um evento principal é necessário para o Web Push: push . Este recebe um objeto PushEvent que permite acessar a carga enviada pelo servidor.

 auto. addEventListener( "push", e => { const payload = JSON. parse ( e. data . text() ) ; e. waitUntil ( self. registration . showNotification ( payload. title , { body : payload. body , icon : " /icon.png" } ) ) ; } );

O código acima configura um service worker capaz de reagir a eventos de push de entrada. Ele espera que o servidor envie cargas JSON como esta:

 { "title": "Texto do título da notificação", "body": "Este é o texto mais longo da notificação." }

Quando um evento push é recebido, o funcionário do suporte técnico exibe uma notificação do navegador chamando o recurso showNotification() disponível em sua propriedade self.registration . A função é encapsulada em uma chamada waitUntil() para que o navegador aguarde a notificação aparecer antes de disparar o trabalhador do serviço.

A função showNotification() recebe dois argumentos: o texto do título da notificação e um objeto de opções. Neste exemplo, duas opções, um texto mais longo e um ícone são passados ​​para serem exibidos na notificação. Existem muitas outras opções que permitem configurar padrões de vibração, emblemas personalizados e requisitos de interação. Nem todos os navegadores e sistemas operacionais suportam todos os recursos expostos pela API.

Complete o lado do service worker do código registrando-o novamente em seu JavaScript principal:

 if ( navigator. serviceWorker ) { // substitua pelo caminho para o navegador de arquivos do service worker. serviceWorker. registrar("/sw.js"). catch ( ( ) => { console.error( "Não foi possível registrar o service worker." ) } ); }

Este código deve ser executado em cada carregamento de página. Ele garante que o navegador ofereça suporte a service workers e, em seguida, registre o arquivo do trabalhador. Os navegadores atualizarão automaticamente o service worker sempre que a cópia do servidor tiver diferenças de bytes em relação à versão atualmente instalada.

Registro para assinaturas push

Agora você precisa se inscrever no navegador para receber notificações push. O código a seguir é do arquivo JavaScript principal, fora do service worker.

 função assíncrona subscribeToPush ( ) { if ( navigator. serviceWorker ) { const reg = await navigator. serviceWorker. getRegistro(); if ( reg && reg.pushManager ) { const subscription = await reg. pushManager. getAssinatura(); if (! subscription) { const key = await fetch("https://example.com/vapid_key"); const keyData = espera chave. texto(); const sub = espera reg. pushManager. subscribe ({ applicationServerKey : keyData , userVisibleOnly : true } ) ; await fetch( "https://example.com/push_subscribe" , { method : "POST" , headers : { "Content-Type" : "application/json" } , body : JSON.stringify ( { endpoint : sub.endpoint , expireTime : sub.expirationTime , keys : sub.toJSON() .keys } ) } ); } } } }

Em seguida, chame sua função para inscrever o navegador para notificações push:

Vamos examinar o que o código de assinatura está fazendo. As primeiras linhas verificam a presença de um agente de serviço, recuperam seu registro e detectam suporte para notificações push. pushManager não será configurado em navegadores que não suportam Web Push.

call pushManager.getSubscription() retorna uma promessa que retorna um objeto que descreve a assinatura push do navegador atual para seu site. Se já estiver configurado, não há necessidade de reinscrever o usuário.

O fluxo de assinatura real começa com a solicitação para recuperar as chaves VAPID do servidor. A especificação VAPID é um mecanismo que permite ao navegador verificar se os eventos push realmente vêm de seu servidor. Você deve expor um endpoint de API do servidor que forneça uma chave VAPID. Isso é fornecido à função pushManager.subscribe() para que o navegador conheça a chave na qual confiar. A opção userVisibleOnly separada indica que apenas as notificações exibidas visivelmente na tela serão exibidas.

A chamada pushManager.subscribe() retorna um tópico PushSubscription que descreve sua nova assinatura. Esses dados são enviados ao servidor em outra solicitação de pesquisa. Em um aplicativo real, ele também enviará o ID do usuário ativo para que você possa vincular a assinatura push ao dispositivo dele.

Seu código do lado do servidor para enviar uma notificação por push a um usuário deve ter esta aparência:

1. Verifique seu armazenamento de dados para todas as assinaturas push vinculadas ao usuário de destino.
2. Envie sua carga de notificação para o endpoint indicado por cada assinatura, certificando-se de incluir as chaves de autenticação da assinatura ( keys nos dados enviados pelo navegador no momento da assinatura). Assine o evento com a mesma chave VAPID que você enviou ao navegador.

Cada assinatura de endpoint fará referência à plataforma de entrega de notificação do provedor do navegador. Essa URL já inclui um identificador exclusivo para a assinatura. Quando você envia uma carga para o endpoint, o processo em segundo plano do navegador recebe os dados e chama seu service worker. Para o Chrome no Android, o processo do navegador é integrado diretamente ao daemon de notificação do sistema.

Quando registrar o usuário?

Ao configurar os fluxos de assinatura, lembre-se de que o usuário deve aceitar uma solicitação de autorização do navegador antes que o registro seja concluído. Muitos navegadores ocultam ou rejeitam automaticamente solicitações de permissão não solicitadas; no entanto, pedir a um usuário que se registre quando chegar ao seu site pode não fornecer o resultado desejado.

Obtenha as melhores chances de registro bem-sucedido associando solicitações de assinatura à ação direta do usuário. Considere fornecer um banner no aplicativo que explique os benefícios de ativar as notificações e ofereça um botão "Ativar agora". Você pode verificar se o usuário já está inscrito e ocultar o banner com a função pushManager.getSubscription() mostrada acima.

Clicar no botão ativar deve invocar a função de assinatura. O processo pode demorar alguns segundos enquanto o navegador configura o registro e as chamadas de rede são concluídas. A exibição de um spinner de carregamento durante esse período ajuda a manter o usuário informado.

Os usuários também devem ter uma maneira de cancelar a assinatura. Embora eles possam revogar a permissão do navegador a qualquer momento, alguns usuários procurarão uma opção no aplicativo, especialmente se tiverem configurado seu site como um PWA.

Aqui está uma implementação simples para cancelar a inscrição:

 função assíncrona unsubscribePush ( ) { const reg = await navigator. serviceWorker. getRegistro(); assinatura const = aguardar reg. pushManager. getAssinatura(); if (subscrição) {aguardar subscrição. Cancelar subscrição ( ) ; await fetch ( `https : //example.com/push_unsubscribe/${subscription.endpoint}`, {method: "DELETE"}); } else { // já está inscrito } }

chamar unsubscribe() em um PushSubscription cancelará a assinatura, retornando o navegador ao seu estado padrão. Seu agente de suporte deixará de receber eventos push . O endpoint de assinatura é enviado ao seu servidor para que você possa removê-lo do armazenamento de dados e evitar o envio de dados para o que agora é um URL morto.

Gestão de prazos e renovações

Você deve ter notado a propriedade expirationTime no objeto PushSubscription criado pelo navegador. Isso nem sempre será estabelecido; quando estiver, o dispositivo deixará de receber notificações após esse período.

Praticamente, o expirationTime atualmente não é usado nos principais navegadores. Os tokens produzidos pelo Chrome não expiram até serem cancelados manualmente, expirationTime é sempre null . O Firefox não configura o tempo expirationTime ambos, mas seu serviço de notificação pode substituir as assinaturas durante sua vida útil.

Você pode responder ao navegador alterando sua assinatura push ativa implementando o evento pushsubscriptionchange em seu agente de serviço. Infelizmente, existem duas versões deste evento: a implementação original, atualmente usada pelo Firefox, e a nova v2, que ainda não é suportada por nenhum navegador.

A especificação original apresenta sérios problemas de usabilidade que dificultam a resposta ao evento. Quando você recebe um evento v1, o navegador excluiu a assinatura original e você deve criar manualmente uma nova. O problema é que sem acesso à assinatura expirada você não pode enviar uma solicitação de "substituição" para o seu servidor; não tem como acessar o acima. endpoint de URL.

A especificação v2 resolve esse problema fornecendo um evento com uma propriedade oldSubscription E uma newSubscription . Ao receber o evento, a assinatura anterior foi cancelada, mas você ainda pode acessar suas propriedades. A nova assinatura agora é criada pelo navegador.

Aqui está um exemplo de implementação. pushsubscriptionchange com a nova especificação:

 auto. addEventListener( "pushsubscriptionchange", e => { e.waitUntil (async() => { await fetch( "https://example.com/push_change" , { method : "POST", headers : { "Content-Type" : "application/json" } , body : JSON.stringify ( { auth : ( e. newSubscription . toJSON ( . keys ? . auth || null ) , endpoint : e. newSubscription . endpoint , endpointOld : e. oldSubscription . endpoint , expireTime : e.newSubscription .expirationTime , p256dh : ( e.newSubscription .toJSON ( .keys ? .p256dh || null ) } ) } ) ; } ) ; } ) ;

Os endpoints são exclusivos, portanto, seu servidor pode pesquisar a assinatura antiga e atualizar suas propriedades com as da nova assinatura. Se você também quiser adicionar suporte para a especificação acima, precisará monitorar manualmente o endpoint de assinatura ativo fora da API push. Armazenar em localStorage ou IndexedDB permitirá que você acesse a partir de seu próprio gerenciador pushsubscriptionchange para que você possa pedir ao servidor para substituir a assinatura.

A especificação revisada é muito mais fácil de implementar do que sua versão anterior. Embora ainda não seja compatível com navegadores, vale a pena adicioná-lo ao seu representante de suporte. Algumas linhas de código tornarão seu gerenciamento de push à prova de novas versões do navegador.

Adicionar botões de ação

As notificações push podem incluir botões interativos que permitem ao usuário realizar ações imediatas. Aqui está uma chamada showNotification() que cria uma:

 auto. registro . showNotification( "Notificação com ações" , { body : "Esta notificação tem um botão." , actions : [ { action : "/home" , title : "Ir para a tela inicial", icon : "/home.png" } ] } );

Cada notificação pode incluir várias ações, cada uma com um rótulo, ícone e action . Essa última propriedade deve identificar uma ação que o aplicativo pode iniciar em resposta à pressão do usuário.

Quando o usuário toca em uma ação, seu representante de suporte recebe um evento notificationclick :

 auto. addEventListener( "notificationclick" , e => { const uri = e. ação ; const notificação = e. notificação ; notificação. close ( ) ; clientes. openWindow ( `$ { self. location . origin } $ { action } ` ) ; });

Estamos usando a propriedade action para declarar um URI para o qual o usuário pode navegar. Uma nova guia é aberta no URI quando a notificação é clicada. chamar notification.close() garante que a notificação também seja fechada. Caso contrário, algumas plataformas forçarão o usuário a removê-lo manualmente.

Resumo

A implementação do Web Push pode parecer assustadora se você nunca trabalhou com APIs relevantes antes. Mais do que preocupações técnicas, você precisa manter a experiência do usuário em primeiro plano e se comunicar porque vale a pena ativar as notificações.

A assinatura push e o cancelamento da assinatura ocorrem no código JavaScript principal do aplicativo, usando a API navigator.serviceWorker . O código que responde a novos eventos de push e exibe notificações do navegador reside no próprio service worker.

O Web Push agora é suportado pela maioria dos principais navegadores da Web, com o Safari sendo a principal exceção. Lembre-se de que as notificações aparecerão de forma diferente em cada família de navegadores e sistemas operacionais, portanto, não assuma que um recurso específico da API showNotification() estará disponível universalmente.

• Você pode obter este teclado mecânico Aukey por apenas US $ 40
• O que são VPNs descentralizadas?

descubra mais conteúdo

O que é um amplificador integrado?

Google Pixel Watch também tem detecção de queda, mas não até o próximo ano

As melhores xícaras de café aquecidas de 2022

Como automatizar seu iPhone com base na hora, atividade ou localização

"Isso deve ter sido antes do meu tempo"

Por que a NASA enviou Snoopy para a Lua? – Revisão Geek

Deixe uma resposta Cancelar resposta

O que são notificações push da Web?

É uma tecnologia oferecida pelos navegadores modernos, que permite o envio de mensagens aos usuários que visitaram nosso site em algum momento, mesmo que o usuário não esteja com a página aberta no momento do envio.

Como as notificações push são ativadas?

Configurar notificações push

Na barra de navegação inferior, toque em Mais e depois em Configurações. Toque em Ativar notificações . Toque em Notificações . Toque em Permitir notificações .

Onde ver as notificações push?

Das configurações do telefone

1. Pressione por vários segundos em uma parte em branco da tela.
2. Clique em Widgets.
3. Vá em Configurações.
4. Procure a opção chamada Log de Notificação .
5. Esta opção será corrigida na tela inicial.
6. Toque nele para acessar o histórico de notificações do seu telefone.

Como desativar as notificações push da Web?

Como permitir ou bloquear notificações de todos os sites

1. No seu telefone ou tablet Android , abra o aplicativo Chrome.
2. À direita da barra de endereço, toque em Mais. Configurações.
3. Toque em Configurações do site. Notificações .
4. Na parte superior, ative ou desative a opção de configurações .