Saltar al contenido
Guías de usuarioSoporte Solicitar demo Iniciar sesión
Pushwoosh.com

SDK de Web Push 3.0

Integración

Anchor link to

Ejemplo de integración en GitHub

Obtenga el SDK de Web Push de Pushwoosh y descomprímalo. Debería tener los siguientes archivos:

Anchor link to
  • pushwoosh-service-worker.js

Coloque todos estos archivos en el directorio raíz de nivel superior de su sitio web.

Anchor link to

Inicialice el SDK:

Anchor link to
  1. Incluya el SDK desde nuestro CDN de forma asíncrona.
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
  1. Inicialice el SDK de Web Push y asegúrese de poner en cola la inicialización hasta el momento en que el SDK esté completamente cargado.
<script type="text/javascript">
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
    logLevel: 'info', // valores posibles: error, info, debug
    applicationCode: 'XXXXX-XXXXX', // el código de su aplicación desde el Panel de Control de Pushwoosh
    apiToken: 'XXXXXXX', // Token de API de dispositivo
    safariWebsitePushID: 'web.com.example.domain', // cadena de dominio inverso única, obtenida en su Portal de Desarrolladores de Apple. Solo es necesario si envía notificaciones push al navegador Safari
    defaultNotificationTitle: 'Pushwoosh', // establece un título predeterminado para las notificaciones push
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // URL a la imagen de notificación personalizada
    autoSubscribe: false, // o true. Si es true, solicita al usuario que se suscriba a los pushes al inicializar el SDK
    subscribeWidget: {
      enable: true
    },
    userId: 'user_id', // opcional, establezca un ID de usuario personalizado
    tags: {
        'Name': 'John Smith'     // opcional, establezca Tags personalizados
    }
}]);
</script>

Configuración

Anchor link to

Para terminar de implementar las notificaciones push en su sitio web, necesita configurar las plataformas web en su Panel de Control de Pushwoosh siguiendo nuestras guías paso a paso:

Registrar el service worker en un ámbito diferente

Anchor link to

A veces no se puede colocar el archivo del service worker en un directorio raíz de un sitio web, sino en un subdirectorio.

En este caso, modifique la configuración (paso 4.3) añadiendo un parámetro

serviceWorkerUrl: “/push-notifications/pushwoosh-service-worker.js”

donde /push-notifications/pushwoosh-service-worker.js es la ruta al archivo pushwoosh-service-worker.js.

Manejadores de eventos

Anchor link to

En el SDK Web de Pushwoosh 3.0 puede suscribirse a ciertos eventos para rastrearlos**,** o darse de baja de eventos si ya no necesita rastrearlos.

Para rastrear la carga del SDK Web 3.0, dispare el evento onLoad de la siguiente manera:

// Evento de carga
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh load!');
}]);

Para rastrear la inicialización correcta del SDK Web, dispare el evento onReady:

// Evento de listo
Pushwoosh.push((api) => {
  console.log('Pushwoosh ready!');
});

Para suscribirse o darse de baja de cualquiera de los eventos del SDK, utilice los manejadores después de la carga del SDK:

Pushwoosh.push(['onLoad', (api) => {
  function onEventNameHandler() {
    console.log('Triggered event: event-name!');
  }


  // Para suscribirse a un evento:
  Pushwoosh.addEventHandler('event-name', onEventNameHandler)


  // Para darse de baja de un evento:
  Pushwoosh.removeEventHandler('event-name', onEventNameHandler)
}]);

Eventos del SDK

Anchor link to

Evento de suscripción

Anchor link to

Se ejecuta después de que un usuario acepta recibir notificaciones push.

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('subscribe', (payload) => {
    console.log('Triggered event: subscribe');
  });
}]);

Evento de anulación de suscripción

Anchor link to

Se ejecuta después de que un dispositivo es dado de baja de las notificaciones.

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('unsubscribe', (payload) => {
    console.log('Triggered event: unsubscribe');
  });
}]);

Eventos del widget de suscripción

Anchor link to

Rastrea la visualización de un widget de Solicitud de Suscripción.

Pushwoosh.push(['onLoad', (api) => {
  // Se ejecuta al mostrar el widget de Solicitud de Suscripción
  Pushwoosh.addEventHandler('show-subscription-widget', (payload) => {
    console.log('Triggered event: show-subscription-widget');
  });


  // Se ejecuta al ocultar el widget de Solicitud de Suscripción
  Pushwoosh.addEventHandler('hide-subscription-widget', (payload) => {
    console.log('Triggered event: hide-subscription-widget');
  });
}]);

Eventos del diálogo de permiso de notificación

Anchor link to

Rastrea la visualización del diálogo de suscripción nativo.

Pushwoosh.push(['onLoad', function (api) {
  // Se ejecuta al mostrar el diálogo de permiso
  Pushwoosh.addEventHandler('show-notification-permission-dialog', (payload) => {
    console.log('Triggered event: show-notification-permission-dialog');
  });


  // Se ejecuta al ocultar el diálogo de permiso con uno de los tres estados posibles:
  // 1. default - el diálogo se cierra
  // 2. granted - se concede el permiso
  // 3. denied - se deniega el permiso
  Pushwoosh.addEventHandler('hide-notification-permission-dialog', (payload) => {
    console.log('Triggered event: hide-notification-permission-dialog', payload.permission);
  });
}]);

Eventos de permiso

Anchor link to

Comprueba el estado del permiso de notificaciones push en la inicialización del SDK; rastrea la actualización de este estado cada vez que tiene lugar.

Pushwoosh.push(['onLoad', (api) => {
  // Se ejecuta durante la inicialización del SDK si 'autoSubscribe: false' o/y si un usuario ignora una solicitud de notificación push.
  Pushwoosh.addEventHandler('permission-default', (payload) => {
    console.log('Triggered event: permission-default');
  });


  // Se ejecuta durante la inicialización del SDK si las notificaciones están bloqueadas o una vez que un usuario bloquea las notificaciones push.
  Pushwoosh.addEventHandler('permission-denied', (payload) => {
    console.log('Triggered event: permission-denied');
  });


  // Se ejecuta durante la inicialización del SDK si las notificaciones están permitidas o una vez que un usuario permite las notificaciones push.
  Pushwoosh.addEventHandler('permission-granted', (payload) => {
    console.log('Triggered event: permission-granted');
  });
}]);

Evento de recepción de push

Anchor link to

Rastrea la entrega de push a un dispositivo.

Pushwoosh.push(['onLoad', (api) => {
  // Se ejecuta cuando se muestra una notificación push.
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('Triggered event: receive-push', payload.notification);
  });
}]);

Eventos de notificación

Anchor link to

Rastrea si una notificación push es abierta o cerrada por un usuario.

Pushwoosh.push(['onLoad', (api) => {
  // Se ejecuta cuando un usuario hace clic en la notificación.
  Pushwoosh.addEventHandler('open-notification', (payload) => {
    console.log('Triggered event: open-notification', payload.notification);
  });


  // Se ejecuta cuando un usuario cierra una notificación push.
  Pushwoosh.addEventHandler('hide-notification', (payload) => {
    console.log('Triggered event: hide-notification', payload.notification);
  });
}]);

Eventos de Inbox

Anchor link to

Rastrea las notificaciones enviadas a Inbox.

Pushwoosh.push(['onLoad', (api) => {
  // Ejecutado por ServiceWorker después de que el Mensaje de Inbox es recibido y guardado en indexedDB.
  Pushwoosh.addEventHandler('receive-inbox-message', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.message);
  });


  // Ejecutado después de que el Inbox se actualiza automáticamente mientras la página se está cargando.
  Pushwoosh.addEventHandler('update-inbox-messages', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.messages);
  });
}]);

Eventos de ventana emergente de suscripción personalizada

Anchor link to

Para obtener detalles sobre cómo manejar los eventos de la ventana emergente de suscripción personalizada, consulte la Guía de Eventos de la Ventana Emergente de Suscripción Personalizada.

API

Anchor link to

Después de que el SDK de Web Push se inicialice, puede realizar las siguientes llamadas a la API de Pushwoosh. Todos los métodos devuelven objetos Promise.

Pushwoosh.push((api) => {
  // Establecer tags para un usuario
  api.setTags({
    'Tag Name 1': 'value1',
    'Tag Name 2': 'value2'
  });


  // Obtener tags para un usuario desde el servidor
  api.getTags();


  // Registrar ID de usuario
  api.registerUser('user123');


    // Registrar correo electrónico del usuario
  api.registerEmail('user@example.com');


  // Registrar número de SMS
  api.registerSmsNumber('+15551234567');


  // Registrar número de WhatsApp
  api.registerWhatsappNumber('+1234567890');


  // Publicar un Evento
  api.postEvent('myEventName', {attributeName: 'attributeValue'});


  //Darse de baja de las notificaciones
  api.unregisterDevice();


  // Alternativamente, multiregistro de usuario con dispositivos y canales
  api.multiRegisterDevice({
    user_id: 'user123',
    email: 'user@example.com',
    sms_phone_number: '+1234567890',
    tags: {
      'UserType': { operation: TTagOperationSet, value: 'Premium' },
      'Interests': { operation: TTagOperationAppend, values: ['sports', 'technology'] }
    }
  });
});

multiRegisterDevice

Anchor link to

Método de registro mejorado que permite registrar un perfil de usuario con múltiples dispositivos y canales de mensajería en una sola llamada a la API. Este método es particularmente útil para aplicaciones multiplataforma o al implementar estrategias de mensajería omnicanal.

Pushwoosh.push((api) => {
  api.multiRegisterDevice({
    user_id: 'user123',              // Opcional: Identificador de usuario
    email: 'user@example.com',       // Opcional: Correo electrónico para mensajería por email
    sms_phone_number: '+1234567890', // Opcional: Número de teléfono SMS (formato E.164)
    whatsapp_phone_number: '+1234567890', // Opcional: Número de WhatsApp (formato E.164)
    kakao_phone_number: '+1234567890',    // Opcional: Número de KakaoTalk (formato E.164)
    language: 'en',                  // Opcional: Código de idioma (ISO 639-1)
    timezone: 'America/New_York',    // Opcional: Identificador de zona horaria
    city: 'New York',               // Opcional: Ciudad para segmentación
    country: 'US',                  // Opcional: País para segmentación
    state: 'NY',                    // Opcional: Estado para segmentación
    tags: {                         // Opcional: Valores de tag con operaciones
      'UserType': {
        operation: TTagOperationSet,     // Establecer valor de tag (0)
        value: 'Premium'
      },
      'Interests': {
        operation: TTagOperationAppend,  // Añadir a valor de tag (1)
        values: ['sports', 'technology']
      },
      'LoginCount': {
        operation: TTagOperationIncrement, // Incrementar valor de tag (3)
        value: '1'
      }
    },
    push_devices: [                 // Opcional: Array de dispositivos push
      {
        hwid: 'web-device-456',
        platform: TPlatformChrome, // Plataforma Chrome (11)
        push_token: 'fcm-token-here',
        app_version: '2.1.0',
        platformData: {
          public_key: 'web-push-public-key',
          auth_token: 'web-push-auth-token',
          browser: 'chrome'
        }
      }
    ]
  })
  .then((response) => {
    console.log('Multi-registration successful:', response);
  })
  .catch((error) => {
    console.error('Multi-registration failed:', error);
  });
});

Tipos de Plataforma:

  • TPlatformSafari (10): Plataforma Safari
  • TPlatformChrome (11): Plataforma Chrome
  • TPlatformFirefox (12): Plataforma Firefox

Tipos de Operación de Tag:

  • TTagOperationSet (0): Establecer valor de tag (reemplaza el valor existente)
  • TTagOperationAppend (1): Añadir a valor de tag (añade a la lista)
  • TTagOperationRemove (2): Eliminar valor de tag (elimina de la lista)
  • TTagOperationIncrement (3): Incrementar valor de tag (incremento numérico)

Beneficios:

  • Llamada única a la API: Registre múltiples dispositivos y canales a la vez
  • Operación atómica: Todos los registros tienen éxito o fallan juntos
  • Centrado en el usuario: Asocia todos los dispositivos con un único perfil de usuario
  • Etiquetado avanzado: Admite operaciones complejas de tags
  • Multiplataforma: Maneje múltiples plataformas simultáneamente

Ejemplo de envío de Tags a Pushwoosh:

Pushwoosh.push((api) => {
  var myCustomTags = {
    'Tag 1': 123,
    'Tag 2': 'some string'
  };
  api.setTags(myCustomTags)
    .then((res) => {
      var skipped = res && res.skipped || [];
      if (!skipped.length) {
        console.log('success');
      }
      else {
        console.warn('skipped tags:', skipped);
      }
    })
    .catch((err) => {
      console.error('setTags error:', err);
    });
});

Incrementar valor de Tag

Anchor link to

Para incrementar un valor de un Tag numérico, utilice el parámetro operation con el valor ‘increment’ de la siguiente manera:

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 1': {
      operation: 'increment',
      value: 1
    }
  })
});

Añadir valores de Tag

Anchor link to

Para añadir nuevos valores al Tag de Lista existente, utilice el parámetro operation con el valor ‘append’ de la siguiente manera:

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 3': {
      operation: 'append',
      value: ['Value3']
    }
  })
});

Eliminar valor de Tag

Anchor link to

Para eliminar un valor de un Tag de Lista, utilice el parámetro operation con el valor ‘remove’ de la siguiente manera:

Pushwoosh.push((api) =>{
  api.setTags({
    'Tag 3': {
      operation: 'remove',
      value: ['Value2']
    }
  })
});

Métodos públicos

Anchor link to

Pushwoosh.subscribe()

Este método se utiliza para solicitar el permiso de un usuario para las notificaciones push. Si un usuario ya está suscrito, el método dejará de ejecutarse.

Si un usuario aún no se ha suscrito a los pushes:

1. Se solicita permiso para las notificaciones push.

2. Si un usuario permite las notificaciones, se activa el evento onSubscribe.

Pushwoosh.subscribe() se ejecuta automáticamente si se establece autoSubscribe: true. durante la inicialización del SDK.

Llame a este método si ha elegido solicitar manualmente a un usuario que se suscriba a los pushes utilizando el parámetro autoSubscribe: false durante la inicialización:

<button onclick="Pushwoosh.subscribe()">Suscribirse</button>
<script>
  Pushwoosh.push(['onSubscribe', (api) => {
    console.log('User successfully subscribed');
  }]);
</script>

Pushwoosh.unsubscribe()

  1. Se ejecuta el método /unregisterDevice.
  2. Se activa el evento onUnsubscribe.
<button onclick="Pushwoosh.unsubscribe()">Darse de baja</button>
<script type="text/javascript">
  Pushwoosh.push(['onUnsubscribe', (api) => {
    console.log('User successfully unsubscribed');
  }]);
</script>

Pushwoosh.isSubscribed()

Comprueba si un usuario está suscrito y devuelve un indicador verdadero/falso.

Pushwoosh.isSubscribed().then((isSubscribed) => {
  console.log('isSubscribed', isSubscribed);
});

Pushwoosh.getHWID()

Devuelve el HWID de Pushwoosh.

Pushwoosh.getHWID().then((hwid) => {
  console.log('hwid:', hwid);
});

Pushwoosh.getPushToken()

Devuelve el token de push si está disponible.

Pushwoosh.getPushToken().then((pushToken) => {
  console.log('pushToken:', pushToken);
});

Pushwoosh.getUserId()

Devuelve el ID de Usuario si está disponible.

Pushwoosh.getUserId().then((userId) => {
  console.log('userId:', userId);
});

Pushwoosh.getParams()

Devuelve una lista de los siguientes parámetros:

Pushwoosh.getParams().then((params) => {
  params = params || {};
  var hwid = params.hwid;
  var pushToken = params.pushToken;
  var userId = params.userId;
});

Pushwoosh.isAvailableNotifications()

Comprueba si un navegador es compatible con el WebSDK 3.0 de Pushwoosh, devuelve ‘true’ o ‘false’.

Pushwoosh.isAvailableNotifications() // true/false

Métodos de InboxMessages

Anchor link to

messagesWithNoActionPerformedCount(): Promise<number>

Devuelve el número de mensajes abiertos.

Pushwoosh.pwinbox.messagesWithNoActionPerformedCount()
  .then((count) => {
    console.log(`${count} mensajes abiertos`);
  });

unreadMessagesCount()

Devuelve el número de mensajes no leídos.

Pushwoosh.pwinbox.unreadMessagesCount()
  .then((count) => {
    console.log(`${count} mensajes no leídos`);
  });

messagesCount(): Promise<number>

Devuelve el número total de mensajes.

Pushwoosh.pwinbox.messagesCount()
  .then((count) => {
    console.log(`${count} mensajes`);
  });

loadMessages(): Promise<Array>

Carga la lista de mensajes no eliminados.

Pushwoosh.pwinbox.loadMessages()
  .then(() => {
    console.log('Los mensajes han sido cargados');
  });

readMessagesWithCodes(codes: Array<string>): Promise<void>

Marca los mensajes como leídos por Inbox_Ids.

Pushwoosh.pwinbox.readMessagesWithCodes(codes)
  .then(() => {
    console.log('Los mensajes han sido leídos');
  });

performActionForMessageWithCode(code: string): Promise<void>

Realiza la acción asignada a un mensaje y marca el mensaje como leído.

Pushwoosh.pwinbox.performActionForMessageWithCode(code)
  .then(() => {
    console.log('La acción ha sido realizada');
  });

deleteMessagesWithCodes(codes: Array<string>): Promise<void>

Marca los mensajes como eliminados.

Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
  .then(() => {
    console.log('Los mensajes han sido eliminados');
  });

syncMessages(): Promise<void>

Sincroniza los mensajes con el servidor.

Pushwoosh.pwinbox.syncMessages()
  .then(() => {
    console.log('Los mensajes han sido sincronizados');
  });

Soporte para Progressive Web App

Anchor link to

Para integrar Pushwoosh en su Aplicación Web Progresiva (PWA), siga los pasos que se describen a continuación.

1. Copie la ruta a su archivo de Service Worker:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') // <- la url de su service worker
  });
}

Luego, utilice el parámetro serviceWorkerUrl al inicializar el WebSDK de la siguiente manera:

var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
  logLevel: 'error',
  applicationCode: 'XXXXX-XXXXX',
  safariWebsitePushID: 'web.com.example.domain',
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // <- la url de su service worker
}]);

El WebSDK no registra el nuevo Service Worker inmediatamente; un Service Worker se registra cuando es necesario:

  • cuando un dispositivo recibe un token de push (en el registro del dispositivo o en la re-suscripción),
  • cuando se elimina un token de push (al eliminar un dispositivo de la base de usuarios).

Esto acelera la carga de sus páginas al reducir el número de solicitudes al servidor.

Los navegadores no permiten que dos Service Workers diferentes se registren al mismo tiempo (lea más: https://github.com/w3c/ServiceWorker/issues/921), por lo que para que su PWA funcione correctamente, se debe registrar un Service Worker común para su base de código y la base de código de Pushwoosh.

2. Añada la siguiente cadena a su Service Worker (al principio o al final, no importa):

importScripts('https://cdn.pushwoosh.com/webpush/v3/pushwoosh-service-worker.js' + self.location.search);

Así habilita la recepción y el procesamiento de las notificaciones push enviadas a través de los servicios de Pushwoosh para su Service Worker.

Instalación desde Google Tag Manager

Anchor link to

Utilice el siguiente código en su Google Tag Manager para inicializar el SDK de Pushwoosh. Cree una Etiqueta HTML Personalizada y pegue el código a continuación. Asegúrese de cambiar su Código de Aplicación de Pushwoosh, el ID del Sitio Web de Safari y la URL de la imagen de notificación predeterminada.
También establezca una prioridad alta de Activación de Etiqueta (ej: 100) y actívela en Todas las páginas. Vea a continuación una captura de pantalla.

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script type="text/javascript">
  var Pushwoosh = Pushwoosh || [];
  Pushwoosh.push(['init', {
    logLevel: 'error',
    applicationCode: 'XXXXX-XXXXX',
    safariWebsitePushID: 'web.com.example.domain',
    defaultNotificationTitle: 'Pushwoosh',
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
    autoSubscribe: true,
    subscribeWidget: {
      enable: false
    },
    userId: 'user_id'
  }]);
</script>