Pular para o conteúdo
Guias do usuárioSuporte Solicitar demonstração Entrar
Pushwoosh.com

Uso com npm

Instalando o SDK Web Push da Pushwoosh via npm

Anchor link to

Veja como instalar e usar o SDK de Notificações Push Web da Pushwoosh em seu projeto usando o npm. Este guia pressupõe que você tenha um conhecimento básico de npm e importações de módulos JavaScript.

Instale o SDK:

Anchor link to
Instalar o SDK de Notificações Push Web da Pushwoosh
npm install web-push-notifications

Configuração do Service Worker

Anchor link to

Ao usar o SDK via npm, o arquivo do service worker está localizado em:

node_modules/web-push-notifications/service-worker.js

Importante: Durante o processo de compilação ou implantação, você deve copiar este arquivo de service worker para a raiz do seu site. Isso é crucial para que as notificações push funcionem corretamente.

Por exemplo, em um projeto webpack, você pode usar o copy-webpack-plugin:

const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
  // ...outras configurações do webpack
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/web-push-notifications/service-worker.js',
          to: 'service-worker.js' // Copia para a raiz do diretório de saída
        }
      ]
    })
  ]
};

Se você estiver usando o Vite, pode usar o plugin vite-plugin-static-copy:

vite.config.js
import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy'


export default defineConfig({
  // ...outras configurações do vite
  plugins: [
    // ...outros plugins
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/web-push-notifications/service-worker.js',
          dest: '' // Copia para a raiz da saída de compilação
        }
      ]
    })
  ]
});

Para outros sistemas de compilação, use seus respectivos mecanismos de cópia de arquivos para garantir que o service worker esteja disponível na raiz do seu site.

Widgets Integrados

Anchor link to

O SDK Web da Pushwoosh vem com quatro widgets de interface do usuário integrados para aprimorar a interação do usuário e simplificar o processo de inscrição. Enquanto o PWSubscriptionPromptWidget é configurado principalmente através do Painel de Controle da Pushwoosh e das configurações do navegador, os outros três widgets (PWSubscriptionButtonWidget, PWSubscribePopupWidget e PWInboxWidget) oferecem opções de configuração detalhadas diretamente no método init do SDK.

Aqui está uma visão geral de cada widget:

  1. Prompt de Inscrição (PWSubscriptionPromptWidget) Este widget é responsável por exibir o prompt nativo do navegador para pedir permissão aos usuários para enviar notificações push. Seu comportamento é amplamente governado pelos padrões do navegador e pelas configurações definidas no seu Painel de Controle da Pushwoosh. Ele não possui parâmetros de configuração específicos na chamada pushwoosh.push(['init', {...}]).

  2. Botão de Inscrição (PWSubscriptionButtonWidget) Este widget adiciona um botão flutuante (geralmente um ícone de sino) ao seu site, permitindo que os usuários se inscrevam ou gerenciem facilmente suas preferências de notificação.

  • Configuração: As configurações para este widget são gerenciadas no objeto subscribeWidget na chamada init.
  • Saiba mais: Botão de Inscrição Push
  1. Popup de Inscrição Personalizado (PWSubscribePopupWidget) Um pop-up personalizável que oferece uma maneira mais envolvente de pedir permissões de notificação antes de mostrar o prompt nativo do navegador.
  1. Widget de Caixa de Entrada (PWInboxWidget) Este widget integra um centro de mensagens no aplicativo, permitindo que os usuários visualizem um histórico de notificações push ricas.

Você pode então inicializar e executar esses widgets como mostrado nos exemplos abaixo:

Importar e Inicializar

Anchor link to
Importar e Inicializar o Pushwoosh
import { Pushwoosh } from 'web-push-notifications';
import { PWSubscriptionPromptWidget } from 'web-push-notifications/widget-subscription-prompt';
import { PWSubscriptionButtonWidget } from 'web-push-notifications/widget-subscription-button';
import { PWSubscribePopupWidget } from 'web-push-notifications/widget-subscribe-popup';
import { PWInboxWidget } from 'web-push-notifications/widget-inbox';


const pushwoosh = new Pushwoosh();


pushwoosh.push(['init', {
  applicationCode: 'XXXXX-XXXXX', // seu Código de Aplicação Pushwoosh
  apiToken: 'XXXXXXX', // Token da API do Dispositivo
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // caminho para o seu service worker copiado


  // Configurações do Popup de Inscrição Personalizado
  subscribePopup: {
    enable: true // Habilitar o popup de inscrição
    // outras opções podem ser adicionadas aqui
  },


  // Configurações do botão de inscrição Push
  subscribeWidget: {
    enable: true // Habilitar o widget do botão de inscrição
    // outras opções podem ser adicionadas aqui
  },


  // Configurações do widget de caixa de entrada
  inboxWidget: {
    enable: true // Habilitar o widget de caixa de entrada
    // outras opções podem ser adicionadas aqui
  }
}]);


pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionPromptWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('Falha na inicialização do PWSubscriptionPromptWidget:', error);
  }
});


pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionButtonWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('Falha na inicialização do PWSubscriptionButtonWidget:', error);
  }
});


pushwoosh.push(async () => {
  try {
    const widget = new PWSubscribePopupWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('Falha na inicialização do PWSubscribePopupWidget:', error);
  }
});


pushwoosh.push(async () => {
  try {
    const widget = new PWInboxWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('Falha na inicialização do PWInboxWidget:', error);
  }
});
Anchor link to

Veja um exemplo de aplicação com React e Vite: https://github.com/Pushwoosh/websdk-npm-vite-react-example