# Web Message Inbox einrichten

#### Voraussetzungen

Stellen Sie sicher, dass Sie das Pushwoosh Web SDK auf Ihrer Website implementiert haben. Befolgen Sie dazu bitte unsere [Anleitung](/de/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).


Die **Message Inbox für Websites** ermöglicht es Ihnen, Web-Push-Benachrichtigungen zu speichern, damit Benutzer sie später erneut aufrufen können, um sicherzustellen, dass wichtige Nachrichten gesehen werden.

## Wie es funktioniert

Hier ist ein typischer Arbeitsablauf mit InboxMessages:

| Schritt                                                              | Methode                                                                                                                                     |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Seitenaufbau                                                         |                                                                                                                                             |
| Synchronisieren von Nachrichten mit dem Server                       | <p><code>InboxMessagesModel.updateMessages</code><br/>Wird ausgeführt, während das SDK initialisiert wird</p>                               |
| Löschen veralteter Nachrichten                                       | <p><code>InboxMessagesModel.updateMessages</code><br/>Wird ausgeführt, während das SDK initialisiert wird</p>                               |
| Empfangen der Anzahl ungelesener Nachrichten zur Aktualisierung eines Abzeichens | <p><code>Pushwoosh.pwinbox.unreadMessagesCount</code><br/>Manuell ausgeführt (nachdem das <code>onUpdateInboxMessages</code>-Ereignis ausgelöst wird)</p> |
| Laden von Nachrichten, die in der Inbox angezeigt werden sollen      | <p><code>Pushwoosh.pwinbox.loadMessages</code><br/>Manuell ausgeführt (nachdem das <code>onUpdateInboxMessages</code>-Ereignis ausgelöst wird)</p> |
| Markieren von Nachrichten im Ansichtsbereich als gelesen             | <p><code>Pushwoosh.pwinbox.readMessagesWithCodes</code><br/>Manuell ausgeführt</p>                                                            |
| Ausführen einer Aktion, die der geöffneten Nachricht zugewiesen ist  | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Manuell ausgeführt</p>                                                  |
| Löschen von Nachrichten durch Klicken auf ein Löschsymbol oder Wischen einer Nachricht nach rechts | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Manuell ausgeführt</p>                                                  |

## Event-Listener

```javascript title="onUpdateInboxMessages"
// Wird ausgeführt, nachdem die Inbox beim Laden der Seite automatisch aktualisiert wurde. 
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);
```

```javascript title="onPutNewMessageToInboxStore"
// Wird vom ServiceWorker ausgeführt, nachdem die Inbox-Nachricht empfangen und in indexedDB gespeichert wurde. 
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
```

## Öffentliches Modul

Das **WebSDK InboxMessagesPublic-Modul** stellt eine öffentliche Schnittstelle zur Implementierung der Web Inbox bereit.

```txt title="Model"
type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // hängt von action_params ab
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;
 
 
interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // title
  message: string; // body
  imageUrl: string;  // image
  sendDate: string;  // send_date
  type: TInboxMessageType;  // hängt von action_params ab
  isRead: boolean;  // true, wenn der Status "read" oder "open" ist
  link: string; // Deeplink | URL | "/"
  isActionPerformed: boolean;  // true, wenn der Status "open" ist
}
```

## Öffentliche Methoden

Die Beschreibungen der öffentlichen Methoden finden Sie in der Anleitung zum [Web Push SDK 3.0](/de/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).