Integração de notificações por push

Uma notificação por push é um alerta que aparece na tela do usuário quando ocorre uma atualização importante. As notificações por push podem ser recebidas mesmo quando a página da Web não estiver aberta no navegador do usuário. As notificações por push são uma maneira valiosa de fornecer aos seus usuários conteúdo relevante e sensível ao tempo ou de reengajá-los com o seu site. Este artigo de referência aborda como integrar o web push da Braze com o SDK da Braze.

Consulte nossas práticas recomendadas de push para obter mais recursos.

As notificações por push da Web são implementadas usando o padrão push do W3C, que é suportado pela maioria dos principais navegadores.

Para saber mais sobre os padrões do protocolo push e o suporte a navegadores, consulte os recursos de AppleSafari , MozillaMozilla e MicrosoftMicrosoft

Integração

Etapa 1: Configurar o service worker do seu site

• Se você ainda não tiver um service worker, crie um novo arquivo chamado service-worker.js com o seguinte snippet e coloque-o no diretório raiz do seu site.
• Caso contrário, se o seu site já registrar um service worker, adicione o seguinte trecho ao arquivo do service worker e defina a opção de inicialização manageServiceWorkerExternally como true ao inicializar o Web SDK.

Se o nome de arquivo do service worker não for service-worker.js, será necessário usar a opção de inicialização serviceWorkerLocation.

E se eu não conseguir registrar um service worker no diretório raiz?

Por padrão, um service worker só pode ser usado no mesmo diretório em que está registrado. Por exemplo, se o seu arquivo de service worker existir em /assets/service-worker.js, só será possível registrá-lo em example.com/assets/* ou em um subdiretório da pasta assets, mas não na sua página inicial (example.com/). Por isso, é recomendável hospedar e registrar o service worker no diretório raiz (como https://example.com/service-worker.js).

Se não for possível registrar um service worker no domínio raiz, uma alternativa é usar o cabeçalho HTTP Service-Worker-Allowed ao servir o arquivo do service worker. Ao configurar seu servidor para retornar Service-Worker-Allowed: / na resposta para o service worker, isso instruirá o navegador a ampliar o escopo e permitir que ele seja usado em um diretório diferente.

Posso criar um service worker usando um Tag Manager?

Não, os service workers devem ser hospedados no servidor de seu site e não podem ser carregados por meio do Tag Manager.

Etapa 2: Registro do navegador

Para que um navegador receba notificações por push, é necessário registrá-lo chamando braze.requestPushPermission(). Isso solicitará imediatamente a permissão para push do usuário.

Se quiser mostrar sua própria interface de usuário relacionada a push ao usuário antes de solicitar permissão de push (conhecido como prompt de soft push), é possível testar para ver se o push é compatível com o navegador do usuário com braze.isPushSupported(). Consulte o exemplo de prompt soft push usando mensagens no app.

Para cancelar a inscrição de um usuário, chame braze.unregisterPush().

Etapa 3: Configurar o push do Safari (opcional)

Para oferecer suporte a notificações por push para o Safari no macOS X, siga estas outras instruções:

• Gere um certificado de push do Safari seguindo as instruções de Registro na Apple.
• No dashboard da Braze, na página Configurações (onde estão localizadas suas chaves de API), selecione seu app da Web. Clique em Configure Safari Push e siga as instruções, fazendo upload do certificado push que você acabou de gerar.
• Ao chamar braze.initialize, forneça a opção de configuração opcional safariWebsitePushId com o ID de push do site que você usou ao gerar o certificado de push do Safari. Por exemplo braze.initialize('YOUR-API-KEY', {safariWebsitePushId: 'web.com.example.domain'})

Safari Mobile push

O Safari 16.4+ no iOS e iPadOS suporta web push para apps que foram adicionados à tela inicial e têm um arquivo Web Application Manifest. Depois de concluir as etapas para integrar as notificações por web push, você poderá fornecer suporte para push móvel também para o Safari.

Para oferecer suporte ao push para mobile e web do Safari, siga nosso guia aqui.

Propt de soft push

Um prompt de soft push (também conhecido como “push primer”) ajuda a otimizar sua taxa de aceitação quando se trata de pedir permissão.

Visite Soft push prompt para saber mais sobre a configuração de um soft push prompt.

Requisito de HTTPS

Os padrões da web exigem que o domínio que está solicitando a permissão de notificação por push seja seguro.

O que define um site seguro?

Um site é considerado seguro se corresponder a um dos seguintes padrões de origem segura:

• (https, , *)
• (wss, *, *)
• (, localhost, )
• (, .localhost, *)
• (, 127/8, )
• (, ::1/128, *)
• (arquivo, *, -)
• (chrome-extension, *, -)

Esse requisito de segurança na especificação de padrões abertos sobre a qual web push da Braze é desenvolvido evita ataques do tipo man-in-the-middle.

E se um site seguro não estiver disponível?

Embora a prática recomendada do setor seja tornar todo o site seguro, os clientes que não podem proteger o domínio do site podem contornar o requisito usando um modal seguro. Leia mais em nosso guia para usar o Alternate push domain ou veja uma demonstração funcional.

Configurações avançadas do trabalhador de serviço

Nosso arquivo de service worker chamará automaticamente o endereço skipWaiting após a instalação. Se quiser evitar isso, adicione o seguinte código ao seu arquivo de service worker, antes de importar a Braze:

Solução de problemas

Segui as instruções de integração, mas ainda não estou recebendo notificações por push.

• As notificações por push da Web exigem que seu site seja HTTPS.
• Nem todos os navegadores podem receber mensagens de navegador. Certifique-se de que braze.isPushSupported() retorne true no navegador.
• Se um usuário tiver negado o acesso push a um site, ele não será solicitado a dar permissão novamente, a menos que remova o status de negação das preferências do navegador.