# Web push SDK 3.0
## Integración
[**Ejemplo de integración en GitHub**](https://github.com/Pushwoosh/web-push-notifications-sample)
### 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:
1. Incluya el SDK desde nuestro CDN de forma _asíncrona_.
```txt
```
2. Inicialice el Web Push SDK y asegúrese de poner en cola la inicialización hasta el momento en que el SDK esté completamente cargado.
```html
```
#### Popups web
Añada `webPopups` a su objeto `init` para habilitar las [campañas de popups web](/es/product/messaging-channels/web-popups/#start-working-with-web-popups) en su sitio.
```javascript
webPopups: {
enable: true,
},
```
Las campañas de popups web muestran superposiciones que usted configura en el Panel de Control, como promociones, anuncios o formularios de captura de clientes potenciales. A diferencia del [popup de suscripción personalizado](/es/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/) (`subscribePopup`), que solo gestiona la aceptación de 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 [Entender los popups web](/es/product/messaging-channels/web-popups/).
#### 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](/es/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/) 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:
* [Configuración de Chrome](/es/developer/first-steps/connect-messaging-services/chrome-configuration/)
* [Configuración de Firefox](/es/developer/first-steps/connect-messaging-services/chrome-configuration/)
* [Configuración de Safari](/es/developer/first-steps/connect-messaging-services/safari-configuration/)
## 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 Web SDK 3.0 de Pushwoosh puede suscribirse a ciertos eventos para rastrearlos**,** o darse de baja de eventos si ya no necesita rastrearlos.
Para rastrear la carga del Web SDK 3.0, dispare el evento `onLoad` de la siguiente manera:
```javascript
// Load Event
Pushwoosh.push(['onLoad', (api) => {
console.log('Pushwoosh load!');
}]);
```
Para rastrear la inicialización correcta del Web SDK, dispare el evento `onReady`:
```javascript
// Ready Event
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:
```javascript
Pushwoosh.push(['onLoad', (api) => {
function onEventNameHandler() {
console.log('Triggered event: event-name!');
}
// To subscribe to an event:
Pushwoosh.addEventHandler('event-name', onEventNameHandler)
// To unsubscribe from an event:
Pushwoosh.removeEventHandler('event-name', onEventNameHandler)
}]);
```
### Eventos del SDK
#### Evento de suscripción
Se ejecuta después de que un usuario acepta recibir notificaciones push.
```javascript
Pushwoosh.push(['onLoad', (api) => {
Pushwoosh.addEventHandler('subscribe', (payload) => {
console.log('Triggered event: subscribe');
});
}]);
```
#### Evento de anulación de suscripción
Se ejecuta después de que un dispositivo se da de baja de las notificaciones.
```javascript
Pushwoosh.push(['onLoad', (api) => {
Pushwoosh.addEventHandler('unsubscribe', (payload) => {
console.log('Triggered event: unsubscribe');
});
}]);
```
#### Eventos del widget de suscripción
Rastrea la visualización de un widget de Solicitud de Suscripción.
```javascript
Pushwoosh.push(['onLoad', (api) => {
// Executed on displaying of the Subscription Prompt widget
Pushwoosh.addEventHandler('show-subscription-widget', (payload) => {
console.log('Triggered event: show-subscription-widget');
});
// Executed on hiding of the Subscription Prompt widget
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.
```javascript
Pushwoosh.push(['onLoad', function (api) {
// Executed on permission dialog displaying
Pushwoosh.addEventHandler('show-notification-permission-dialog', (payload) => {
console.log('Triggered event: show-notification-permission-dialog');
});
// Executed on hiding the permission dialog with one of three possible statuses:
// 1. default - the dialog is closed
// 2. granted - permission is granted
// 3. denied - permission is denied
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.
```javascript
Pushwoosh.push(['onLoad', (api) => {
// Executed during the SDK initialization if 'autoSubscribe: false' or/and if a user ignores a push notification prompt.
Pushwoosh.addEventHandler('permission-default', (payload) => {
console.log('Triggered event: permission-default');
});
// Executed during the SDK initialization if notifications are blocked or once a user blocks push notifications.
Pushwoosh.addEventHandler('permission-denied', (payload) => {
console.log('Triggered event: permission-denied');
});
// Executed during the SDK initialization if notifications are allowed or once a user allows push notifications.
Pushwoosh.addEventHandler('permission-granted', (payload) => {
console.log('Triggered event: permission-granted');
});
}]);
```
#### Evento de recepción de push
Rastrea la entrega de una notificación push a un dispositivo.
```javascript
Pushwoosh.push(['onLoad', (api) => {
// Executed when a push notification is displayed.
Pushwoosh.addEventHandler('receive-push', (payload) => {
console.log('Triggered event: receive-push', payload.notification);
});
}]);
```
#### Eventos de notificación
Rastrea si una notificación push es abierta o cerrada por un usuario.
```javascript
Pushwoosh.push(['onLoad', (api) => {
// Executed when a user clicks on notification.
Pushwoosh.addEventHandler('open-notification', (payload) => {
console.log('Triggered event: open-notification', payload.notification);
});
// Executed when a user closes a push notification.
Pushwoosh.addEventHandler('hide-notification', (payload) => {
console.log('Triggered event: hide-notification', payload.notification);
});
}]);
```
#### Eventos de Inbox
Rastrea las notificaciones enviadas al Inbox.
```javascript
Pushwoosh.push(['onLoad', (api) => {
// Executed by ServiceWorker after the Inbox Message is received and saved to indexedDB.
Pushwoosh.addEventHandler('receive-inbox-message', (payload) => {
console.log('Triggered event: receive-inbox-message', payload.message);
});
// Executed after the Inbox is updated automatically while the page is loading.
Pushwoosh.addEventHandler('update-inbox-messages', (payload) => {
console.log('Triggered event: receive-inbox-message', payload.messages);
});
}]);
```
#### Eventos de popup de suscripción personalizado
Para detalles sobre cómo manejar los eventos de popup de suscripción personalizado, consulte la [Guía de Eventos de Popup de Suscripción Personalizado](/es/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/#custom-subscription-popup-events).
## API
Después de que el Web Push SDK se inicialice, puede hacer las siguientes llamadas a la API de Pushwoosh. Todos los métodos devuelven objetos [**Promise**](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise).
```javascript
Pushwoosh.push((api) => {
// Set tags for a user
api.setTags({
'Tag Name 1': 'value1',
'Tag Name 2': 'value2'
});
// Get tags for a user from server
api.getTags();
// Register user ID
api.registerUser('user123');
// Register user email
api.registerEmail('user@example.com');
// Register SMS number
api.registerSmsNumber('+15551234567');
// Register WhatsApp number
api.registerWhatsappNumber('+1234567890');
// Post an Event
api.postEvent('myEventName', {attributeName: 'attributeValue'});
//Unregister from notifications
api.unregisterDevice();
// Set the device language (overrides the value in the "Language" Tag)
api.setLanguage('es');
// Alternatively Multi-register user with devices and channels
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.
```javascript
Pushwoosh.push((api) => {
api.multiRegisterDevice({
user_id: 'user123', // Optional: User identifier
email: 'user@example.com', // Optional: Email for email messaging
sms_phone_number: '+1234567890', // Optional: SMS phone number (E.164 format)
whatsapp_phone_number: '+1234567890', // Optional: WhatsApp number (E.164 format)
kakao_phone_number: '+1234567890', // Optional: KakaoTalk number (E.164 format)
language: 'en', // Optional: Language code (ISO 639-1)
timezone: 'America/New_York', // Optional: Timezone identifier
city: 'New York', // Optional: City for targeting
country: 'US', // Optional: Country for targeting
state: 'NY', // Optional: State for targeting
tags: { // Optional: Tag values with operations
'UserType': {
operation: TTagOperationSet, // Set tag value (0)
value: 'Premium'
},
'Interests': {
operation: TTagOperationAppend, // Append to tag value (1)
values: ['sports', 'technology']
},
'LoginCount': {
operation: TTagOperationIncrement, // Increment tag value (3)
value: '1'
}
},
push_devices: [ // Optional: Array of push devices
{
hwid: 'web-device-456',
platform: TPlatformChrome, // Chrome platform (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 al 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**: Maneja múltiples plataformas simultáneamente
Ejemplo de envío de Tags a Pushwoosh:
```javascript
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 el valor de un Tag
Para **incrementar un valor** de un Tag de tipo Número, utilice el parámetro `operation` con el valor ‘increment’ de la siguiente manera:
```javascript
Pushwoosh.push((api) => {
api.setTags({
'Tag 1': {
operation: 'increment',
value: 1
}
})
});
```
### Añadir valores a un Tag
Para **añadir nuevos valores** al Tag de tipo Lista existente, utilice el parámetro `operation` con el valor ‘append’ de la siguiente manera:
```javascript
Pushwoosh.push((api) => {
api.setTags({
'Tag 3': {
operation: 'append',
value: ['Value3']
}
})
});
```
### Eliminar valor de un Tag
Para **eliminar un valor** de un Tag de tipo Lista, utilice el parámetro `operation` con el valor ‘remove’ de la siguiente manera:
```javascript
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 las notificaciones push:
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 las notificaciones push utilizando el parámetro `autoSubscribe: false` durante la inicialización:
```html
```
**Pushwoosh.unsubscribe()**
1. Se ejecuta el método `/unregisterDevice`.
2. Se activa el evento `onUnsubscribe`.
```html
```
**Pushwoosh.isSubscribed()**
Comprueba si un usuario está suscrito y devuelve un indicador verdadero/falso.
```javascript
Pushwoosh.isSubscribed().then((isSubscribed) => {
console.log('isSubscribed', isSubscribed);
});
```
**Pushwoosh.getHWID()**
Devuelve el HWID de Pushwoosh.
```javascript
Pushwoosh.getHWID().then((hwid) => {
console.log('hwid:', hwid);
});
```
**Pushwoosh.getPushToken()**
Devuelve el token de push si está disponible.
```javascript
Pushwoosh.getPushToken().then((pushToken) => {
console.log('pushToken:', pushToken);
});
```
**Pushwoosh.getUserId()**
Devuelve el [**ID de Usuario**](/es/developer/pushwoosh-knowledge-hub/users-userids/users-userids/) si está disponible.
```javascript
Pushwoosh.getUserId().then((userId) => {
console.log('userId:', userId);
});
```
**Pushwoosh.getParams()**
Devuelve una lista de los siguientes parámetros:
```javascript
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\**
Devuelve el número de mensajes abiertos.
```javascript
Pushwoosh.pwinbox.messagesWithNoActionPerformedCount()
.then((count) => {
console.log(`${count} messages opened`);
});
```
**unreadMessagesCount()**
Devuelve el número de mensajes no leídos.
```javascript
Pushwoosh.pwinbox.unreadMessagesCount()
.then((count) => {
console.log(`${count} messages unread`);
});
```
**messagesCount(): Promise\**
Devuelve el número total de mensajes.
```javascript
Pushwoosh.pwinbox.messagesCount()
.then((count) => {
console.log(`${count} messages`);
});
```
**loadMessages(): Promise\**
Carga la lista de mensajes no eliminados.
```javascript
Pushwoosh.pwinbox.loadMessages()
.then(() => {
console.log('Messages have been loaded');
});
```
**readMessagesWithCodes(codes: Array\): Promise\**
Marca los mensajes como leídos por Inbox\_Ids.
```javascript
Pushwoosh.pwinbox.readMessagesWithCodes(codes)
.then(() => {
console.log('Messages have been read');
});
```
**performActionForMessageWithCode(code: string): Promise\**
Realiza la acción asignada a un mensaje y marca el mensaje como leído.
```javascript
Pushwoosh.pwinbox.performActionForMessageWithCode(code)
.then(() => {
console.log('Action has been performed');
});
```
**deleteMessagesWithCodes(codes: Array\): Promise\**
Marca los mensajes como eliminados.
```javascript
Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
.then(() => {
console.log('Messages have been deleted');
});
```
**syncMessages(): Promise\**
Sincroniza los mensajes con el servidor.
```javascript
Pushwoosh.pwinbox.syncMessages()
.then(() => {
console.log('Messages have been synchronized');
});
```
## Soporte para Aplicaciones Web Progresivas
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:
```javascript
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js') // <- your service worker url
});
}
```
Luego, utilice el parámetro serviceWorkerUrl al inicializar el WebSDK de la siguiente manera:
```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',
serviceWorkerUrl: '/service-worker.js', // <- your service worker url
}]);
```
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](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):
```javascript
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
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 de 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.Copiar
```html
```
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 las notificaciones push utilizando el parámetro `autoSubscribe: false` durante la inicialización:
```html
```
**Pushwoosh.unsubscribe()**
1. Se ejecuta el método `/unregisterDevice`.
2. Se activa el evento `onUnsubscribe`.
```html
```
**Pushwoosh.isSubscribed()**
Comprueba si un usuario está suscrito y devuelve un indicador verdadero/falso.
```javascript
Pushwoosh.isSubscribed().then((isSubscribed) => {
console.log('isSubscribed', isSubscribed);
});
```
**Pushwoosh.getHWID()**
Devuelve el HWID de Pushwoosh.
```javascript
Pushwoosh.getHWID().then((hwid) => {
console.log('hwid:', hwid);
});
```
**Pushwoosh.getPushToken()**
Devuelve el token de push si está disponible.
```javascript
Pushwoosh.getPushToken().then((pushToken) => {
console.log('pushToken:', pushToken);
});
```
**Pushwoosh.getUserId()**
Devuelve el [**ID de Usuario**](/es/developer/pushwoosh-knowledge-hub/users-userids/users-userids/) si está disponible.
```javascript
Pushwoosh.getUserId().then((userId) => {
console.log('userId:', userId);
});
```
**Pushwoosh.getParams()**
Devuelve una lista de los siguientes parámetros:
```javascript
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\