Skip to content

Push para web em dispositivos móveis no Safari (iOS e iPadOS)

O Safari v16.4 é compatível com web push para dispositivos móveis, o que significa que agora é possível reengajar usuários móveis com notificações por push no iOS e iPadOS.

Este artigo detalhará as etapas necessárias para configurar o push em dispositivos móveis para o Safari.

Etapas de integração

Primeiro, leia e siga nosso guia padrão de integração de push para web. As etapas a seguir são necessárias apenas para oferecer suporte a web push no Safari para iOS e iPadOS.

Etapa 1: Criar um arquivo de manifesto

Um Manifesto de Aplicativo Web é um arquivo JSON que controla como o seu site é apresentado quando instalado na tela inicial de um usuário.

Por exemplo, é possível definir a cor do tema de fundo e o ícone que o App Switcher usa, se ele é renderizado em tela inteira para se assemelhar a um aplicativo nativo ou se o aplicativo deve ser aberto no modo paisagem ou retrato.

Crie um novo arquivo manifest.json no diretório raiz do seu site, com os seguintes campos obrigatórios.

1
2
3
4
5
6
7
8
9

{
  "name": "your app name",
  "short_name": "your app name",
  "display": "fullscreen",
  "icons": [{
    "src": "favicon.ico",
    "sizes": "128x128",
  }]
}

A lista completa de campos suportados pode ser encontrada aqui.

Adicione a seguinte tag <link> ao elemento <head> de seu site, apontando para o local onde o arquivo de manifesto está hospedado.

1

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

Etapa 3: Adicionar um service worker{#service-worker}

Seu site precisa ter um arquivo de service worker que importe a biblioteca de service worker da Braze, conforme descrito em nosso guia de integração de push para web.

Etapa 4: Adicionar à tela inicial

Ao contrário dos principais navegadores, como Chrome e Firefox, não é possível solicitar permissão push no Safari iOS/iPadOS, a menos que seu site tenha sido adicionado à tela inicial do usuário.

O recurso Add to Homescreen permite que os usuários marquem seu site como favorito, adicionando seu ícone ao valioso espaço da tela inicial deles.

Um iPhone mostrando opções para marcar um site como favorito e salvá-lo na tela inicial

Etapa 5: Mostrar o prompt push nativo

Depois que o app tiver sido adicionado à sua tela inicial, agora é possível solicitar permissão de push quando o usuário realizar uma ação (como clicar em um botão). Isso pode ser feito usando o método requestPushPermission ou com uma mensagem no app sem código push primer.

Um prompt push pedindo para "permitir" ou "não permitir" notificações

Por exemplo:

1
2
3
4
5
6
7
8
9

import { requestPushPermission } from "@braze/web-sdk";

button.onclick = function(){
    requestPushPermission(() => {
        console.log(`User accepted push prompt`);
    }, (temporary) => {
        console.log(`User ${temporary ? "temporarily dismissed" : "permanently denied"} push prompt`);
    });
};

Próximas etapas

Em seguida, envie a si mesmo uma mensagem de teste para validar a integração. Depois que sua integração estiver concluída, você poderá usar nossas mensagens push primárias sem código para otimizar suas taxas de aceitação push.

Github   Editar esta página no GitHub
QUÃO ÚTIL FOI ESTA PÁGINA?
New Stuff!