Web push SDK 3.0

Integración

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

pushwoosh-service-worker.js

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 superposiciones que usted configura en el Panel de Control, como promociones, anuncios o formularios de captación de clientes potenciales. 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.

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.

Botón de suscripción a notificaciones push

Para animar a sus usuarios a suscribirse a las notificaciones push, recomendamos implementar un botón de suscripción a notificaciones push en su sitio web. ¡Mejore la experiencia del usuario y consiga más suscriptores!

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.

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.

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): Plataforma Safari. Las aplicaciones sin la sección Configuración de Safari registran los dispositivos Safari como TPlatformChrome (11).
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). Cierra un popup ya visible para hacer espacio. Resuelve a false en lugar de rechazar cuando el popup no se puede mostrar.

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.

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>