Web push SDK 3.0

Integración

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

Descargue el SDK de Web Push de Pushwoosh si aún no lo ha hecho.

pushwoosh-service-worker.js

También puede descargar el archivo del service worker desde el Control Panel:

Vaya a Configuración → Configurar plataformas → Notificaciones push web.
En la tarjeta Configuración del Web SDK, haga clic en Obtener el código. Consulte Configuración para ver qué más hace esta tarjeta.
Haga clic en Descargar service worker.

El archivo pushwoosh-service-worker.js descargado contiene una sola línea que carga el service worker desde la CDN de Pushwoosh:

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

Cuadro de diálogo del código de integración del Web SDK con el botón Descargar service worker junto a Copiar el código

El botón Obtener el código solo se muestra a los usuarios que pueden gestionar tokens de acceso a la API, porque el mismo cuadro de diálogo genera el snippet de init con un token de Device API. Si no lo ve, use el pushwoosh-service-worker.js del archivo del SDK indicado arriba o pida a su administrador de cuenta permisos de Token de acceso a la API.

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

Inicialice el SDK:

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>

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 se usa si su aplicación tiene la sección Safari Configuration (ver Prerrequisitos arriba)
    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>

Popups web

Las campañas de popups web se cargan por defecto — no se requiere ninguna entrada webPopups en su objeto init. Añada una solo para optar por no participar o cambiar los valores predeterminados:

webPopups: {
  // enable: false, // opcional, para optar por no participar por completo: el paquete nunca se carga
  autoShow: true, // opcional, establézcalo en false para cargar los popups sin mostrarlos automáticamente — vea los métodos de WebPopups a continuación
  colorScheme: 'auto', // opcional, 'auto' (predeterminado) | 'light' | 'dark'
},

Las campañas de popups web muestran contenido que usted configura en el Panel de Control, como promociones, anuncios o formularios de captación de clientes potenciales, sobre la página o, en las campañas Inline, dentro de un elemento de la página. A diferencia del popup de suscripción personalizado (subscribePopup), que solo gestiona la suscripción a notificaciones push web, las campañas de popups web pueden mostrar cualquier contenido que configure. Para la configuración en el Panel de Control, consulte Entendiendo los popups web.

Para detener los popups web en un sitio sin cambiar su snippet, desactívelos en el Control Panel:

Vaya a Configuración → Configurar plataformas → Notificaciones push web y busque la tarjeta Pop-ups web.
Haga clic en Turn off.

La insignia cambia de Set in the snippet a Off. A partir de la siguiente carga de página, en menos de un minuto, el SDK no carga popups aunque el snippet establezca webPopups.enable: true. autoShow y colorScheme se siguen tomando del snippet. Para que el snippet vuelva a decidir, haga clic en Return to snippet en la misma tarjeta.

La tarjeta funciona independientemente del Settings source, pero la versión del SDK que necesita depende de ese origen:

El snippet de init de tu sitio: Web SDK 3.93.1 o posterior. Un SDK más antiguo ignora el interruptor y sigue cargando popups según indique el snippet.
Esta página: Web SDK 3.93.0 o posterior.

colorScheme elige con qué paleta se renderiza un popup con el modo oscuro configurado:

'auto' (predeterminado): sigue el esquema de color a nivel de sistema operativo del visitante (prefers-color-scheme).
'light' o 'dark': siempre renderiza esa paleta, independientemente de la configuración del sistema operativo del visitante.

Un popup sin el modo oscuro configurado en el editor siempre se renderiza en modo claro — colorScheme no tiene efecto sobre él.

Para el control programático, consulte los métodos de WebPopups y los eventos de popups web.

Campañas Inline y formularios web

Las campañas Inline requieren Web SDK 3.97.0 o posterior desde la CDN, o 3.98.0 o posterior desde el paquete npm web-push-notifications. Un SDK más antiguo muestra una campaña Inline como un popup sobre la página. El SDK renderiza una campaña Inline dentro del primer elemento que coincide con el selector CSS de la campaña. Si ningún elemento coincide, la campaña se omite. El SDK no vigila los elementos que se añaden más tarde: una vez que el elemento esté en la página, llame a Pushwoosh.moduleRegistry.webPopups.show('CAMPAIGN_CODE'), que resuelve false si sigue sin haber coincidencia.
Los formularios web requieren Web SDK 3.99.0 o posterior. El SDK valida los campos, envía los valores a Pushwoosh con el código de la campaña que muestra el formulario y abre la página de Éxito del formulario una vez que Pushwoosh los acepta. Un SDK más antiguo muestra el contenido del formulario sin sus campos.
Un formulario web solo se muestra mediante una campaña. show() con el código de un contenido de formulario, y no de una campaña, resuelve false y registra un error en la consola.

El SDK no dispara ningún evento de JavaScript para los envíos de formularios. En su lugar, Pushwoosh los registra como eventos de su proyecto, con el código de la campaña en el atributo form_code:

Evento	Cuándo se registra
`PW_PopupFormSubmit`	Pushwoosh aceptó un envío.
`PW_PopupFormSubmitError`	Pushwoosh rechazó un envío a una campaña activa de este proyecto. Las solicitudes sin código de campaña, o con el código de una campaña inexistente, inactiva o ajena, o de una campaña sin formulario web, se rechazan sin este evento. El atributo `reason` es `invalid_email`, `bounced`, `invalid_fields`, `no_verified_domain`, `tariff` o `server_error`.
`PW_PopupFormConfirm`	Un visitante confirmó el correo electrónico mediante el enlace de doble opt-in.

Aviso de suscripción

Para animar a sus usuarios a suscribirse a las notificaciones push, utilice el widget de suscripción, un aviso y una campana lanzadora que se configuran juntos. Sustituye al antiguo botón de suscripción a notificaciones push y al popup de suscripción personalizado, que siguen funcionando en un sitio que ya los usa, pero no son el punto de partida recomendado para una integración nueva.

Configuración

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:

La misma pantalla de configuración también incluye una tarjeta de Configuración del Web SDK. Su botón Obtener el código también le permite descargar el archivo del service worker.

La tarjeta Configuración del Web SDK te permite establecer autoSubscribe, defaultNotificationTitle, defaultNotificationImage, safariWebsitePushID y subscribeWidget desde el Control Panel en lugar del snippet de init. Su campo Settings source comienza en el snippet de init de tu sitio. Haz clic en Move the settings here para cambiar el origen a esta página. El SDK entonces lee estas cinco claves desde Pushwoosh e ignora las mismas claves en tu objeto init. Mover la configuración es un paso único, no un interruptor que se pueda alternar. En una aplicación que ya está en la plataforma web unificada (donde Safari comparte el mismo controlador que Chrome y Firefox), el Control Panel ya no ofrece una forma de volver al snippet. Revertirlo volvería a registrar cada dispositivo bajo su propia plataforma de navegador y perdería sus etiquetas. La misma página incluye tarjetas para el widget de Web Inbox y los popups web independientemente del Settings source. Mientras el origen sea el snippet de init de tu sitio, estas dos tarjetas son la única configuración que Pushwoosh pasa al SDK. Las tarjetas del widget de suscripción solo aparecen en una aplicación gestionada desde el panel.

Registrar el service worker en un ámbito diferente

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

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, use 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

Evento de suscripción

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 cancelación de suscripción

Se ejecuta después de que un dispositivo se da de baja de las notificaciones.

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

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

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

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' y/o 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

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

Rastrea si un usuario abre o cierra una notificación push.

Pushwoosh.push(['onLoad', (api) => {
  // Se ejecuta cuando un usuario hace clic en una 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 la bandeja de entrada

Rastrea las notificaciones enviadas a la Bandeja de entrada.

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

  // Se ejecuta después de que la Bandeja de entrada 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);
  });
}]);

Para obtener detalles sobre el manejo de eventos del popup de suscripción personalizado, consulte la Guía de Eventos del Popup de Suscripción Personalizado.

Eventos de popups web

Pushwoosh.push(['onLoad', (api) => {
  // Se ejecuta una vez que los popups web se han cargado y la tubería de visualización automática se ha ejecutado para la página actual
  Pushwoosh.addEventHandler('web-popups-ready', () => {
    console.log('Triggered event: web-popups-ready');
  });

  // Se ejecuta cuando se muestra un popup web, ya sea automáticamente o a través de webPopups.show()
  Pushwoosh.addEventHandler('show-web-popup', (payload) => {
    console.log('Triggered event: show-web-popup', payload.code, payload.trigger); // trigger: 'auto' | 'api'
  });

  // Se ejecuta cuando se oculta un popup web
  Pushwoosh.addEventHandler('hide-web-popup', (payload) => {
    console.log('Triggered event: hide-web-popup', payload.code, payload.reason); // reason: 'user' | 'api' | 'preempted'
  });
}]);

API

Después de que se inicializa el SDK de Web Push, 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 de 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();

  // Establecer el idioma del dispositivo (sobrescribe el valor en el Tag "Language")
  api.setLanguage('es');

  // Alternativamente, Multi-registro 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

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 correo electrónico
    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,  // Anexar 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): Safari en la ruta del Website Push ID de Apple. Esto incluye:
- Safari en macOS 12 y versiones anteriores.
- Cualquier Safari que ya tenga una suscripción a través del Website Push ID. Los suscriptores existentes no se migran a 11.
- Un nuevo suscriptor de Safari en una aplicación sin las claves de web push de Configurar notificaciones push web para todos los navegadores (excepto versiones antiguas de Safari), a menos que la aplicación esté en la plataforma web unificada.
Un nuevo suscriptor de Safari en macOS Ventura y versiones posteriores se registra como TPlatformChrome (11) a través del service worker cuando la aplicación tiene estas claves de web push o está en la plataforma web unificada.
TPlatformChrome (11): Plataforma Chrome
TPlatformFirefox (12): Plataforma Firefox

Tipos de Operación de Tag:

TTagOperationSet (0): Establecer valor de tag (reemplazar valor existente)
TTagOperationAppend (1): Anexar a valor de tag (añadir a la lista)
TTagOperationRemove (2): Eliminar valor de tag (eliminar 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: Soporta 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

Para incrementar un valor de un Tag de tipo Número, use el parámetro operation con el valor ‘increment’ de la siguiente manera:

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

Anexar valores de Tag

Para anexar nuevos valores al Tag de tipo Lista existente, use 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

Para eliminar un valor de un Tag de tipo Lista, use 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

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 el 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()

Se ejecuta el método /unregisterDevice.
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

messagesWithNoActionPerformedCount(): Promise<number>

Devuelve el número de mensajes abiertos.

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

unreadMessagesCount()

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

Pushwoosh.pwinbox.unreadMessagesCount()
  .then((count) => {
    console.log(`${count} messages unread`);
  });

messagesCount(): Promise<number>

Devuelve el número total de mensajes.

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

loadMessages(): Promise<Array>

Carga la lista de mensajes no eliminados.

Pushwoosh.pwinbox.loadMessages()
  .then(() => {
    console.log('Messages have been loaded');
  });

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

Marca los mensajes como leídos por Inbox_Ids.

Pushwoosh.pwinbox.readMessagesWithCodes(codes)
  .then(() => {
    console.log('Messages have been read');
  });

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('Action has been performed');
  });

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

Marca los mensajes como eliminados.

Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
  .then(() => {
    console.log('Messages have been deleted');
  });

syncMessages(): Promise<void>

Sincroniza los mensajes con el servidor.

Pushwoosh.pwinbox.syncMessages()
  .then(() => {
    console.log('Messages have been synchronized');
  });

Métodos de WebPopups

La API programática de popups web está disponible siempre que el widget esté cargado, que es el comportamiento predeterminado (ver arriba). Acceda a ella a través de Pushwoosh.moduleRegistry.webPopups una vez que se haya disparado el evento web-popups-ready.

show(code: string): Promise<boolean>

Muestra un popup inmediatamente, omitiendo todas las condiciones de visualización (retraso, reglas de página, tipo de dispositivo/visitante, limitación de frecuencia, tipo de disparador). En una campaña Popup, cierra un popup ya visible para hacer espacio. Una campaña Inline, en cambio, se renderiza en su elemento de la página, deja abierto el popup visible y no impide que se muestren otros popups. Resuelve a false en lugar de rechazar cuando el popup no se puede mostrar. Para una campaña Inline y un formulario web, consulte Campañas Inline y formularios web.

Pushwoosh.moduleRegistry.webPopups.show('popup_code')
  .then((shown) => console.log('Popup shown:', shown));

hide(code?: string): boolean

Oculta el popup visible. Si se pasa code, solo lo oculta cuando coincide con el popup visible. Devuelve false si no se ocultó nada.

Pushwoosh.moduleRegistry.webPopups.hide();

hideAll(): boolean

Oculta el popup visible y descarta todo lo que aún esté pendiente para la carga de la página actual. show() sigue funcionando después.

Pushwoosh.moduleRegistry.webPopups.hideAll();

isVisible(code?: string): boolean

Comprueba si un popup está visible actualmente. Sin code, comprueba si algún popup está visible.

Pushwoosh.moduleRegistry.webPopups.isVisible('popup_code');

getVisibleCode(): string | null

Devuelve el código del popup actualmente en pantalla, o null si no hay ninguno visible.

Pushwoosh.moduleRegistry.webPopups.getVisibleCode();

getAvailableCodes(): Array<string>

Devuelve los códigos de todos los popups que el servidor devolvió para este dispositivo.

Pushwoosh.moduleRegistry.webPopups.getAvailableCodes();

getState(): object

Devuelve una instantánea del estado del popup web: visible (código en pantalla, o null), queued (códigos esperando el espacio de visualización), waiting (códigos con un temporizador de retraso activado) y available (todos los códigos que el servidor devolvió).

Pushwoosh.moduleRegistry.webPopups.getState();

Soporte para Progressive Web App

Para integrar Pushwoosh en su Progressive Web Application (PWA), siga los pasos que se describen a continuación. Para usuarios de iPhone y iPad, consulte también Web push en iPhone y iPad.

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, use el parámetro serviceWorkerUrl mientras inicializa 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. Agregue 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 notificaciones push enviadas a través de los servicios de Pushwoosh para su Service Worker.

Instalación desde Google Tag Manager

Use 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 la captura de pantalla a continuación.Copiar

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