Procura uma forma simples de adicionar notificações push PWA?
As Aplicações Web Progressivas (PWAs) são aplicações que funcionam em qualquer dispositivo. Mas há sempre algum conflito no envio de notificações push web. Normalmente, o maior problema são as taxas de entrega. Pode adicionar notificações push web à sua PWA de muitas formas. Mas como enviar notificações push web que sejam efetivamente entregues a partir da sua PWA?
Não se preocupe! Neste artigo, vamos mostrar-lhe passo a passo como pode enviar notificações push PWA com taxas de entrega fiáveis em menos de 10 minutos.
Vamos a isso.
TL;DR — O que são notificações push PWA? As notificações push de Aplicações Web Progressivas (PWA) são mensagens push web padrão entregues através de um service worker registado da PWA, permitindo que as aplicações instaladas a partir da web recebam mensagens push mesmo quando a página web está fechada.
Envie Notificações Push PWA Hoje Mesmo!
As notificações push são uma ferramenta de marketing super eficaz e de baixo custo para o ajudar a aumentar o seu tráfego recorrente, envolvimento e vendas em piloto automático.
Como Instalar Notificações Push PWA
Adicionar notificações push a uma Aplicação Web Progressiva é bastante simples. Basta seguir os passos deste artigo. Se seguir todos os passos, no final deste artigo, deverá ser capaz de enviar notificações push como esta:
- Registe um service worker na raiz do site que combine a lógica PWA e o tratamento de notificações push.
- Instale o script PushEngage e copie o código de instalação para o
<head>. - Configure o modal de opt-in e crie uma campanha no painel PushEngage.
O principal desafio é que todo o software de notificações push web utiliza um ficheiro Javascript chamado service_worker.js. O service worker ajuda-o a recolher subscritores de notificações push através de pop-ups. Mas todas as PWAs já têm um ficheiro service worker que serve um propósito diferente. E, de cada vez, a sua PWA só pode usar um service worker.
Em termos simples, os serviços de notificações push web confundem a sua PWA. Assim, por vezes, irá recolher subscritores de notificações push e, por vezes, não o fará. Por vezes, poderá enviar notificações e, por vezes, não poderá. Poderá até acabar por enviar mensagens push para toda a sua lista de subscritores e tê-las entregues apenas a alguns subscritores.
Recomendamos a utilização de PushEngage para enviar notificações push PWA. PushEngage é o software de notificações push número 1 do mundo. Assim, sabe que as suas campanhas estão em boas mãos.
Claro, construtores de PWA como a Mendix vêm com o seu próprio sistema de notificações push. Mas e se quiser migrar para outro serviço de notificações push? E se quiser mais flexibilidade e controlo sobre as suas campanhas de notificações push? Mais ainda, estes serviços normalmente fornecem uma API para criar campanhas push. Mas com PushEngage, obtém um painel fácil de usar a partir do qual pode criar, agendar, enviar e gerir campanhas push.
E sim, pode usar o Firebase Cloud Messaging (FCM) para enviar notificações push de aplicações Android. Mas com o PushEngage, pode enviar notificações push de aplicações Android e web, notificações push web e de aplicações iOS e iPadOS, e notificações push de navegador.
A melhor parte? Pode até enviar poderosas notificações push de eCommerce com alguns cliques.
| Fato | Valor |
|---|---|
| Mecanismo de entrega principal | Service worker (subscrição push) |
| Tempo típico de configuração | ~10 minutos (básico) |
| Requisito comum | service_worker.js no âmbito raiz + manifest.json |
| Funciona em | Maioria dos navegadores desktop e Android (varia por plataforma) |
Vamos começar.
Passo #1: Configurar a Sua Conta PushEngage
Aceda à página inicial do PushEngage e clique no botão Começar:
Pode experimentar o PushEngage gratuitamente. Se tem um blog pequeno que necessita de tráfego e envolvimento repetidos, isso é provavelmente suficiente. Mas se leva as vendas a sério, deve adquirir o pacote Enterprise e desbloquear as campanhas automatizadas.
Depois de se inscrever na sua conta PushEngage, dirija-se ao seu painel PushEngage e vá a Configurações do Site » Detalhes do Site:
Pode definir o seu logótipo, nome do site e URL do site aqui. É muito importante resolver estas coisas agora para que possa testar toda a sua configuração mais tarde.
Passo #2: Obter o Código de Instalação do PushEngage
Para instalar notificações push, precisará de obter um código de instalação. No seu ecrã de Configurações do Site, role para baixo e clique no botão Clique Aqui Para Instruções de Configuração:
Em seguida, clique no separador Qualquer Site:
Pode usar o código Javascript para começar a enviar notificações push.
Passo #3: Adicionar o Código do Service Worker Para Notificações Push PWA
A parte mais complicada do processo está finalmente aqui. No painel do PushEngage, em Instruções de Configuração, verá também uma opção para descarregar o ficheiro do service worker.
IMPORTANTE: Uma PWA só pode ter um âmbito de service worker ativo de cada vez — junte o código push ao seu service worker existente. Por defeito, uma PWA não requer um ficheiro de service worker. Tudo o que precisa para transformar qualquer site numa Progressive Web App é um ficheiro manifest. Portanto, se a sua PWA não tem um ficheiro de service worker, pode simplesmente adicionar o service worker do PushEngage ao diretório raiz do seu website ou aplicação web.
Mas se a sua PWA já tem um service worker implementado, então NÃO carregue diretamente o ficheiro do service worker de notificações push do PushEngage como está. Abra o service worker do PushEngage num editor de texto como o Bloco de Notas e copie o código do ficheiro do service worker do PushEngage. Em seguida, encontre o ficheiro do service worker da sua PWA e simplesmente adicione o código do service worker do PushEngage ao ficheiro.
Se negligenciar este passo, não conseguirá recolher subscritores de notificações push.
Passo #4: Configure a Opção de Adesão do PushEngage
Agora, volte ao seu painel PushEngage. Vá a Design » Modais de Popup e selecione a opção de adesão da sua escolha:
A ideia aqui é dar aos seus visitantes uma razão sólida para se inscreverem. Se precisar de ajuda com isso, consulte o nosso artigo sobre como criar um opt-in personalizado de notificações push.
E se quiser alguns modelos para começar, deve consultar este artigo sobre opt-ins de notificações push de alta conversão.
Passo #5: Crie a Sua Primeira Campanha
Agora que a sua PWA pode enviar notificações push, deve criar uma campanha real.
Uma campanha de carrinho abandonado ajuda a gerar receita extra convertendo carrinhos abandonados. É um simples lembrete que vende muitos produtos em piloto automático. Por isso, é uma ótima campanha para apoiar qualquer página de destino que gere vendas diretas.
Basta aceder ao seu painel PushEngage e ir para Campanhas » Campanhas Acionadas » Criar Uma Nova Campanha Acionada:
E depois, selecione o modelo de campanha Abandono de Carrinho:
Se é novo na criação de campanhas de marketing automatizadas, pode simplesmente seguir o nosso artigo sobre como configurar uma campanha de notificações push de carrinho abandonado. Siga todos os passos e poderá configurar notificações push como esta:
E, só para o caso de estar a perguntar, não precisa de ser uma marca de renome para que as suas campanhas de notificações push sejam eficazes. De facto, o PushEngage foi criado para ajudar pequenas empresas a crescer utilizando notificações push.
Mas antes de começar a comercializar o seu site, deve corrigir quaisquer problemas com o seu processo de subscrição de notificações push. Consulte este artigo sobre testar as suas notificações push. Se tudo estiver a funcionar perfeitamente, está pronto!
Perguntas Frequentes
P: O push de PWA requer um service worker?
R: Sim. As mensagens push de PWA são entregues pelo service worker registado, que deve incluir o tratamento de eventos push.
P: Posso enviar push de PWA no iOS?
R: O suporte do iOS para push web baseado em service worker é limitado; os navegadores Android e desktop suportam push de PWA amplamente. (Se tiver informações precisas sobre o estado do iOS, substitua por uma declaração curta atual e cite.)
P: Qual é o erro de integração mais comum?
R: Carregar um service worker push separado para a raiz sem o juntar ao service worker existente da PWA — resultando em conflitos e subscrições perdidas.
O Que Fazer Após Adicionar Notificações Push PWA?
É tudo por esta vez, pessoal!
Agora pode enviar notificações push de PWA. Até agora, também criou uma poderosa campanha de notificações push web para impulsionar o seu crescimento. Tudo isto, em menos de 10 minutos!
Veja como criar também outras campanhas automatizadas de notificações push. A maioria das campanhas push são simples e eficazes. Por isso, recomendamos a configuração de várias campanhas para o seu site. Aqui ficam algumas excelentes para começar:
- Como Enviar Automaticamente Notificações Push RSS
- Como Configurar Notificações Push de Abandono de Carrinho Usando GTM
- Como Agendar Notificações Push da Forma Fácil [Guia de 5 Min.]
E se ainda não o fez, comece com o PushEngage. O PushEngage é o software de notificações push número 1 do mundo. Assim, as suas campanhas estão em boas mãos.
