Web Push: implementar una Inbox

En esta página aprenderá cómo crear una bandeja de entrada dentro de su aplicación con todas las opciones a su disposición para crear una excelente experiencia de correo electrónico para sus usuarios.

Con nuestra biblioteca, es extremadamente sencillo implementar una bandeja de entrada en la aplicación. Configurar una bandeja de entrada aumenta significativamente la tasa de participación de tus notificaciones simplemente porque los mensajes siempre estarán disponibles en tu aplicación.

La funcionalidad de la bandeja de entrada la activan de forma predeterminada los equipos de Actito al configurar su integración.

Después de habilitar esta función, puede comenzar a implementar su bandeja de entrada en cualquier controlador de vista de su aplicación.

Bandeja de entrada a nivel de dispositivo

El enfoque estándar es utilizar la bandeja de entrada a nivel de dispositivo. Cada dispositivo tendrá su propia bandeja de entrada independiente, independientemente del usuario asociado. La bandeja de entrada está disponible a través del subpaquete notificare-web/inbox.

Para recibir todos los artículos en la bandeja de entrada, puede llamar a lo siguiente:

import { fetchInbox } from 'notificare-web/inbox';

const { items, count, unread } = await fetchInbox();

Opcionalmente, puede pasar un objeto de opciones a la función fetchInbox para parametrizar la consulta.

const inbox = await fetchInbox({
  since: '',    // (optional) A string representation of an ISO date.
  skip: 0,      // (optional) A number representing how many records the query should skip.
  limit: 100,   // (optional) A number representing how many record the query should fetch.
});

Administrar elementos de la bandeja de entrada

Suponiendo que tiene una referencia a un elemento, para abrir un elemento desde la Bandeja de entrada simplemente haría algo como esto:

import { openInboxItem } from 'notificare-web/inbox';
import { presentNotification } from 'notificare-web/push-ui';

const notification = await openInboxItem(item);

// Optional: Present the notification with Push UI.
presentNotification(notification);

Para eliminar elementos de la bandeja de entrada, invocará el siguiente método:

import { removeInboxItem } from 'notificare-web/inbox';

await removeInboxItem(item);

Además, también puedes marcar un mensaje como leído llamando al siguiente método:

import { markInboxItemAsRead } from 'notificare-web/inbox';

await markInboxItemAsRead(item);

O marque todos los mensajes como leídos llamando al siguiente método:

import { markAllInboxItemsAsRead } from 'notificare-web/inbox';

await markAllInboxItemsAsRead();

Para eliminar todos los elementos de la Bandeja de entrada, siga estos pasos:

import { clearInbox } from 'notificare-web/inbox';

await clearInbox();

Cada vez que se abre un mensaje, se marca como leído, se elimina o se borran todos los elementos de la bandeja de entrada, se activará el siguiente evento:

import { onBadgeUpdated } from 'notificare-web/inbox';

onBadgeUpdated((badge) => {
  // more code ...
});