Aller au contenu principal

Web Push - Implémenter une Inbox

Dans cette page, vous apprendrez comment créer une boîte de réception (inbox) au sein de votre application avec toutes les options à votre disposition pour créer une excellente expérience de messagerie pour vos utilisateurs.

Avec notre bibliothèque, il est extrêmement simple de mettre en œuvre une boîte de réception intégrée à l'application. La mise en place d'une boîte de réception augmente considérablement le taux d'engagement de vos notifications simplement parce que les messages seront toujours disponibles dans votre application.

La fonctionnalité boîte de réception est activée par défaut par les équipes Actito lors de la mise en place de votre intégration.

Après avoir activé cette fonctionnalité, vous pouvez commencer à implémenter votre boîte de réception dans n'importe quel contrôleur de vue de votre application.

Boîte de réception au niveau de l'appareil​

L'approche standard consiste à utiliser la boîte de réception au niveau de l'appareil. Chaque appareil aura sa propre boîte de réception indépendante, quel que soit l'utilisateur associé. La boîte de réception est disponible via le sous-package notificare-web/inbox.

Pour obtenir tous les éléments de la boîte de réception, vous pouvez appeler ce qui suit :

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

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

Facultativement, vous pouvez transmettre un objet options à la fonction fetchInbox pour paramétrer la requête.

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.
});

Gérer les éléments de la boîte de réception​

En supposant que vous déteniez une référence à un élément, pour ouvrir un élément de la boîte de réception, vous feriez simplement quelque chose comme ceci :

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);

Pour supprimer des éléments de la boîte de réception, vous invoquerez la méthode suivante :

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

await removeInboxItem(item);

De plus, vous pouvez également marquer un message comme lu en appelant la méthode suivante :

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

await markInboxItemAsRead(item);

Ou marquez tous les messages comme lus en appelant la méthode suivante :

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

await markAllInboxItemsAsRead();

Pour supprimer tous les éléments de la boîte de réception, procédez comme suit :

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

await clearInbox();

Chaque fois qu'un message est ouvert, marqué comme lu, supprimé ou que tous les éléments de la boîte de réception sont effacés, l'événement suivant sera déclenché :

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

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