Procurando uma maneira simples de adicionar notificações push PWA?
Progressive Web Apps (PWAs) são aplicativos que funcionam em qualquer dispositivo. Mas sempre há algum conflito no envio de notificações push da web. Geralmente, o maior problema são as taxas de entrega. Você pode adicionar push da web ao seu PWA de várias maneiras. Mas como enviar notificações push da web que realmente são entregues a partir do seu PWA?
Não se preocupe! Neste artigo, mostraremos passo a passo como você pode enviar notificações push PWA com taxas de entrega confiáveis em menos de 10 minutos.
Vamos lá.
Resumo — O que é push PWA? Notificações push de Progressive Web App (PWA) são mensagens push da web padrão entregues através do service worker registrado de um PWA, permitindo que aplicativos instalados da web recebam mensagens push mesmo quando a página da web está fechada.
Envie Notificações Push PWA Hoje Mesmo!
Notificações push são uma ferramenta de marketing super eficaz e de baixo custo para ajudá-lo a aumentar seu tráfego recorrente, engajamento e vendas no piloto automático.
Como Instalar Notificações Push PWA
Adicionar notificações push a um Progressive Web App é bastante simples. Basta seguir as etapas deste artigo. Se você seguir todas as etapas, ao final deste artigo, você deverá ser capaz de enviar notificações push como esta:
- Registre um service worker na raiz do site que combine a lógica PWA e o tratamento de 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 do PushEngage.
O principal desafio é que todo software de notificação push da web usa um arquivo Javascript chamado service_worker.js. O service worker ajuda você a coletar assinantes de notificações push através de modais pop-up. Mas todos os PWAs já possuem um arquivo service worker que serve a um propósito diferente. E, em um determinado momento, seu PWA só pode usar um service worker.
Em palavras simples, os serviços de push da web confundem seu PWA. Portanto, às vezes ele coletará assinantes de notificações push e às vezes não. Às vezes, você pode enviar notificações e às vezes não. Você pode até acabar enviando mensagens push para toda a sua lista de assinantes e elas serem entregues apenas a alguns assinantes.
Recomendamos o uso do PushEngage para enviar notificações push PWA. PushEngage é o software de notificação push nº 1 do mundo. Assim, você sabe que suas campanhas estão em boas mãos.
Claro, construtores de PWA como o Mendix vêm com seu próprio sistema de notificações push. Mas e se você quiser migrar para algum outro serviço de notificações push? E se você quiser mais flexibilidade e controle sobre suas campanhas de notificações push? Além disso, esses serviços normalmente fornecem uma API para criar campanhas push. Mas com o PushEngage, você obtém um painel fácil de usar a partir do qual pode criar, agendar, enviar e gerenciar campanhas push.
E sim, você pode usar o Firebase Cloud Messaging (FCM) para enviar notificações push para aplicativos Android. Mas com o PushEngage, você pode enviar notificações push para aplicativos Android e web, notificações push para web e aplicativos iOS e iPadOS, e notificações push de navegador.
A melhor parte? Você pode até enviar poderosas notificações push de eCommerce com alguns cliques.
| Fato | Valor |
|---|---|
| Mecanismo de entrega principal | Service worker (assinatura push) |
| Tempo típico de configuração | ~10 minutos (básico) |
| Requisito comum | Service_worker.js no escopo raiz + manifest.json |
| Funciona em | A maioria dos navegadores desktop e Android (varia por plataforma) |
Vamos começar.
Passo nº 1: Configure Sua Conta PushEngage
Acesse a página inicial do PushEngage e clique no botão Começar :
Você pode experimentar o PushEngage gratuitamente. Se você tem um blog pequeno que precisa de tráfego recorrente e engajamento, isso provavelmente é suficiente. Mas se você leva vendas a sério, deve adquirir o pacote Enterprise e desbloquear as campanhas automatizadas.
Depois de se inscrever em sua conta PushEngage, vá para o seu painel PushEngage e vá para Configurações do Site » Detalhes do Site:
Você pode definir seu logotipo, nome do site e URL do site aqui. É muito importante organizar essas coisas agora para que você possa testar toda a sua configuração mais tarde.
Etapa nº 2: Obtenha o Código de Instalação do PushEngage
Para instalar notificações push, você precisará obter um código de instalação. Na sua tela Configurações do Site, role para baixo e clique no botão Clique Aqui Para Instruções de Configuração:
Em seguida, clique na guia Qualquer Site:
Você pode usar o código Javascript para começar a enviar notificações push.
Etapa nº 3: Adicionar o Código do Service Worker para Notificações Push PWA
A parte mais complicada do processo finalmente chegou. No painel do PushEngage, em Instruções de Configuração, você também verá uma opção para baixar o arquivo do service worker.
IMPORTANTE: Um PWA só pode ter um escopo de service worker ativo por vez — mescle o código push em seu service worker existente. Por padrão, um PWA não requer um arquivo de service worker. Tudo o que você precisa para transformar qualquer site em um Progressive Web App é um arquivo manifest. Portanto, se o seu PWA não tiver um arquivo de service worker, você pode simplesmente adicionar o service worker do PushEngage ao diretório raiz do seu site ou aplicativo web.
Mas se o seu PWA já tiver um service worker em vigor, NÃO faça o upload direto do arquivo do service worker de notificações push do PushEngage como está. Abra o service worker do PushEngage em um editor de texto como o Bloco de Notas e copie o código do arquivo do service worker do PushEngage. Em seguida, encontre o arquivo do service worker do seu PWA e simplesmente adicione o código do service worker do PushEngage ao arquivo.
Se você negligenciar esta etapa, não poderá coletar assinantes de notificações push.
Etapa nº 4: Configurar a Opt-In do PushEngage
Agora, volte ao seu painel PushEngage. Vá para Design » Popup Modals e selecione a opção de sua escolha:
A ideia aqui é dar aos seus visitantes um bom motivo para se inscrever. Se precisar de ajuda com isso, confira nosso artigo sobre como criar um opt-in de notificação push personalizado.
E se você quiser alguns modelos para começar, confira este artigo sobre opt-ins de notificação push de alta conversão.
Etapa nº 5: Criar Sua Primeira Campanha
Agora que seu PWA pode enviar notificações push, você deve criar uma campanha real.
Uma campanha de carrinho abandonado ajuda a gerar receita extra convertendo carrinhos abandonados. É um lembrete simples que vende muitos produtos no piloto automático. Portanto, é uma ótima campanha para apoiar qualquer página de destino que gere vendas diretas.
Basta acessar seu painel do PushEngage e ir para Campanhas » Campanhas Acionadas » Criar Nova Campanha Acionada:
E então, selecione o modelo de campanha Carrinho Abandonado:
Se você é novo na criação de campanhas de marketing automatizadas, pode simplesmente seguir nosso artigo sobre como configurar uma campanha de notificação push de carrinho abandonado. Siga cada etapa e você poderá configurar notificações push como esta:
E só para você saber, você não precisa ser uma marca conhecida para que suas campanhas de notificação push sejam eficazes. Na verdade, o PushEngage foi criado para ajudar pequenas empresas a crescer usando notificações push.
Mas antes de começar a comercializar seu site, você deve corrigir quaisquer problemas com seu processo de assinatura de notificações push. Confira este artigo sobre testar suas notificações push. Se tudo estiver funcionando perfeitamente, você terminou!
Perguntas Frequentes
Q: O push de PWA requer um service worker?
R: Sim. As mensagens de push de PWA são entregues pelo service worker registrado, que deve incluir o tratamento de eventos de push.
Q: Posso enviar push de PWA no iOS?
R: O suporte do iOS para push da web baseado em service worker é limitado; os navegadores Android e desktop suportam push de PWA amplamente. (Se você tiver informações precisas sobre o status do iOS, substitua por uma declaração curta e atual e cite.)
Q: Qual é o erro de integração mais comum?
R: Fazer upload de um service worker de Push separado para a raiz sem mesclá-lo com o service worker existente do PWA — resultando em conflitos e assinaturas perdidas.
O que Fazer Após Adicionar Notificações Push PWA?
É tudo por hoje, pessoal!
Agora você pode enviar notificações push de PWA. Até agora, você também criou uma poderosa campanha de notificações push da web para impulsionar seu crescimento. Tudo isso, em menos de 10 minutos!
Confira como criar outras campanhas automatizadas de notificações push também. A maioria das campanhas de push são simples e eficazes. Portanto, recomendamos a configuração de várias campanhas para o seu site. Aqui estão algumas ótimas para começar:
- Como Enviar Automaticamente Notificações Push do RSS
- Como Configurar Notificações Push de Abandono de Carrinho Usando GTM
- Como agendar notificações push da maneira fácil [Guia de 5 min.]
E se você ainda não o fez, comece com o PushEngage. O PushEngage é o software de notificação push nº 1 do mundo. Portanto, suas campanhas estão em boas mãos.
