Configurer la boîte de réception des messages web

Prérequis

Assurez-vous d’avoir implémenté le SDK web de Pushwoosh sur votre site web. Pour ce faire, veuillez suivre notre guide.

La boîte de réception des messages pour les sites web vous permet de stocker les notifications push web afin que les utilisateurs puissent les consulter plus tard, garantissant ainsi que les messages importants sont vus.

Comment ça marche

Voici un flux de travail typique avec InboxMessages :

Étape	Méthode
Chargement de la page
Synchronisation des messages avec le serveur	`InboxMessagesModel.updateMessages` Exécuté lors de l’initialisation du SDK
Suppression des messages obsolètes	`InboxMessagesModel.updateMessages` Exécuté lors de l’initialisation du SDK
Réception du nombre de messages non lus pour mettre à jour un badge	`Pushwoosh.pwinbox.unreadMessagesCount` Exécuté manuellement (après le déclenchement de l’événement `onUpdateInboxMessages`)
Chargement des messages à afficher dans la boîte de réception	`Pushwoosh.pwinbox.loadMessages` Exécuté manuellement (après le déclenchement de l’événement `onUpdateInboxMessages`)
Marquage des messages entrés dans la fenêtre d’affichage comme lus	`Pushwoosh.pwinbox.readMessagesWithCodes` Exécuté manuellement
Exécution d’une action assignée au message ouvert	`Pushwoosh.pwinbox.performActionForMessageWithCode` Exécuté manuellement
Suppression des messages par clic sur une icône de suppression ou par balayage vers la droite d’un message	`Pushwoosh.pwinbox.performActionForMessageWithCode` Exécuté manuellement

Écouteurs d’événements

// Exécuté après la mise à jour automatique de la boîte de réception pendant le chargement de la page.
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);

// Exécuté par le ServiceWorker après la réception du message de la boîte de réception et son enregistrement dans indexedDB.
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);

Module public

Le module public InboxMessages du SDK web présente une interface publique pour implémenter la boîte de réception web.

type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // dépend de action_params
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;

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

interface IInboxMessageSlide {
  imageUrl: string;
  caption: string;  // légende superposée sur la diapositive ; vide lorsque la diapositive n'en a pas
  link: string;  // où un appui sur la diapositive mène ; vide lorsque la diapositive n'en a pas, et l'action propre au message s'applique à la place
}

interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // titre
  message: string; // corps
  imageUrl: string;  // image
  sendDate: string;  // send_date, ISO 8601 en UTC
  type: TInboxMessageType;  // dépend de action_params
  isRead: boolean;  // vrai si le statut est "lu" ou "ouvert"
  link: string; // Deeplink | URL | "/"
  isActionPerformed: boolean;  // vrai si le statut est "ouvert"
  layout: TInboxLayout;  // mise en page de la cellule à dessiner, déjà dégradée à une que ce message peut rendre
  iconUrl: string;  // petit avatar rond ; même valeur que imageUrl, sous le nom que les mises en page utilisent
  heroUrl: string;  // image principale ; se rabat sur iconUrl lorsque le message n'a pas de bannière, donc il est également défini pour les messages classiques
  carousel: Array<IInboxMessageSlide>;  // diapositives de la mise en page carrousel ; vide pour toutes les autres mises en page
  customData: Record<string, unknown>;  // les données personnalisées de la campagne, telles qu'envoyées depuis le panneau de contrôle
}

Mises en page des cellules. Un message s’affiche selon l’une des quatre mises en page — classic, banner, captioned ou carousel — les mêmes que celles affichées dans l’aperçu de la campagne du panneau de contrôle. Une mise en page qui ne peut pas s’afficher avec le contenu du message est dégradée en classic : banner nécessite une image principale, captioned nécessite une image principale plus un titre et un corps, et carousel nécessite au moins une diapositive plus un titre et un corps. layout sur le message public est toujours celui qui est réellement dessiné, déjà dégradé.

Vérifier layout est le seul moyen fiable de savoir comment un message s’affichera — heroUrl est également défini pour les messages classic (voir la note de champ ci-dessus), donc une intégration ne doit pas utiliser sa présence pour décider de dessiner une image principale.

Méthodes publiques

Consultez les descriptions des méthodes publiques dans le guide SDK Push Web 3.0.

Pushwoosh.pwinbox.syncMessages() récupère la boîte de réception actuelle depuis le serveur ; appelez-la pour forcer une actualisation en dehors du sondage propre au widget intégré.