Web SDK - Configuração com Código Personalizado

Documentation Index

Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt

Use this file to discover all available pages before exploring further.

• Configuração Angular
• Configuração React JS
• Configuração Vue JS

​

Requisitos

• Site com HTTPS: O push web não funciona em HTTP ou em modos de navegação anônima/privada.
• Acesso ao servidor: Você precisará fazer upload de um arquivo service worker para o seu site.
• Origem única: O push web segue a política de mesma origem. Se você tiver múltiplas origens (domínios/subdomínios), precisará de múltiplos apps OneSignal (um por origem). Para cumprir essa limitação do navegador, você pode:
  • Redirecionar o tráfego para uma única origem para inscrições.
  • Criar múltiplos apps OneSignal, um por origem.

​

Configurar seu app e plataforma OneSignal

• Acesse Settings > Push & In-App > Web.
• Selecione o tipo de integração Custom Code.

​

Configuração do site

• Site Name: O nome do seu site e o título de notificação padrão.
• Site URL: A origem exata do seu site, por exemplo https://yourdomain.com. Evite usar www. se o seu site não estiver configurado dessa forma. Consulte os Requisitos se você tiver múltiplas origens.
• Auto Resubscribe: Habilite isso para reinscrever automaticamente os usuários que limpam os dados do navegador quando retornam ao seu site (sem nova solicitação de permissão).
• Default Icon URL: Faça upload de uma imagem PNG ou JPG quadrada de 256x256px que aparece em notificações e prompts. Se não definida, um ícone de sino é usado como padrão.

​

Testes locais

  <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
  <script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(function(OneSignal) {
      OneSignal.init({
        appId: "YOUR_OS_APP_ID",
        allowLocalhostAsSecureOrigin: true,
      });
    });
  </script>

​

Certificado Safari web push (opcional)

​

Upload de arquivos service worker

​

Adicionar código ao site

• YOUR_ONESIGNAL_APP_ID pelo seu App ID real do dashboard do OneSignal
• YOUR_SAFARI_WEB_ID pelo seu Safari Web ID real do dashboard do OneSignal

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      safari_web_id: "YOUR_SAFARI_WEB_ID",
      notifyButton: {
        enable: true,
      },
    });
  });
</script>

​

Suporte a push web no iOS

​

Testando a integração do OneSignal SDK

​

Verifique inscrições de web push

1

Inicie seu site em um dispositivo de teste.

• Use Chrome, Firefox, Edge ou Safari durante os testes.
• Não use modo Incógnito ou navegação privada. Usuários não podem se inscrever em notificações push nestes modos.
• Os prompts devem aparecer baseados na sua configuração de permission prompts.
• Clique em Allow no prompt nativo para se inscrever em notificações push.

2

Verifique seu dashboard OneSignal

• Vá para Audience > Subscriptions.
• Você deve ver uma nova entrada com o status Subscribed.

Você criou com sucesso uma inscrição de web push. Inscrições de web push são criadas quando usuários se inscrevem pela primeira vez em notificações push no seu site.

​

Configure inscrições de teste

1

Adicione a Test Subscriptions.

No dashboard, próximo à inscrição, clique no botão Options (três pontos) e selecione Add to Test Subscriptions.

2

Nomeie sua inscrição.

Nomeie a inscrição para que você possa identificar facilmente seu dispositivo depois na aba Test Subscriptions.

3

Crie um segmento de usuários de teste.

Vá para Audience > Segments > New Segment.

4

Nomeie o segmento.

Nomeie o segmento Test Users (o nome é importante porque será usado depois).

5

Adicione o filtro Test Users e clique em Create Segment.

Você criou com sucesso um segmento de usuários de teste. Agora podemos testar enviar mensagens para este dispositivo individual e grupos de usuários de teste.

​

Envie push de teste via API

1

Obtenha seu App API Key e App ID.

No seu dashboard OneSignal, vá para Settings > Keys & IDs.

2

Atualize o código fornecido.

Substitua YOUR_APP_API_KEY e YOUR_APP_ID no código abaixo com suas chaves reais. Este código usa o segmento Test Users que criamos anteriormente.

curl -X \
POST --url 'https://api.onesignal.com/notifications' \
 --header 'content-type: application/json; charset=utf-8' \
 --header 'authorization: Key YOUR_APP_API_KEY' \
 --data \
 '{
  "app_id": "YOUR_APP_ID",
  "target_channel": "push",
  "name": "Testing basic setup",
  "headings": {
  	"en": "👋"
  },
  "contents": {
    "en": "Hello world!"
  },
  "included_segments": [
    "Test Users"
  ],
  "chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
}'

3

Execute o código.

Execute o código no seu terminal.

4

Verifique imagens e entrega confirmada.

Se todos os passos de configuração foram completados com sucesso, as inscrições de teste devem receber uma notificação.

Apenas Chrome suporta imagens. Imagens aparecerão pequenas na visualização de notificação recolhida. Expanda a notificação para ver a imagem completa.

5

Verifique por entrega confirmada.

No seu dashboard, vá para Delivery > Sent Messages, depois clique na mensagem para ver as estatísticas. Você deve ver a estatística confirmed, significando que o dispositivo recebeu o push.

Safari não suporta Entrega Confirmada.

Relatórios de mensagens de notificação push

Veja estatísticas de entrega, clique e conversão para suas notificações push.

• A requisição e resposta da API (copie e cole em um arquivo .txt)
• Seu Subscription ID
• A URL do seu website com o código OneSignal

​

Identificação de usuário

​

Atribua External ID

​

Adicione Tags

​

Adicione inscrições de email e/ou SMS

• Use o método addEmail para criar inscrições de email.
• Use o método addSms para criar inscrições de SMS.

​

Privacidade e consentimento do usuário

• setConsentRequired(true): Previne coleta de dados até que consentimento seja dado.
• setConsentGiven(true): Habilita coleta de dados uma vez que consentimento é concedido.

​

Escute eventos de push, usuário e in-app

​

Eventos de notificação push

• Click event listener: Detecte quando uma notificação é tocada.
• Foreground lifecycle listener: Controle como notificações se comportam em foreground.

​

Mudanças de estado do usuário

• User state change event listener: Detecte quando o External ID é definido.
• Permission observer: Rastreie a interação específica do usuário com o prompt de permissão push nativo.
• Push subscription change observer: Rastreie quando o status de inscrição push muda.

​

Configuração avançada e capacidades

​

Configuração e referência do Web SDK

​

Perguntas frequentes

​

Preciso de HTTPS para notificações push web?

​

Posso usar esta configuração com uma aplicação de página única (SPA)?

​

O que acontece se um usuário limpar os dados do navegador?

​

Páginas relacionadas