Configurar a caixa de entrada de mensagens da web

Pré-requisitos

Certifique-se de que implementou o SDK da Web da Pushwoosh em seu site. Para fazer isso, siga nosso guia.

A Caixa de Entrada de Mensagens para sites permite que você armazene notificações push da web para que os usuários possam revisitá-las mais tarde, garantindo que mensagens importantes sejam vistas.

Como funciona

Aqui está um fluxo de trabalho típico com InboxMessages:

Etapa	Método
Carregamento da página
Sincronizando mensagens com o servidor	`InboxMessagesModel.updateMessages` Executado enquanto o SDK é inicializado
Excluindo mensagens desatualizadas	`InboxMessagesModel.updateMessages` Executado enquanto o SDK é inicializado
Recebendo o número de mensagens não lidas para atualizar um selo (badge)	`Pushwoosh.pwinbox.unreadMessagesCount` Executado manualmente (após o evento `onUpdateInboxMessages` ser acionado)
Carregando mensagens para serem exibidas na Caixa de Entrada	`Pushwoosh.pwinbox.loadMessages` Executado manualmente (após o evento `onUpdateInboxMessages` ser acionado)
Marcando mensagens que entraram na área de visualização como lidas	`Pushwoosh.pwinbox.readMessagesWithCodes` Executado manualmente
Executando uma ação atribuída à mensagem aberta	`Pushwoosh.pwinbox.performActionForMessageWithCode` Executado manualmente
Excluindo mensagens ao clicar em um ícone de exclusão ou deslizar uma mensagem para a direita	`Pushwoosh.pwinbox.performActionForMessageWithCode` Executado manualmente

Listeners de eventos

// Executado após a Caixa de Entrada ser atualizada automaticamente durante o carregamento da página.
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);

// Executado pelo ServiceWorker após a Mensagem da Caixa de Entrada ser recebida e salva no indexedDB.
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);

Módulo público

O módulo WebSDK InboxMessagesPublic apresenta uma interface pública para implementar a Caixa de Entrada da Web.

type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // depende de action_params
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;

type TInboxLayout = 'classic' | 'banner' | 'captioned' | 'carousel';

interface IInboxMessageSlide {
  imageUrl: string;
  caption: string;  // legenda sobreposta no slide; vazia quando o slide não tem nenhuma
  link: string;  // para onde um toque no slide vai; vazio quando o slide não tem nenhum, e a própria ação da mensagem se aplica em vez disso
}

interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // título
  message: string; // corpo
  imageUrl: string;  // imagem
  sendDate: string;  // send_date, ISO 8601 em UTC
  type: TInboxMessageType;  // depende de action_params
  isRead: boolean;  // verdadeiro se o status for "lido" ou "aberto"
  link: string; // Deeplink | URL | "/"
  isActionPerformed: boolean;  // verdadeiro se o status for "aberto"
  layout: TInboxLayout;  // layout da célula a ser desenhado, já degradado para um que esta mensagem pode renderizar
  iconUrl: string;  // avatar pequeno e redondo; mesmo valor que imageUrl, sob o nome que os layouts usam
  heroUrl: string;  // imagem de destaque (hero); recorre a iconUrl quando a mensagem não tem banner, então também é definido para mensagens clássicas
  carousel: Array<IInboxMessageSlide>;  // slides do layout de carrossel; vazio para todos os outros layouts
  customData: Record<string, unknown>;  // os dados personalizados da própria campanha, conforme enviados do painel de controle
}

Layouts de célula. Uma mensagem é renderizada como um dos quatro layouts — classic, banner, captioned ou carousel — os mesmos layouts que a pré-visualização da campanha no painel de controle mostra. Um layout que não pode ser renderizado com o que a mensagem carrega é degradado para classic: banner precisa de uma imagem de destaque (hero), captioned precisa de uma imagem de destaque mais um título e um corpo, e carousel precisa de pelo menos um slide mais um título e um corpo. O layout na mensagem pública é sempre aquele que é realmente desenhado, já degradado.

Verificar o layout é a única maneira confiável de saber como uma mensagem será renderizada — o heroUrl também é definido para mensagens classic (veja a nota de campo acima), então uma integração não deve usar sua presença para decidir se deve desenhar uma imagem de destaque (hero).

Métodos públicos

Confira as descrições dos métodos públicos no guia Web Push SDK 3.0.

Pushwoosh.pwinbox.syncMessages() busca a caixa de entrada atual do servidor; chame-o para forçar uma atualização fora da sondagem (polling) própria do widget integrado.