Importar o SDK web

Adicione o Xtremepush SDK ao seu site

Após adicionar seu site ao Xtremepush na Integração com o Site, o SDK deve ser adicionado ao site. Isso pode ser feito inserindo manualmente o JavaScript necessário ou usando diretamente o Google Tag Manager.

Gerenciador de Tags do Google

1. Abra o Google Tag Manager e selecione o espaço de trabalho do seu site.

2. Clique no botão Nova Marca .

3. Insira um nome para a etiqueta, por exemplo, Xtremepush SDK

4. Clique na seção Configuração de Tags para abrir a lista de tipos de tag disponíveis. Pesquise ou role a página para selecionar Xtremepush.

5. Cole a chave SDK fornecida ao adicionar o site à plataforma no campo da Chave do App Xtremepush .

6. Clique na seção Gatilhos para abrir a lista de gatilhos disponíveis. Selecione Todas as Páginas e clique em Adicionar.

7. Guarde a etiqueta.

8. No espaço de trabalho principal, clique no botão Pré-visualização para testar a nova tag Xtremepush no seu site no modo de visualização, abrindo seu site no mesmo navegador assim que ver o prompt no Google Tag Manager.

9. Verifique se o SDK está implantado, pois agora aparece um prompt para notificação de permissão, etc.

   

10. Salve as alterações no seu espaço de trabalho do Google Tag Manager para colocar a nova tag ativa para todos os visitantes do site clicando em Enviar > Publicar.

    Projetos não hospedados na nuvem compartilhada da UE

    As etapas fornecidas neste guia são aplicáveis a projetos provisionados no painel da UE. Se seu projeto for provisionado em um ambiente diferente, por exemplo, na nuvem compartilhada dos EUA, você deve criar uma tag de script personalizada para ativar em Todas as Visualizações de Página (para garantir que o SDK esteja integrado a todas as suas páginas) e incluir o código de integração do SDK das Configurações > Apps & Sites > clicar no site correspondente.

Implantação manual

O JavaScript personalizado para implantar o SDK no seu site pode ser encontrado em Configurações > Apps & Sites clicando no site correspondente. Copie e cole esse código em todas as páginas que você quiser integrar. Você pode adicioná-lo em qualquer lugar, como na <head> seção ou antes da <body> tag.

Se você está usando o Google Analytics, cole esse código após o código de rastreamento do Google Analytics.

Hospedando todo o JavaScript localmente

É possível hospedar o SDK localmente se o seu ambiente exigir.

1. Baixe seu SDK e JS de serviço dos seguintes locais:

   • https://prod.webpu.sh/YOURAPPLICATIONKEY/sdk.js

   • https://prod.webpu.sh/YOURAPPLICATIONKEY/service-worker-source.js

2. Coloque esses arquivos no local apropriado do diretório do seu site.

3. No código de integração JavaScript colocado no seu site, atualize o parâmetro que aponta para a localização remota do SDK com o caminho absoluto ou relativo para o seu SDK hospedado localmente.

   • Por exemplo, mudar https://prod.webpu.sh/YOURAPPLICATIONKEY/sdk.js para /webpush/sdk.js

4. Se você configurou Notificações Push para Chrome/Opera e Firefox, verifique se configurou Usar Domínio Autohospedado como Sim e a localização está service-worker.js correta.

Ativando seu site

Depois de integrar o SDK ao seu site, clique em Ativar o site. O sistema realizará uma verificação para verificar se o SDK foi integrado com sucesso.

Se precisar recuperar os dados do seu SDK, pode clicar em chave do SDK (a chave será copiada para a sua prancheta).

Comportamento do SDK quando carregado

Uma vez adicionado a um site, o SDK do JavaScript inicializa uma função global xtremepush() .

A xtremepush() função é uma fila de comandos. Em vez de executar imediatamente os comandos que recebe, ele os adiciona a uma fila que atrasa a execução até que o SDK esteja totalmente carregado.

Esse padrão permite que os desenvolvedores usem a xtremepush() fila de comandos sem precisarem se preocupar se o SDK terminou de carregar. Ela fornece uma interface simples e síncrona que abstrai a maior parte das complexidades do código assíncrono.

O SDK opera de forma totalmente assíncrona e não afeta o código JavaScript existente. Ele utiliza vários tipos de requisições de API para enviar dados aos nossos servidores. Todas as requisições da API estão passando pelo HTTPS e sendo enviadas de forma assíncrona.

Integração com Progressive Web App (PWA)

Ao integrar o Xtremepush SDK em um Progressive Web App, é necessário configurar componentes adicionais para garantir a funcionalidade adequada com os trabalhadores de serviço e capacidades offline.

Para integrar o SDK, primeiro configure o manifesto do aplicativo web e depois implemente o trabalhador de serviço.

Configurar o Manifesto do Aplicativo Web

1. Crie ou atualize seu manifest.json arquivo na raiz do seu projeto:

   {
     "name": "App Name",
     "short_name": "App",
     "description": "App description",
     "start_url": "/",
     "display": "standalone",
     "background_color": "#ffffff",
     "theme_color": "#000000",
     "icons": [
       {
         "src": "/icons/icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       },
       {
         "src": "/icons/icon-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
       }
     ]
   }

2. Vincule o manifesto no seu HTML <head>:

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

Implementar o Trabalhador de Serviço

1. Crie um arquivo nomeado service-worker.js no seu diretório público com o seguinte código:

   importScripts(decodeURIComponent(
     location.search.substring(location.search.indexOf('ref=')+4)
   ));

   Esse trabalhador de serviço importa nossa lógica de trabalhador de serviço SDK, que gerencia estratégias de cache, sincronização em segundo plano e funcionalidade offline para o Web SDK.
   

2. Registre o assistente de serviço no seu arquivo principal de inscrição:

   if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
       
       navigator.serviceWorker
         .register(`/service-worker.js`)
         .then(registration => {
           console.log('Service Worker registered successfully:', registration.scope);
         })
         .catch(error => {
           console.error('Service Worker registration failed:', error);
         });
     });
   }