# Настройка веб-инбокса сообщений

#### Предварительные условия

Убедитесь, что вы внедрили Pushwoosh Web SDK на своем веб-сайте. Для этого следуйте нашему [руководству](/ru/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).

**Инбокс сообщений для веб-сайтов** позволяет хранить веб-пуш-уведомления, чтобы пользователи могли просматривать их позже, гарантируя, что важные сообщения будут замечены.

## Принцип работы

Вот типичный рабочий процесс с 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 после получения и сохранения сообщения Инбокса в indexedDB.
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
```

## Публичный модуль

**Публичный модуль WebSDK InboxMessagesPublic** представляет публичный интерфейс для реализации веб-инбокса.

```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](/ru/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).