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:

Instalar el SDK de Notificaciones Push Web de Pushwoosh

npm install web-push-notifications

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.

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:

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:

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

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

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

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

Importar e inicializar

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