Aviso: Não existe documentação legada disponível para este item, pelo que está a ver a documentação atual.
A Apple lançou o iOS e iPadOS 16.4, que suporta notificações push da web para aplicações web adicionadas ao Ecrã Principal em dispositivos iPhone e iPad. Neste guia, ajudamo-lo a configurar o seu website para enviar notificações aos utilizadores de iPhone e iPad que visitam o seu website.
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 si. Comece gratuitamente, envie de forma mais inteligente e cresça com um plano que se adapta ao seu site.
As Notificações Push da Web estão disponíveis para o navegador Safari, Google Chrome e Edge em iPhone e iPad com iOS e iPadOS 16.4. O iOS exige que o utilizador adicione o seu website ao seu Ecrã Principal e, em seguida, abra a Aplicação Web tocando no seu ícone. A aplicação web abre-se como qualquer outra aplicação nativa no iOS ou iPadOS em vez de abrir num navegador. Os utilizadores podem conceder permissão para receber notificações push e, em seguida, gerir essas permissões nas Definições de Notificações, tal como qualquer outra aplicação no iPhone e iPad.
Antes de Começar
Precisa de algumas coisas para ter as campanhas push da web a funcionar em dispositivos iOS.
- A sua aplicação web deve servir um ficheiro Web Application Manifest (manifest.json) com o seu membro display definido como standalone ou fullscreen.
- Os utilizadores devem estar no iOS ou iPadOS 16.4 ou posterior.
- O utilizador precisa de instalar a aplicação web no seu Ecrã Principal tocando no botão Partilhar para abrir o menu Partilhar e, em seguida, tocando em “Adicionar ao Ecrã Principal”.
- É necessária uma ação do utilizador, como um clique ou toque num botão, para mostrar o pedido de permissão nativo e permitir a permissão para receber notificações push.
Se o seu website já é uma Progressive Web App (PWA), não precisa de fazer atualizações adicionais para se preparar para o Push da Web iOS/iPadOS. Se não tem a certeza se o seu website é uma PWA, verifique com a sua equipa de desenvolvimento ou use o Lighthouse no Chrome DevTools.
Configurar o seu Website para Notificações Push da Web iOS e iPadOS
Siga os passos para ativar e enviar notificações push para o Safari no iPhone e iPad:
- 1. Adicione um ficheiro Web App Manifest ao seu website.
- 2. Integre o PushEngage no seu website.
- 3. Implemente e teste o manifest do seu website.
- 4. Teste a caixa modal de diálogo de subscrição e o pedido de permissão.
1. Adicione um ficheiro Web App Manifest ao seu Website
O manifest da aplicação web é um ficheiro JSON que informa o navegador sobre a sua Progressive Web App (PWA) e como ela deve parecer e comportar-se quando instalada no desktop ou dispositivo móvel do utilizador. Contém metadados como o nome da sua aplicação web, descrição, ícones, esquema de cores e o URL que deve ser aberto quando a aplicação é iniciada.
Pode usar qualquer ferramenta online para gerar rapidamente um ficheiro de manifesto. O ficheiro de manifesto pode ter qualquer nome, mas é comummente chamado manifest.json e deve ser carregado para o diretório raiz do seu website. Se precisar de ajuda para adicionar código ao seu site WordPress, experimente o plugin WPCode.
Um manifesto típico parece algo assim:
{
"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"
}
]
}
Nota: O valor do membro display no manifesto deve ser definido como standalone ou fullscreen.
Após criar o ficheiro manifest, referencie o manifest na página HTML do seu website utilizando uma tag <link> na secção <head> da página.
Por exemplo:
<link rel="manifest" href="/manifest.json">
2. Integre o PushEngage no Seu Website
O próximo passo é integrar o PushEngage no seu website para gerir o registo e a instalação do Service Worker na página.
Se ainda não concluiu a instalação, aqui tem o guia para instalar o PushEngage. Se for um utilizador WordPress, pode utilizar o Plugin WordPress PushEngage, que irá gerir o registo do service worker.
Pode seguir os passos mencionados aqui se já tiver o seu service worker e precisar de o fundir com o service worker do PushEngage.
3. Implemente e Teste o Manifest do Seu Website
Depois de ter carregado o manifest e integrado o PushEngage, o próximo passo é testar a sua web app para garantir que o manifest da sua web app foi implementado corretamente. Pode testar o seu website em vários dispositivos e navegadores adicionando-o ao seu ecrã principal.
Siga estes passos:
- 1. Abra o website no navegador Safari a correr no iOS 16.4 ou posterior
- 2. Clique no botão “Partilhar” para abrir o menu de partilha.
- 3. Clique na opção “Adicionar ao Ecrã Principal”.
- 4. Guarde a aplicação no seu Ecrã Principal.
Se o seu website foi configurado com sucesso para web push, irá abrir a web app como qualquer outra aplicação no iOS ou iPadOS em vez de abrir num navegador e atuar meramente como um atalho.
Deverá informar o seu utilizador mostrando um banner no ecrã da aplicação, solicitando ao utilizador que adicione a sua aplicação ao ecrã principal do seu dispositivo iOS e subscreva as notificações web push.
4. Teste a Caixa de Diálogo de Subscrição
Uma web app no Ecrã Principal no iOS e iPadOS requer interação direta do utilizador, como tocar num botão na página para exibir a Caixa de Diálogo de Subscrição para permissão. Siga estes passos para testar se o pedido de permissão está a funcionar:
- 1. Abra a web app tocando no ícone da aplicação a partir do ecrã principal no seu dispositivo.
- 2. Aguarde que a Caixa de Diálogo de Subscrição do PushEngage apareça na página.
- 3. Clique no botão “Permitir” na janela modal do PushEngage para exibir o pedido de permissão.
- 4. Clique no botão “Permitir” no pedido de permissão.
Nota : A caixa de diálogo de Subscrição só aparecerá se o seu website for HTTPS e a aplicação tiver sido iniciada a partir do ecrã principal. Pode personalizar o design e o comportamento da Caixa de Diálogo de Subscrição a partir do painel do PushEngage.
Envie uma Campanha Web Push para utilizadores iOS e iPadOS
Depois de ter concluído os passos acima necessários para notificações web push iOS e iPadOS, pode agora começar a enviar uma notificação push utilizando o painel do PushEngage.
As notificações push da web no iOS funcionam de forma semelhante a outras aplicações nativas. As notificações push da web são exibidas no ecrã como uma notificação de alerta, no centro de notificações e também no ecrã de bloqueio. Os utilizadores podem também gerir as suas preferências de notificação a partir das Definições do iOS. Assim que clicar na notificação, esta irá levá-lo para a página de destino desejada dentro da aplicação web.
A Estrutura de uma Notificação Push da Web no iOS
As notificações push do Safari no iOS não suportam atualmente rich media, GIFs animados ou vídeos. Assim que estas funcionalidades forem adicionadas, iremos ativá-las também. Por favor, siga as diretrizes abaixo para criar as suas notificações para utilizadores do iOS.
As notificações push da web no iOS e iPadOS incluem os seguintes elementos:
- 1. Ícone – O ícone especificado no ficheiro manifest. Não pode ser alterado para mensagens individuais.
- 2. Título – O título está restrito a 30-40 caracteres, após os quais é truncado.
- 3. Nome da Aplicação – O nome da aplicação é fornecido no ficheiro manifest e não pode ser alterado para mensagens individuais.
- 4. Mensagem – O texto está restrito a 120-150 caracteres, após os quais é truncado.
- 5. Timestamp – Isto mostra há quanto tempo a notificação foi entregue ao dispositivo.
Isto é tudo o que precisa para começar a recolher subscritores e a enviar campanhas para os seus utilizadores de iPhone e iPad.
Se encontrar algum problema, por favor contacte-nos clicando aqui. A nossa equipa de suporte poderá ajudá-lo.
