웹 메시지 받은 편지함 설정

전제 조건

웹사이트에 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()는 서버에서 현재 받은 편지함을 가져옵니다. 내장 위젯의 자체 폴링 외부에서 강제로 새로고침하려면 이 메서드를 호출하세요.