# Uso com npm

## Instalando o SDK Web Push da Pushwoosh via npm

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:

```bash title="Instalar o SDK de Notificações Push Web da Pushwoosh"
npm install web-push-notifications
```

<Aside type="caution" title="Nota Importante sobre o Versionamento do SDK (v3.45.0+)">
  A partir da versão **3.45.0**, o SDK Web da Pushwoosh introduziu uma abordagem modular para importar o SDK principal e seus widgets de interface do usuário.

  - **Importações Separadas:** Agora você precisa importar a classe principal `Pushwoosh` e quaisquer widgets desejados (como `PWSubscriptionButtonWidget`, `PWSubscribePopupWidget`, etc.) separadamente. Antes desta versão, todos os componentes eram normalmente agrupados em uma única importação.
  - **Compilação ES2020:** O SDK é compilado para a especificação JavaScript ES2020 a partir desta versão. Certifique-se de que seu ambiente de compilação e navegadores de destino suportem os recursos do ES2020.
</Aside>

### Configuração do Service Worker

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`:

```javascript
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`:


```javascript
// 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

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](/pt/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/)

3.  **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.
*   **Configuração:** Personalize sua aparência e comportamento usando o objeto `subscribePopup` na chamada `init`.
*   **Saiba mais:** [Popup de Inscrição Personalizado](/pt/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/)

4.  **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.
*   **Configuração:** Gerenciado através do objeto `inboxWidget` na chamada `init`.
*   **Saiba mais:** [Widget de Caixa de Entrada Web](/pt/developer/pushwoosh-sdk/web-push-notifications/web-inbox-widget/)

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

### Importar e Inicializar

```javascript title="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);
  }
});
```

## Links

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