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, por favor sigue nuestra guía.

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

Aquí hay un flujo de trabajo típico con InboxMessages:

Paso	Método
Carga de la página
Sincronizando mensajes con el servidor	InboxMessagesModel.updateMessages Ejecutado mientras se inicializa el SDK
Eliminando mensajes obsoletos	InboxMessagesModel.updateMessages Ejecutado mientras se inicializa el SDK
Recibiendo el número de mensajes no leídos para actualizar una insignia	Pushwoosh.pwinbox.unreadMessagesCount Ejecutado manualmente (después de que se dispare el evento onUpdateInboxMessages)
Cargando mensajes para ser mostrados en la Bandeja de Entrada	Pushwoosh.pwinbox.loadMessages Ejecutado manualmente (después de que se dispare el evento onUpdateInboxMessages)
Marcando como leídos los mensajes que entran en el viewport	Pushwoosh.pwinbox.readMessagesWithCodes Ejecutado manualmente
Realizando una acción asignada al mensaje abierto	Pushwoosh.pwinbox.performActionForMessageWithCode Ejecutado manualmente
Eliminando mensajes al hacer clic en un icono de eliminar o deslizar un mensaje a la derecha	Pushwoosh.pwinbox.performActionForMessageWithCode Ejecutado manualmente

Escuchadores de eventos

onUpdateInboxMessages

// Executed after the Inbox is updated automatically while the page is loading.
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);

onPutNewMessageToInboxStore

// Executed by ServiceWorker after the Inbox Message is received and saved to 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.

Model

type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // depends on action_params
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;

type TInboxLayout = 'classic' | 'banner' | 'captioned' | 'carousel';

interface IInboxMessageSlide {
  imageUrl: string;
  caption: string;  // caption overlaid on the slide; empty when the slide has none
  link: string;  // where a tap on the slide goes; empty when the slide has none, and the message's own action applies instead
}

interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // title
  message: string; // body
  imageUrl: string;  // image
  sendDate: string;  // send_date, ISO 8601 in UTC
  type: TInboxMessageType;  // depends on action_params
  isRead: boolean;  // true if status is "read" or "open"
  link: string; // Deeplink | URL | "/"
  isActionPerformed: boolean;  // true if status is "open"
  layout: TInboxLayout;  // cell layout to draw, already degraded to one this message can render
  iconUrl: string;  // small round avatar; same value as imageUrl, under the name the layouts use
  heroUrl: string;  // hero image; falls back to iconUrl when the message has no banner, so it's set for classic messages too
  carousel: Array<IInboxMessageSlide>;  // slides of the carousel layout; empty for every other layout
  customData: Record<string, unknown>;  // the campaign's own custom data, as sent from the control panel
}

sendDate ahora es un instante UTC verdadero (v3.75.0+)

sendDate solía llevar la hora local del reloj de pared etiquetada como Z. El código que compensaba el valor antiguo aplicando un desfase de zona horaria ahora estará desfasado por ese mismo desfase — elimina la compensación. El widget incorporado no se ve afectado.

Diseños de celda. Un mensaje se renderiza como uno de los cuatro diseños — classic, banner, captioned, o carousel — los mismos diseños que muestra la vista previa de la campaña en el panel de control. Un diseño que no puede renderizarse con lo que lleva el mensaje se degrada a classic: banner necesita una imagen principal (hero image), captioned necesita una imagen principal más un título y un cuerpo, y carousel necesita al menos una diapositiva más un título y un cuerpo. layout en el mensaje público es siempre el que se dibuja realmente, ya degradado.

Comprobar layout es la única forma fiable de saber cómo se renderizará un mensaje — heroUrl también se establece para los mensajes classic (ver la nota de campo anterior), por lo que una integración no debe usar su presencia para decidir si dibujar una imagen principal (hero).

Métodos públicos

Consulta las descripciones de los métodos públicos en la guía del SDK Web Push 3.0.

Pushwoosh.pwinbox.syncMessages() extrae la bandeja de entrada actual del servidor; llámalo para forzar una actualización fuera del sondeo propio del widget incorporado.