Web push no iPhone e iPad

Usuários de iPhone e iPad com iOS e iPadOS 16.4 ou posterior podem receber notificações web push do seu site depois de adicioná-lo à tela inicial.

Quando o web push funciona no iPhone e iPad

O web push no iOS e iPadOS funciona apenas para um site aberto pelo seu ícone na tela inicial. Em uma aba comum do Safari, o navegador não oferece push de forma alguma, então o Web SDK é inicializado sem push e o visitante não consegue se inscrever.

Para receber notificações, o usuário precisa de:

• Um iPhone ou iPad com iOS ou iPadOS 16.4 ou posterior.
• Seu site adicionado à tela inicial e aberto por esse ícone.
• Notificações permitidas em resposta a um toque no seu site.

Dica

Recomendamos avisar no seu site aos visitantes de iPhone e iPad que eles precisam adicioná-lo à tela inicial para receber notificações. Para isso, eles tocam em Compartilhar no Safari, depois em Adicionar à Tela de Início e Adicionar, e abrem o site pelo novo ícone na tela inicial.

O que o seu site precisa

Integre o Web SDK da mesma forma que para navegadores de desktop e, em seguida, adicione um manifesto de aplicativo web:

1. Integre o SDK e o service worker seguindo SDK de Web Push 3.0. Se o seu site já tiver o próprio service worker, siga Suporte a Progressive Web App.

2. Adicione um manifesto de aplicativo web com display definido como standalone ou fullscreen e vincule-o em todas as páginas:

   manifest.json

   {
     "name": "Example Store",
     "short_name": "Store",
     "start_url": "/",
     "display": "standalone",
     "icons": [
       { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
       { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
     ]
   }

   <link rel="manifest" href="/manifest.json">

3. Solicite a permissão de notificações a partir de um toque do usuário. O iOS e o iPadOS exibem a caixa de diálogo de permissão apenas em resposta a uma ação direta do usuário, então use o Widget de assinatura ou um botão que chame Pushwoosh.subscribe():

   <button onclick="Pushwoosh.subscribe()">Get notifications</button>

Como encontrar assinantes de iPhone e iPad no Pushwoosh

O Pushwoosh registra os assinantes web de iPhone e iPad na plataforma Chrome, por isso as estatísticas não os mostram separadamente e nenhuma tag padrão identifica o dispositivo de forma confiável.

Para segmentar esses assinantes, defina uma tag própria a partir do site:

1. Crie uma tag personalizada no Control Panel antes que o site a envie, por exemplo, uma tag do tipo String chamada Web App Platform. Desmarque a caixa de seleção Específico do usuário, que vem marcada por padrão. Isso cria uma tag Geral, armazenada por dispositivo.

   Sem essa etapa, setTags cria a tag automaticamente como Específico do usuário. O valor dela é compartilhado por todos os dispositivos com o mesmo User ID, então, assim que o site chama registerUser, o navegador de desktop do usuário também recebe ios e passa a receber as mensagens que você direciona aos assinantes de iPhone e iPad com essa tag.

2. Defina a tag quando o site for executado a partir da tela inicial no iPhone ou iPad:

   Pushwoosh.push((api) => {
     // iPadOS Safari reports a Mac user agent, so a touch screen marks an iPad
     const isIos = /iPhone|iPad/.test(navigator.userAgent)
       || (/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1);
     const isIosHomeScreen = isIos && (window.navigator.standalone === true
       || window.matchMedia('(display-mode: standalone)').matches);
   
     if (isIosHomeScreen) {
       api.setTags({ 'Web App Platform': 'ios' });
     }
   });

3. Inscreva-se a partir de um iPhone ou iPad de teste.

4. Verifique o valor da tag nesse dispositivo no Explorador de Usuários. setTags retorna sucesso mesmo quando o Pushwoosh não salva o valor, por exemplo, quando a criação automática de tags está desativada para a conta, então o código sozinho não confirma que o valor foi salvo.

5. Crie um segmento com base nessa tag para enviar uma mensagem apenas aos assinantes de iPhone e iPad.