# 웹 메시지 인박스 설정

#### 사전 요구 사항

웹사이트에 Pushwoosh Web SDK 가 구현되었는지 확인하십시오. 그러려면 [가이드](/ko/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/)를 따르십시오.

**웹사이트용 Message Inbox** 를 사용하면 웹 푸시 알림을 저장하여 사용자가 나중에 다시 방문할 수 있도록 하여 중요한 메시지를 확인할 수 있습니다.

## 작동 방식

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> |
| Inbox 에 표시할 메시지 로드                            | <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"
// 페이지 로드 중 Inbox 가 자동으로 업데이트된 후 실행됩니다.
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 Inbox 를 구현하기 위한 공개 인터페이스를 제공합니다.

```txt title="Model"
type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // action_params 에 따라 달라집니다.
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;


interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // 제목
  message: string; // 본문
  imageUrl: string;  // 이미지
  sendDate: string;  // 전송 날짜
  type: TInboxMessageType;  // action_params 에 따라 달라집니다.
  isRead: boolean;  // 상태가 "read" 또는 "open" 이면 true
  link: string; // Deeplink | URL | "/"
  isActionPerformed: boolean;  // 상태가 "open" 이면 true
}
```

## 공개 메서드

공개 메서드에 대한 설명은 [Web Push SDK 3.0](/ko/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/) 가이드에서 확인하십시오.