Pular para o conteúdo principal
A Apple começou a suportar notificações push no iOS e iPadOS 16.4+ para web apps adicionados à tela inicial de um usuário. Esta funcionalidade funciona através dos navegadores Safari, Chrome e Edge, abrindo novas oportunidades de engajamento para empresas web-first. Este guia abrangente cobre tudo que você precisa para implementar notificações web push do iOS com sucesso.

Exemplo de notificação web push em dispositivo móvel.

​
Atualizações importantes para 2025

Suporte Multi-Navegador: Notificações web push agora funcionam em todos os principais navegadores no iOS/iPadOS 16.4+ incluindo Safari, Chrome e Edge. Melhorias do iOS 17+: Implementação aprimorada com APIs relevantes habilitadas por padrão, tornando web push mais acessível aos usuários. Considerações de Confiabilidade: Alguns desenvolvedores relatam problemas ocasionais de confiabilidade onde notificações web push do iOS podem funcionar inicialmente mas depois parar inesperadamente. Monitore suas taxas de entrega de notificação e tenha estratégias de engajamento de fallback preparadas.

​
Requisitos

  • Versão iOS/iPadOS: 16.4 ou superior
  • Origem HTTPS: Conexão segura com design responsivo
  • Manifest de Aplicação Web: Arquivo manifest.json válido com configurações corretas
  • Instalação na Tela Inicial: Web app deve ser adicionado à tela inicial do usuário de qualquer navegador suportado
  • Ação Iniciada pelo Usuário: Usuário deve interagir com seu site antes que prompts de permissão possam aparecer
  • Service Worker OneSignal: Necessário para entrega de notificação

​
Verificação de progressive web app (PWA)

Se seu website já é um Progressive Web App (PWA), nenhuma atualização adicional de site é necessária. Use Lighthouse no Chrome DevTools para auditar se seu site se qualifica como PWA.

​
Configuração

​
1. Crie seu manifest de aplicação web

Um Web Application Manifest (manifest.json) é um arquivo JSON que define como sua aplicação web aparece e se comporta quando instalada no dispositivo de um usuário. Para web push do iOS, este arquivo é obrigatório.

​
Campos obrigatórios do manifest

Seu manifest.json deve incluir estes campos essenciais:
  • $schema (recomendado): URL do schema JSON para validação e suporte IDE
  • name (obrigatório): Nome completo da aplicação exibido aos usuários
  • display (obrigatório): Deve ser definido como "standalone" ou "fullscreen" para compatibilidade iOS
  • start_url (obrigatório): URL de ponto de entrada quando a aplicação inicia
  • icons (obrigatório): Array de objetos de ícone com múltiplos tamanhos
  • id (recomendado): Identificador único permitindo múltiplas instâncias de app

​
Exemplo de arquivo manifest

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "OneSignal Manifest Example",
  "short_name": "OS Manifest",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#E54B4D",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-256x256.png", "sizes": "256x256", "type": "image/png" },
    { "src": "/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "id": "?homescreen=1"
}

​
Passos de implementação

  1. Colocação do Arquivo: Coloque manifest.json no diretório raiz do seu website
  2. Integração HTML: Adicione esta tag link à seção <head> de todas as páginas:
<link rel="manifest" href="/manifest.json"/>
  1. Preparação de Ícone: Crie ícones PNG de alta qualidade em múltiplos tamanhos (192x192, 256x256, 384x384, 512x512 pixels recomendados)
Use ferramentas como SimiCart Manifest Generator para criar rapidamente arquivos manifest, ou valide existentes com Manifest Tester.

​
2. Adicione o service worker OneSignal

Se você já completou nossa configuração do Web SDK e pode receber notificações web push em outros navegadores, este passo está completo. Veja a documentação do Service Worker OneSignal para instruções detalhadas de configuração.

​
3. Configure prompts de permissão

Prompts de permissão Web existentes da sua configuração do Web SDK funcionarão em dispositivos iOS apenas após usuários adicionarem seu site à tela inicial deles e abrirem a partir de lá. Este é um requisito de design da Apple.

​
4. Guie usuários para “Adicionar à Tela Inicial”

Ao contrário de dispositivos desktop ou Android onde prompts de permissão aparecem baseados em suas configurações, iOS requer uma jornada de usuário específica que você deve facilitar.

​
A jornada de usuário necessária

Usuários devem completar estes passos para receber notificações:
  1. Visitar seu website no Safari, Chrome ou Edge no iOS/iPadOS 16.4+
  2. Clicar no botão Share do navegador
  3. Selecionar opção Add to Home Screen
  4. Salvar o app no dispositivo
  5. Abrir o app da tela inicial (não do navegador)
  6. Interagir com seu botão de inscrição para acionar o prompt de permissão nativo

Adicionando um Website à Tela Inicial no iOS

​
Estratégias de onboarding de usuário

Como este processo não é intuitivo, implemente orientação clara através de:
  • Banners de website: Exiba banners especificamente em dispositivos Apple móveis explicando o valor das notificações e fornecendo instruções passo a passo.
  • Guias visuais: Use screenshots e setas para mostrar aos usuários exatamente onde tocar.
  • Tempo: Apresente a orientação após usuários demonstrarem engajamento com seu conteúdo.

​
Exemplos de implementação

Aqui estão abordagens efetivas de aplicações reais:

Exemplo de banner solicitando usuários a adicionar à tela inicial

Orientação visual passo a passo

Mensagem focada em benefícios

Call-to-action claro com pistas visuais

​
Soluções open source

Considere implementar esta popular solução de banner open-source: Projeto GitHub: add-to-home-screen por rajatsehgal

Exemplo de um prompt de banner Add to Home Screen de um projeto open source por rajatsehgal.

Exemplos adicionais de banner e melhores práticas disponíveis em web.dev.

​
5. Teste e validação

​
Teste de arquivo manifest

  1. Verificação de Acessibilidade: Navegue para https://yoursite.com/manifest.json para garantir acessibilidade pública
  2. Browser DevTools:
    • Abra Chrome DevTools (F12)
    • Vá para aba Application → Manifest
    • Revise quaisquer erros ou avisos
  3. Validadores Online:

​
Teste de notificação push ponta a ponta

  1. Visite seu website em dispositivo iOS 16.4+ usando Safari, Chrome ou Edge
  2. Clique no botão Share do navegador
  3. Selecione Add to home screen
  4. Salve o app no seu dispositivo
  5. Abra o app da tela inicial (passo crucial)
  6. Acione seu botão de inscrição - o prompt de permissão nativo deve aparecer
  7. Conceda permissão e teste entrega de notificação

​
Notas importantes de teste

Requisitos para re-testar: Para testar novamente no mesmo dispositivo:
  • Remova o app da tela inicial
  • Limpe cache do navegador (Settings > Safari/Chrome/Edge > Clear cache)
  • Repita o processo
Recuperação de permissão negada: Se permissão for negada, o app da tela inicial deve ser removido e re-adicionado para que o prompt de permissão apareça novamente. Problemas comuns para verificar:
  • Assegure que campo display é "standalone" ou "fullscreen"
  • Verifique que todos os caminhos de ícone são acessíveis
  • Confirme que manifest serve com tipo MIME correto (application/manifest+json)
  • Teste para erros CORS

​
Solução de Problemas

Manifest não carregando: Verifique caminho do arquivo, requisito HTTPS e configuração de tipo MIME no seu servidor. Ícones não exibindo: Verifique acessibilidade do arquivo de ícone e especificações de tamanho corretas no manifest. Prompt de permissão não aparecendo: Assegure que usuário acessou site via app da tela inicial e clicou em um elemento interativo primeiro. Notificações não entregando: Verifique que service worker OneSignal está propriamente instalado e verifique console do navegador para erros.

​
Próximos passos

Você está pronto para enviar notificações! Continue para a documentação de Push ou use nossa API Create message para começar a engajar seus usuários iOS com notificações web push.
Para sucesso contínuo, monitore suas métricas de desempenho de web push do iOS e considere implementar estratégias de progressive enhancement que lidam graciosamente com os passos adicionais necessários para usuários iOS enquanto fornecem experiências perfeitas em outras plataformas.