--- title: "Guia rápido de início para push na web" slug: "quick-start-web-push" updated: 2026-06-12T10:30:57Z published: 2026-06-12T10:30:57Z canonical: "docs.xtremepush.com/quick-start-web-push" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt > Use this file to discover all available pages before exploring further. # Guia rápido de início para push na web Tudo o que você precisa saber antes de começar a enviar notificações push da web Notificações push web são mensagens que vêm de um site e são entregues por um navegador após o usuário optar por recebê-las. Eles são uma poderosa ferramenta de engajamento destinada a fornecer informações relevantes e atualizadas aos seus assinantes. Os visitantes do seu site receberão um aviso perguntando se desejam receber notificações. Apenas páginas web que possuem o SDK Xtremepush presente receberão esse prompt de opt-in. Se aceitos, notificações push da web serão entregues ao usuário final. ## Pré-requisitos: integração do SDK Notificações push web exigem que você configure sua aplicação web no seu projeto Xtremepush e que complete a integração do Xtremepush SDK no seu site. Veja detalhes sobre como alcançar isso em nosso [guia de integração do site](/documentation/docs/pt-br/website-integration). > [!TIP] > Certifique-se de que está definindo o ID de usuário > > Recomenda-se que, neste momento, você use nosso método SDK para definir IDs de usuário, seguindo nosso [guia dedicado](/documentation/docs/pt-br/set-user-id) para garantir que os dispositivos possam ser associados e direcionados em suas campanhas pelo seu próprio identificador único ## Navegadores suportados Os navegadores atualmente suportados são Chrome desktop e mobile (Android), Opera desktop e mobile baseados em Chromium (Android), Firefox desktop e mobile (Android) e Safari desktop e mobile (iOS). > [!NOTE] > Suporte a push web no iOS > > A partir da versão 16.4, o Apple iOS começa a suportar notificações push da web (apenas Safari). Apenas aplicativos Web Progressivos (PWAs) são suportados. Os requisitos para receber notificações push web do Safari em dispositivos iOS são: > > - Um [gesto do usuário](/documentation/docs/pt-br/quick-start-web-push#safari-1) é necessário > - Os destinatários devem adicionar o site à tela inicial, o que cria um atalho > - A versão mais recente do SDK é necessária. [Entre em contato conosco](/documentation/docs/pt-br/contact-us) se precisar de ajuda com isso ## Chrome, Opera e Firefox No desktop, as mensagens chegam desde que o usuário tenha pelo menos uma aba do navegador aberta em qualquer site, em segundo plano ou em primeiro plano. Em dispositivos Android, o navegador não precisa estar aberto e as notificações push da web aparecerão como uma notificação push enviada para um aplicativo. ![600](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/bedffe4-web-notifications(1).jpeg?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A03Z&se=2026-11-04T09%3A57%3A03Z&sr=c&sp=r&sig=N0LGoUFVDH4URs3%2Bu1%2B%2FGLLVDXiuVFpBHVVx2DADQWk%3D) Exemplo de notificação push para Chrome nas versões móvel e desktop. ## Safari No desktop, as notificações do Safari estão sempre ativadas, mesmo quando o próprio Safari está desligado, já que o Safari está integrado ao macOS. Revise os requisitos para notificações push web no [Safari mobile](/documentation/docs/pt-br/quick-start-web-push#supported-browsers). ![1440](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/f311e95-Screen_Shot_2015-12-03_at_20.46.03(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A03Z&se=2026-11-04T09%3A57%3A03Z&sr=c&sp=r&sig=N0LGoUFVDH4URs3%2Bu1%2B%2FGLLVDXiuVFpBHVVx2DADQWk%3D) Exemplo de notificação push do Safari no desktop. > [!TIP] > Testando... > > É recomendado realizar testes antes de começar a enviar campanhas de push web para seus clientes. Você encontrará detalhes sobre como fazer o teste abaixo. ## Notificações push web de teste Para testar o web push, primeiro você precisa optar por promover seu site. Veja as instruções detalhadas dos navegadores suportados: > [!NOTE] > Solução de problemas: Logs de depuração > > Os logs de depuração permitem que você revise solicitações feitas do seu site para o projeto Xtremepush e detecte problemas. Veja nosso [guia](/documentation/docs/pt-br/debug-logs) dedicado para instruções sobre como habilitar logs de depuração. ## Chrome, Opera e Firefox Depois disso, você ativar os logs de depuração do Chrome, Opera ou Firefox no seu site e, dependendo [de como configurou o prompt](/documentation/docs/pt-br/web-custom-push-subscribe-prompt) , seu site pode mostrar o prompt de permissão do navegador, que pede permissão para mostrar notificações push web quando a página carrega ou não. Você pode acionar manualmente o prompt de permissão de opt-in usando o seguinte método SDK: ```javascript xtremepush('push', 'prompt'); ``` Quando isso acontecer, verá isso aparecer no seu navegador. Veja exemplos para Chrome, Opera e Firefox: ![1004](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/b2ae20e-Screenshot_2021-03-30_at_17.15.11(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A03Z&se=2026-11-04T09%3A57%3A03Z&sr=c&sp=r&sig=N0LGoUFVDH4URs3%2Bu1%2B%2FGLLVDXiuVFpBHVVx2DADQWk%3D) Exemplo do prompt do navegador do Chrome ![878](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/c09476f-Screenshot_2021-03-30_at_17.19.52(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A03Z&se=2026-11-04T09%3A57%3A03Z&sr=c&sp=r&sig=N0LGoUFVDH4URs3%2Bu1%2B%2FGLLVDXiuVFpBHVVx2DADQWk%3D) Exemplo do prompt do navegador do Firefox Clique em **Permitir** / **Permitir notificações** para assinar seu dispositivo nas notificações push. Você estaria pronto para testar o envio de uma campanha de teste para seu dispositivo. ## Safari Desde a versão 12.1 do Safari, o prompt de permissão web push requer um gesto do usuário para ser exibido. Essa é uma restrição rígida do navegador e não pode ser contornada. Isso significa que você não poderá pedir aos usuários que optem por entrar no carregamento da página (ou usando o método do SDK mostrado anteriormente) e o usuário terá que executar uma ação que pode ser usada para acionar a funcionalidade de prompt do SDK Xtremepush. Implementar uma troca de valor antes de acionar o prompt do navegador vai resolver isso. Veja este guia sobre [como implementar uma troca de valor](/documentation/docs/pt-br/web-two-step-prompt). ![492](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/db7cb81-Screenshot_2021-03-30_at_17.27.07(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A03Z&se=2026-11-04T09%3A57%3A03Z&sr=c&sp=r&sig=N0LGoUFVDH4URs3%2Bu1%2B%2FGLLVDXiuVFpBHVVx2DADQWk%3D) Exemplo de troca de valor para Safari. Clique em **Permitir** para optar e você estará pronto para enviar uma campanha de teste ao seu dispositivo. Para mais detalhes sobre como participar do Push, por favor, confira nosso [guia de inscrição no canal](/documentation/docs/pt-br/channel-opt-ins). ## Enviando uma campanha de push web para si mesmo Depois de configurar seu site, integrar o canal do SDK e ativar as notificações push para [Chrome, Opera e Firefox](/documentation/docs/pt-br/web-push-notifications) ou/ou [Safari](/documentation/docs/pt-br/apple-push-notifications-for-safari), você poderá ver o web push como um canal disponível na página do construtor de campanhas. Você pode criar uma campanha web push navegando até **Campanhas > Criar Campanha > Etapa única > >Criar campanha baseada em tempo** > selecionar **Web Push** na [**aba Configurar**](/documentation/docs/pt-br/campaign-setup). Revise nossas [diretrizes criativas para push web](/documentation/docs/pt-br/web-push-creative-guidelines) para melhores resultados. Você pode revisar mais detalhes sobre como configurar uma campanha de push web [neste guia](/documentation/docs/pt-br/campaign-web-push). Navegue até a [**aba Segmento**](/documentation/docs/pt-br/campaign-segment) para especificar os destinatários da campanha (**Criar segmento personalizado**). Se você integrou mais de um site no seu projeto, pode especificar qual site deseja direcionar, caso contrário a notificação push da web será enviada por todos os seus sites. Além disso, se quiser direcionar seu próprio dispositivo de teste, pode selecionar o **identificador > ID do dispositivo igual** a condição no [Segmentation Engine](/documentation/docs/pt-br/segmentation) e inserir o ID do seu dispositivo. > [!TIP] > Como obter o ID do seu dispositivo? > > Confira nosso [guia dedicado](/documentation/docs/pt-br/debug-get-device-id) para saber como obter o ID do seu dispositivo. > [!TIP] > Conte os destinatários antes de iniciar a campanha > > Ao lançar uma campanha, é uma boa prática usar o recurso **Calcular destinatários** para contar os destinatários e garantir que o público-alvo dessa campanha seja o que você espera. ## Solução de problemas Se você ainda não recebeu a notificação push, pode analisar algumas das causas mais comuns. Primeiro, navegue até **Campanhas > Campanhas Existentes** > e, na campanha correspondente, clique no **menu Opções:fa-ellipsis-v:** para ver opções adicionais > **Registro de Notificações**. Esta página mostrará uma entrada para cada aplicativo web que você tenha direcionado para aquela campanha. Clicando em **Opções:fa-ellipsis-v: > Detalhes** , é possível aprofundar os detalhes daquela campanha e verificar se há erros. Revise nossos guias dedicados sobre [o registro de notificações](/documentation/docs/pt-br/notifications-log) e os [erros mais comuns mostrados no registro de notificações](/documentation/docs/pt-br/notifications-log-errors) para saber mais.