Web message inbox

Prerequisites

Make sure you’ve implemented Pushwoosh Web SDK on your website. To do so, please follow our guide.

Message Inbox for websites allows you to store web push notifications so users can revisit them later, ensuring important messages are seen.

How it works

Here’s a typical workflow with InboxMessages:

Step	Method
Page load
Synchronizing messages with the server	InboxMessagesModel.updateMessages Executed while the SDK is initialized
Deleting outdated messages	InboxMessagesModel.updateMessages Executed while the SDK is initialized
Receiving the number of unread messages to update a badge	Pushwoosh.pwinbox.unreadMessagesCount Executed manually (after the onUpdateInboxMessagesevent triggers)
Loading messages to be displayed in Inbox	Pushwoosh.pwinbox.loadMessages Executed manually (after the onUpdateInboxMessagesevent triggers)
Marking messages got in the viewport as read	Pushwoosh.pwinbox.readMessagesWithCodes Executed manually
Performing an action assigned to the message opened	Pushwoosh.pwinbox.performActionForMessageWithCode Executed manually
Deleting messages by click on a delete icon or swipe-right a message	Pushwoosh.pwinbox.performActionForMessageWithCode Executed manually

Event listeners

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

Public module

WebSDK InboxMessagesPublic module presents a public interface to implement Web Inbox.

Model

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


interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // title
  message: string; // body
  imageUrl: string;  // image
  sendDate: string;  // send_date
  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"
}

Public methods

Check out public methods’ descriptions in the Web Push SDK 3.0 guide.