# Uso con npm

## Instalación del SDK de Push Web de Pushwoosh a través de npm

A continuación se explica cómo instalar y usar el SDK de Notificaciones Push Web de Pushwoosh en su proyecto usando npm.
Esta guía asume que tiene un conocimiento básico de npm y de las importaciones de módulos de JavaScript.

### Instalar el SDK:

```bash title="Instalar el SDK de Notificaciones Push Web de Pushwoosh"
npm install web-push-notifications
```

<Aside type="caution" title="Nota importante sobre el versionado del SDK (v3.45.0+)">
  A partir de la versión **3.45.0**, el SDK Web de Pushwoosh introdujo un enfoque modular para importar el SDK principal y sus widgets de interfaz de usuario.

  - **Importaciones separadas:** Ahora necesita importar la clase principal `Pushwoosh` y cualquier widget deseado (como `PWSubscriptionButtonWidget`, `PWSubscribePopupWidget`, etc.) por separado. Antes de esta versión, todos los componentes se incluían normalmente en una sola importación.
  - **Compilación a ES2020:** A partir de esta versión, el SDK se compila según la especificación de JavaScript ES2020. Por favor, asegúrese de que su entorno de compilación y los navegadores de destino soporten las características de ES2020.
</Aside>

### Configuración del Service Worker

Al usar el SDK a través de npm, el archivo del service worker se encuentra en:

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

**Importante:** Durante su proceso de compilación o despliegue, debe copiar este archivo de service worker a la raíz de su sitio web. Esto es crucial para que las notificaciones push funcionen correctamente.

Por ejemplo, en un proyecto de webpack, puede usar `copy-webpack-plugin`:

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

module.exports = {
  // ...otra configuración de webpack
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/web-push-notifications/service-worker.js',
          to: 'service-worker.js' // Copia a la raíz del directorio de salida
        }
      ]
    })
  ]
};
```

Si está usando Vite, puede usar el plugin `vite-plugin-static-copy`:


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

export default defineConfig({
  // ...otra configuración de vite
  plugins: [
    // ...otros plugins
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/web-push-notifications/service-worker.js',
          dest: '' // Copia a la raíz de la salida de compilación
        }
      ]
    })
  ]
});
```
Para otros sistemas de compilación, utilice sus respectivos mecanismos de copia de archivos para asegurarse de que el service worker esté disponible en la raíz de su sitio web.

### Widgets incorporados

El SDK Web de Pushwoosh viene con cuatro widgets de interfaz de usuario incorporados para mejorar la interacción del usuario y agilizar el proceso de suscripción. Mientras que el `PWSubscriptionPromptWidget` se configura principalmente a través del Panel de Control de Pushwoosh y la configuración del navegador, los otros tres widgets (`PWSubscriptionButtonWidget`, `PWSubscribePopupWidget` y `PWInboxWidget`) ofrecen opciones de configuración detalladas directamente en el método `init` del SDK.

Aquí hay un resumen de cada widget:

1.  **Aviso de suscripción (`PWSubscriptionPromptWidget`)**
Este widget es responsable de mostrar el aviso nativo del navegador para pedir a los usuarios permiso para enviar notificaciones push. Su comportamiento se rige en gran medida por los estándares del navegador y la configuración establecida en su Panel de Control de Pushwoosh. No tiene parámetros de configuración específicos dentro de la llamada `pushwoosh.push(['init', {...}])`.

2.  **Botón de suscripción (`PWSubscriptionButtonWidget`)**
Este widget añade un botón flotante (a menudo un icono de campana) a su sitio, permitiendo a los usuarios suscribirse o gestionar fácilmente sus preferencias de notificación.
*   **Configuración:** Los ajustes para este widget se gestionan bajo el objeto `subscribeWidget` en la llamada `init`.
*   **Más información:** [Botón de suscripción Push](/es/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/)

3.  **Popup de suscripción personalizado (`PWSubscribePopupWidget`)**
Un pop-up personalizable que proporciona una forma más atractiva de solicitar permisos de notificación antes de mostrar el aviso nativo del navegador.
*   **Configuración:** Personalice su apariencia y comportamiento usando el objeto `subscribePopup` en la llamada `init`.
*   **Más información:** [Popup de suscripción personalizado](/es/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/)

4.  **Widget de bandeja de entrada (`PWInboxWidget`)**
Este widget integra un centro de mensajes en la aplicación, permitiendo a los usuarios ver un historial de notificaciones push enriquecidas.
*   **Configuración:** Gestionado a través del objeto `inboxWidget` en la llamada `init`.
*   **Más información:** [Widget de bandeja de entrada web](/es/developer/pushwoosh-sdk/web-push-notifications/web-inbox-widget/)

Luego puede inicializar y ejecutar estos widgets como se muestra en los ejemplos a continuación:

### Importar e inicializar

```javascript title="Importar e inicializar 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', // su Código de Aplicación de Pushwoosh
  apiToken: 'XXXXXXX', // Token de API del dispositivo
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // ruta a su service worker copiado

  // Configuración del Popup de suscripción personalizado
  subscribePopup: {
    enable: true // Habilitar el popup de suscripción
    // otras opciones se pueden añadir aquí
  },

  // Configuración del botón de suscripción Push
  subscribeWidget: {
    enable: true // Habilitar el widget del botón de suscripción
    // otras opciones se pueden añadir aquí
  },

  // Configuración del widget de bandeja de entrada
  inboxWidget: {
    enable: true // Habilitar el widget de bandeja de entrada
    // otras opciones se pueden añadir aquí
  }
}]);

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionPromptWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('La inicialización de PWSubscriptionPromptWidget falló:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionButtonWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('La inicialización de PWSubscriptionButtonWidget falló:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscribePopupWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('La inicialización de PWSubscribePopupWidget falló:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWInboxWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('La inicialización de PWInboxWidget falló:', error);
  }
});
```

## Enlaces

Vea una aplicación de ejemplo con React y Vite: https://github.com/Pushwoosh/websdk-npm-vite-react-example