Web-Nachrichten-Posteingang einrichten

Voraussetzungen

Stellen Sie sicher, dass Sie das Pushwoosh Web SDK auf Ihrer Website implementiert haben. Folgen Sie dazu bitte unserer Anleitung.

Der Nachrichten-Posteingang für Websites ermöglicht es Ihnen, Web-Push-Benachrichtigungen zu speichern, damit Benutzer sie später erneut aufrufen können, um sicherzustellen, dass wichtige Nachrichten gesehen werden.

So funktioniert es

Hier ist ein typischer Arbeitsablauf mit InboxMessages:

Schritt	Methode
Seitenaufbau
Synchronisieren von Nachrichten mit dem Server	InboxMessagesModel.updateMessages Wird ausgeführt, während das SDK initialisiert wird
Löschen veralteter Nachrichten	InboxMessagesModel.updateMessages Wird ausgeführt, während das SDK initialisiert wird
Empfangen der Anzahl ungelesener Nachrichten zur Aktualisierung eines Abzeichens	Pushwoosh.pwinbox.unreadMessagesCount Manuell ausgeführt (nachdem das onUpdateInboxMessages-Ereignis ausgelöst wurde)
Laden von Nachrichten, die im Posteingang angezeigt werden sollen	Pushwoosh.pwinbox.loadMessages Manuell ausgeführt (nachdem das onUpdateInboxMessages-Ereignis ausgelöst wurde)
Markieren von Nachrichten im Ansichtsbereich als gelesen	Pushwoosh.pwinbox.readMessagesWithCodes Manuell ausgeführt
Ausführen einer Aktion, die der geöffneten Nachricht zugewiesen ist	Pushwoosh.pwinbox.performActionForMessageWithCode Manuell ausgeführt
Löschen von Nachrichten durch Klicken auf ein Löschsymbol oder Wischen einer Nachricht nach rechts	Pushwoosh.pwinbox.performActionForMessageWithCode Manuell ausgeführt

Event-Listener

onUpdateInboxMessages

// Wird ausgeführt, nachdem der Posteingang beim Laden der Seite automatisch aktualisiert wurde.
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);

onPutNewMessageToInboxStore

// Wird vom ServiceWorker ausgeführt, nachdem die Posteingangsnachricht empfangen und in indexedDB gespeichert wurde.
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);

Öffentliches Modul

Das WebSDK InboxMessagesPublic-Modul stellt eine öffentliche Schnittstelle zur Implementierung des Web-Posteingangs bereit.

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 ist jetzt ein echter UTC-Zeitpunkt (v3.75.0+)

sendDate enthielt früher die lokale Uhrzeit mit der Bezeichnung Z. Code, der den alten Wert durch Anwendung eines Zeitzonen-Offsets kompensiert hat, wird nun um denselben Offset abweichen – entfernen Sie die Kompensation. Das integrierte Widget ist davon nicht betroffen.

Zellenlayouts. Eine Nachricht wird in einem von vier Layouts gerendert – classic, banner, captioned oder carousel – denselben Layouts, die die Kampagnenvorschau im Control Panel anzeigt. Ein Layout, das mit dem Inhalt der Nachricht nicht gerendert werden kann, wird auf classic herabgestuft: banner benötigt ein Hero-Bild, captioned benötigt ein Hero-Bild sowie einen Titel und einen Text, und carousel benötigt mindestens eine Folie sowie einen Titel und einen Text. layout in der öffentlichen Nachricht ist immer das tatsächlich gezeichnete, bereits herabgestufte Layout.

Die Überprüfung von layout ist die einzige zuverlässige Methode, um festzustellen, wie eine Nachricht gerendert wird – heroUrl ist auch für classic-Nachrichten gesetzt (siehe die Feldnotiz oben), daher darf eine Integration dessen Vorhandensein nicht verwenden, um zu entscheiden, ob ein Hero gezeichnet werden soll.

Öffentliche Methoden

Die Beschreibungen der öffentlichen Methoden finden Sie in der Web Push SDK 3.0-Anleitung.

Pushwoosh.pwinbox.syncMessages() ruft den aktuellen Posteingang vom Server ab; rufen Sie es auf, um eine Aktualisierung außerhalb des eigenen Pollings des integrierten Widgets zu erzwingen.