设置网页消息收件箱

先决条件

请确保您已在网站上实施 Pushwoosh Web SDK。为此，请遵循我们的指南。

网站消息收件箱允许您存储网页推送通知，以便用户以后可以重新访问它们，从而确保重要消息被看到。

工作原理

以下是 InboxMessages 的典型工作流程：

步骤	方法
页面加载
与服务器同步消息	`InboxMessagesModel.updateMessages` 在 SDK 初始化时执行
删除过时消息	`InboxMessagesModel.updateMessages` 在 SDK 初始化时执行
接收未读消息数以更新徽章	`Pushwoosh.pwinbox.unreadMessagesCount` 手动执行（在 `onUpdateInboxMessages` 事件触发后）
加载要在收件箱中显示的消息	`Pushwoosh.pwinbox.loadMessages` 手动执行（在 `onUpdateInboxMessages` 事件触发后）
将进入视口的消息标记为已读	`Pushwoosh.pwinbox.readMessagesWithCodes` 手动执行
执行分配给已打开消息的操作	`Pushwoosh.pwinbox.performActionForMessageWithCode` 手动执行
通过单击删除图标或向右滑动消息来删除消息	`Pushwoosh.pwinbox.performActionForMessageWithCode` 手动执行

事件监听器

// 在页面加载期间收件箱自动更新后执行。
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);

// 在 ServiceWorker 接收到收件箱消息并将其保存到 indexedDB 后执行。
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);

公共模块

WebSDK InboxMessagesPublic 模块提供了一个公共接口来实现网页收件箱。

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
}

单元格布局。 消息会渲染为四种布局之一——classic、banner、captioned 或 carousel——与控制面板中营销活动预览显示的布局相同。如果布局无法用消息所携带的内容渲染，则会降级为 classic：banner 需要一张主图，captioned 需要一张主图以及标题和正文，而 carousel 则至少需要一张幻灯片以及标题和正文。公共消息上的 layout 始终是实际绘制的布局，已经是降级后的版本。

检查 layout 是判断消息将渲染成何种样式的唯一可靠方法——heroUrl 也为 classic 消息设置（参见上面的字段说明），因此集成不能使用其存在来决定是否绘制主图。

公共方法

请在 Web Push SDK 3.0 指南中查看公共方法的描述。

Pushwoosh.pwinbox.syncMessages() 从服务器拉取当前收件箱；调用它可以在内置小部件自身的轮询之外强制刷新。