Aviso: Não há documentação legada disponível para este item, portanto, você está vendo a documentação atual.
A Apple lançou o iOS e iPadOS 16.4, que suporta notificações push da web para aplicativos web adicionados à Tela de Início em dispositivos iPhone e iPad. Neste guia, ajudamos você a configurar seu site para enviar notificações a usuários de iPhone e iPad que visitam seu site.
Desbloqueie Alcance Ilimitado em Dispositivos iOS. Não Perca o Momento.
Configure hoje mesmo e traga de volta os visitantes do seu site antes que eles se esqueçam de você. Comece grátis, envie com mais inteligência e cresça com um plano que se adapta ao seu site.
Notificações Push da Web estão disponíveis para o navegador Safari, Google Chrome e Edge no iPhone e iPad com iOS e iPadOS 16.4. O iOS exige que o usuário adicione seu site à Tela de Início e, em seguida, abra o Aplicativo Web tocando em seu ícone. O aplicativo web abre como qualquer outro aplicativo nativo no iOS ou iPadOS em vez de abrir em um navegador. Os usuários podem conceder permissão para receber notificações push e, em seguida, gerenciar essas permissões nas Configurações de Notificação, assim como qualquer outro aplicativo no iPhone e iPad.
Antes de Começar
Você precisa de algumas coisas para ter as campanhas de push da web funcionando em dispositivos iOS.
- Seu aplicativo web deve servir um arquivo de Manifest de Aplicativo Web (manifest.json) com seu membro de exibição definido como standalone ou fullscreen.
- Os usuários devem estar no iOS ou iPadOS 16.4 ou posterior.
- O usuário precisa instalar o aplicativo web em sua Tela de Início tocando no botão Compartilhar para abrir o menu Compartilhar e, em seguida, tocando em “Adicionar à Tela de Início”.
- Um gesto do usuário, como um clique ou toque em um botão, é necessário para exibir o prompt de permissão nativo e permitir a permissão para receber notificações push.
Se o seu site já é um Progressive Web App (PWA), você não precisa fazer atualizações adicionais para se preparar para o Push da Web no iOS/iPadOS. Se não tiver certeza se o seu site é um PWA, verifique com sua equipe de desenvolvimento ou use o Lighthouse no Chrome DevTools.
Configurando seu Site para Notificação Push da Web no iOS e iPadOS
Siga as etapas para habilitar e enviar notificações push para o Safari no iPhone e iPad:
- 1. Adicione um arquivo Manifest de Aplicativo Web ao seu site.
- 2. Integre o PushEngage em seu site.
- 3. Implante e teste o manifest do seu site.
- 4. Teste a caixa de diálogo modal de Assinatura e o prompt de permissão.
1. Adicione um arquivo Manifest de Aplicativo Web ao seu site
O manifest do aplicativo web é um arquivo JSON que informa ao navegador sobre seu Progressive Web App (PWA) e como ele deve parecer e se comportar quando instalado no desktop ou dispositivo móvel do usuário. Ele contém metadados como o nome do seu aplicativo web, descrição, ícones, esquema de cores e a URL que deve ser aberta quando o aplicativo for iniciado.
Você pode usar qualquer ferramenta online para gerar um arquivo de manifesto rapidamente. O arquivo de manifesto pode ter qualquer nome, mas geralmente é chamado de manifest.json e deve ser carregado no diretório raiz do seu site. Se precisar de ajuda para adicionar código ao seu site WordPress, experimente o plugin WPCode.
Um manifesto típico se parece com isto:
{
"name": "PushEngage",
"short_name": "PushEngage",
"start_url": "/",
"display": "standalone",
"theme_color": "#3b43ff",
"background_color": "#ffffff",
"icons": [
{
"src": "icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Observação: O valor do membro display no manifesto deve ser definido como standalone ou fullscreen.
Após criar o arquivo de manifesto, referencie o manifesto na página HTML do seu site usando uma tag <link> na seção <head> da página.
Por exemplo:
<link rel="manifest" href="/manifest.json">
2. Integre o PushEngage no seu site
O próximo passo é integrar o PushEngage ao seu site para lidar com o registro e a instalação do Service Worker na página.
Se você ainda não concluiu a instalação, aqui está o guia para instalar o PushEngage. Se você é um usuário WordPress, pode usar o Plugin WordPress PushEngage, que cuidará do registro do service worker.
Você pode seguir os passos mencionados aqui se já tiver seu service worker e precisar mesclá-lo com o service worker do PushEngage.
3. Implante e Teste o Manifesto do seu Site
Depois de carregar o manifesto e integrar o PushEngage, o próximo passo é testar seu web app para garantir que o manifesto do seu web app foi implementado corretamente. Você pode testar seu site em vários dispositivos e navegadores adicionando-o à tela inicial.
Siga estes passos:
- 1. Abra o site no navegador Safari em execução no iOS 16.4 ou posterior
- 2. Clique no botão "Compartilhar" para abrir o menu de compartilhamento.
- 3. Clique na opção "Adicionar à Tela de Início".
- 4. Salve o aplicativo na sua Tela de Início.
Se o seu site foi configurado com sucesso para web push, ele abrirá o web app como qualquer outro aplicativo no iOS ou iPadOS em vez de abrir no navegador e agir meramente como um atalho.
Você deve informar seu usuário exibindo um banner na tela do aplicativo, solicitando que o usuário adicione seu aplicativo à tela inicial do dispositivo iOS e se inscreva nas notificações push da web.
4. Teste a Caixa de Diálogo de Inscrição
Um web app na Tela de Início no iOS e iPadOS requer interação direta do usuário, como tocar em um botão na página para exibir a Caixa de Diálogo de Inscrição para permissão. Siga estes passos para testar se o prompt de permissão está funcionando:
- 1. Abra o web app tocando no ícone do aplicativo na tela inicial do seu dispositivo.
- 2. Aguarde a Caixa de Diálogo de Inscrição do PushEngage aparecer na página.
- 3. Clique no botão "Permitir" no modal do PushEngage Popup para exibir o prompt de permissão.
- 4. Clique no botão "Permitir" no prompt de permissão.
Observação: A caixa de diálogo de inscrição só aparecerá se o seu site for HTTPS e o aplicativo tiver sido iniciado a partir da tela inicial. Você pode personalizar o design e o comportamento da Caixa de Diálogo de Inscrição no painel do PushEngage.
Envie uma Campanha Web Push para usuários de iOS e iPadOS
Depois de concluir as etapas acima necessárias para notificações push da web no iOS e iPadOS, você pode começar a enviar uma notificação push usando o painel do PushEngage.
As notificações push da web no iOS funcionam de forma semelhante a outros aplicativos nativos. As notificações push da web são exibidas na tela como uma notificação de alerta, no centro de notificações e também na tela de bloqueio. Os usuários também podem gerenciar suas preferências de notificação nas Configurações do iOS. Ao clicar na notificação, você será direcionado para a página de destino desejada dentro do aplicativo da web.
A Estrutura de uma Notificação Push da Web no iOS
As notificações push do Safari no iOS atualmente não suportam mídia rica, GIFs animados ou vídeos. Assim que esses recursos forem adicionados, nós os habilitaremos também. Siga as diretrizes abaixo para criar suas notificações para usuários do iOS.
As notificações push da web no iOS e iPadOS incluem os seguintes elementos:
- 1. Ícone – O ícone especificado no arquivo de manifesto. Não pode ser alterado para mensagens individuais.
- 2. Título – O título é restrito a 30-40 caracteres, após os quais é truncado.
- 3. Nome do App – O nome do aplicativo é fornecido no arquivo de manifesto e não pode ser alterado para mensagens individuais.
- 4. Mensagem – O texto é restrito a 120-150 caracteres, após os quais é truncado.
- 5. Timestamp – Isso mostra há quanto tempo a notificação foi entregue ao dispositivo.
Isso é tudo que você precisa para começar a coletar assinantes e enviar campanhas para seus usuários de iPhone e iPad.
Se você encontrar algum problema, por favor entre em contato conosco clicando aqui. Nossa equipe de suporte poderá ajudá-lo.
