# Configurar la bandeja de entrada de mensajes web

#### Prerrequisitos

Asegúrate de haber implementado el SDK Web de Pushwoosh en tu sitio web. Para hacerlo, sigue nuestra [guía](/es/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).


**La Bandeja de Entrada de Mensajes para sitios web** te permite almacenar notificaciones push web para que los usuarios puedan volver a verlas más tarde, asegurando que los mensajes importantes sean vistos.

## Cómo funciona

Este es un flujo de trabajo típico con InboxMessages:

| Paso                                                                         | Método                                                                                                                                      |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Carga de la página                                                                 |                                                                                                                                             |
| Sincronización de mensajes con el servidor                               | <p><code>InboxMessagesModel.updateMessages</code><br/>Ejecutado mientras se inicializa el SDK</p>                                              |
| Eliminación de mensajes obsoletos                                           | <p><code>InboxMessagesModel.updateMessages</code><br/>Ejecutado mientras se inicializa el SDK</p>                                              |
| Recepción del número de mensajes no leídos para actualizar una insignia            | <p><code>Pushwoosh.pwinbox.unreadMessagesCount</code><br/>Ejecutado manualmente (después de que se activa el evento <code>onUpdateInboxMessages</code>)</p> |
| Carga de mensajes para mostrar en la Bandeja de Entrada                            | <p><code>Pushwoosh.pwinbox.loadMessages</code><br/>Ejecutado manualmente (después de que se activa el evento <code>onUpdateInboxMessages</code>)</p>        |
| Marcado de mensajes que entran en el viewport como leídos                         | <p><code>Pushwoosh.pwinbox.readMessagesWithCodes</code><br/>Ejecutado manualmente</p>                                                            |
| Realización de una acción asignada al mensaje abierto                  | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Ejecutado manualmente</p>                                                  |
| Eliminación de mensajes al hacer clic en un icono de eliminar o al deslizar un mensaje hacia la derecha | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Ejecutado manualmente</p>                                                  |

## Escuchadores de eventos

```javascript title="onUpdateInboxMessages"
// Se ejecuta después de que la Bandeja de Entrada se actualiza automáticamente mientras se carga la página.
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);
```

```javascript title="onPutNewMessageToInboxStore"
// Ejecutado por el ServiceWorker después de que se recibe el Mensaje de la Bandeja de Entrada y se guarda en indexedDB.
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
```

## Módulo público

**El módulo WebSDK InboxMessagesPublic** presenta una interfaz pública para implementar la Bandeja de Entrada Web.

```txt title="Model"
type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // depende de action_params
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;
 
 
interface IInboxMessagePublic {
  code: string;  // id_bandeja_de_entrada
  title: string;  // título
  message: string; // cuerpo
  imageUrl: string;  // imagen
  sendDate: string;  // fecha_de_envío
  type: TInboxMessageType;  // depende de action_params
  isRead: boolean;  // verdadero si el estado es "leído" o "abierto"
  link: string; // Enlace profundo | URL | "/"
  isActionPerformed: boolean;  // verdadero si el estado es "abierto"
}
```

## Métodos públicos

Consulta las descripciones de los métodos públicos en la guía del [SDK de Web Push 3.0](/es/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).