Notificações push para Chrome/Opera e Firefox

Integre um site com a plataforma para habilitar o SDK, notificações push e caixa de entrada de mensagens

Ativar notificações push no Chrome, Opera e Firefox permitirá que você envie notificações push para usuários inscritos que estejam acessando seu site a partir desses navegadores. Para mais informações sobre navegadores atualmente suportados, por favor confira nosso guia de início rápido do web push.

Pré-requisitos: integração do SDK

Notificações push web exigem que você configure sua aplicação web no seu projeto Xtremepush e que complete a integração do Xtremepush SDK no seu site. Veja detalhes sobre como alcançar isso em nosso guia de integração do site.

Para enviar notificações push para Chrome, Opera e Firefox, você precisa ativar as opções e implantar um ou mais arquivos no seu site.

HTTPS necessário
Notificações do Chrome/Opera exigem sites HTTPS . Notificações do Chrome/Opera não funcionam com certificados autoassinados . Você deve ter um certificado SSL assinado por uma Autoridade confiável.
Se seu site for HTTP, ainda é possível enviar notificações push da web para seus usuários no Chrome/Opera, móvel e desktop, com Xtremepush. As notificações devem ser enviadas a partir de uma propriedade HTTPS, que pode ser criada automaticamente na plataforma Xtremepush.

Atualização fevereiro de 2021
Novos aplicativos web criados desde março de 2020 não exigem mais credenciais do Firebase para notificações push web no Google Chrome, pois migraram para o protocolo VAPID. Desde fevereiro de 2021, os campos de credenciais do Firebase não são mostrados para novas aplicações web.
Aplicações web mais antigas que usavam anteriormente o Firebase Cloud Messaging ainda exibem os campos de credenciais. Esses não devem ser removidos, pois ainda são usados para enviar mensagens para assinantes mais antigos. Os assinantes são atualizados de forma transparente ao revisitar o site integrado, e o Xtremepush cuidará automaticamente da transição para fora do Firebase Cloud Messaging.
Instruções legadas para adicionar credenciais do Firebase são mantidas em um guia histórico.

Siga estes passos para ativar notificações push:

Configurar configurações no Xtremepush

No Xtremepush, vá em Configurações > Apps & sites > clique no site correspondente. Clique no controle deslizante para ativar o push no site e depois clique em Configurar.
Ative os navegadores que deseja ativar, ou seja, Chrome/Opera e Firefox.
Escolha a opção de implantação apropriada:
- Domínio autohospedado O domínio do seu site deve suportar HTTPS e você precisará hospedar os arquivos no seu site HTTPS.
- Use a Janela de Assinatura controla se um pop-up contextual com mais informações é usado para pedir ao usuário final que aceite notificações.
Exemplo de como é o pop-up de assinatura.
Os textos nesta janela podem ser personalizados e traduzidos a partir das Configurações > Traduções Avançadas >. Confira nosso guia dedicado aos documentos para mais detalhes sobre como fazer isso.
Janela de Assinatura no navegador Firefox
A partir da versão 23 do Firefox, o Firefox implementou restrições ao uso das janelas de Assinar e iFrames para aumentar a privacidade do usuário. Essa abordagem está alinhada com as melhores práticas do setor e enfatiza o compromisso do navegador em proteger os dados dos usuários e garantir uma experiência de navegação segura. A abordagem recomendada é desativar a janela de Assinar definindo a janela Use Assinar como Não e implementar um prompt em duas etapas com uma troca de valores que então acionaria o recurso de prompt do navegador fornecido pelos navegadores. Confira nosso guia dedicado para aprender como fazer isso. Isso garantirá total compatibilidade com Chrome, Firefox e outros navegadores baseados em Chromium.
Selecione apenas HTTP para usar isso apenas nas páginas HTTP do seu site. Leia mais no Guia de sites HTTP do Chrome
Clique em Salvar.

Adicionar ao site

Você deve hospedar arquivos específicos no seu site e configurar o Xtremepush com essas localizações de arquivos. Esses são mostrados como trechos de código quando necessário.

Para cada arquivo, copie e cole os trechos de código necessários nos arquivos do seu site. Depois, adicione a URL completa ao arquivo no seu site no campo URL adjacente e clique em Salvar.

Os arquivos listados podem variar dependendo das suas opções de configuração:

Nome do arquivo	Notas
`service-worker.js`	O service worker é o principal arquivo necessário para notificações push no Chrome e Firefox, o que permite que funcione mesmo quando o navegador está inativo. O assistente de serviço deve estar hospedado no mesmo domínio do seu site.
`subscribe.html`	Só é necessário quando você usa uma janela de assinatura. Não suportado no Firefox (v. 23 e superiores).
`frame.html`	Para mostrar informações sobre o status da assinatura dos seus clientes em uma janela diferente.
`manifest.json`	Para incluir suas credenciais da Firebase. Não é obrigatório para aplicativos adicionados após fevereiro de 2021. Para mais detalhes, consulte nosso guia com instruções históricas.

Como funciona o SDK
Para suportar notificações webpush do Chrome e Firefox, nosso SDK registra o trabalhador do serviço.
Nosso assistente de serviço implementa os seguintes callbacks:
install
activate
push
notificationclick
notificationclose
Não implementa nada que possa afetar o uso da aplicação, como fornecer cache de rede adicional.
Nosso SDK também adiciona uma referência manifest.json ao topo da página, se necessário, para configurações legadas de notificações push.