# 设置 Web 消息收件箱

#### 前提条件

请确保您已在网站上实施 Pushwoosh Web SDK。为此，请遵循我们的[指南](/zh/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/)。

**网站的 Message Inbox** 允许您存储 Web 推送通知，以便用户以后可以重新访问它们，确保重要消息被看到。

## 工作原理

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

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

## 事件监听器

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

```javascript title="onPutNewMessageToInboxStore"
// 在 ServiceWorker 收到 Inbox Message 并保存到 indexedDB 后执行。
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
```

## 公共模块

**WebSDK InboxMessagesPublic 模块** 提供了一个用于实现 Web 收件箱的公共接口。

```txt title="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"
}
```

## 公共方法

请查阅 [Web Push SDK 3.0](/zh/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/) 指南中公共方法的描述。