# Web Push SDK 3.0

<Aside type="note">
#### Voraussetzungen

Um mit der Integration des Web Push SDK in Ihre HTTPS-Website fortzufahren, sollten Sie Folgendes tun:

1. Finden Sie Ihren Pushwoosh Application Code.
2. Chrome und Firefox: Finden Sie Ihren Firebase API-Schlüssel und Ihre Sender-ID. Befolgen Sie dazu die Schritte 1-3 der Anleitung zur [Konfiguration von Chrome und Firefox](/de/developer/first-steps/connect-messaging-services/chrome-configuration/).
3. Safari: Finden Sie Ihre [Website Push ID](/de/developer/first-steps/connect-messaging-services/safari-configuration/#1-registering-with-apple).
4. Laden Sie das [Pushwoosh Web Push SDK](https://cdn.pushwoosh.com/webpush/v3/PushwooshWebSDKFiles.zip) herunter.
</Aside>

<Aside type="caution">
* Chrome-Pushes funktionieren nicht mit **selbstsignierten** Zertifikaten (https/ssl). Sie benötigen ein SSL-Zertifikat, das von einer vertrauenswürdigen Autorität signiert wurde.
* Push-Benachrichtigungen funktionieren weder im Inkognito- noch im Gastmodus.
* Die automatische Anmeldung ist für Safari nicht verfügbar.
</Aside>

## Integration

<Aside type="note" title="Verwenden Sie npm?">
  Wenn Sie npm für die Paketverwaltung bevorzugen, können Sie das Pushwoosh Web SDK auch über npm installieren und integrieren. Detaillierte Anweisungen finden Sie in unserer [Anleitung zur Verwendung mit npm](/de/developer/pushwoosh-sdk/web-push-notifications/usage-with-npm/).
</Aside>

[**Integrationsbeispiel auf GitHub**](https://github.com/Pushwoosh/web-push-notifications-sample)

### Holen Sie sich das Pushwoosh Web Push SDK und entpacken Sie es. Sie sollten die folgenden Dateien haben:

* **pushwoosh-service-worker.js**

### Platzieren Sie all diese Dateien im Stammverzeichnis Ihrer Website.

<Aside type="note">
Stellen Sie sicher, dass die folgenden URLs öffentlich zugänglich sind:

* [https://yoursite.com/pushwoosh-service-worker.js](https://yoursite.com/pushwoosh-service-worker.js)
</Aside>

### Initialisieren Sie das SDK:

1. Binden Sie das SDK von unserem CDN _asynchron_ ein.

<Aside title="Google Tag Manager wird unterstützt">

Klicken Sie [hier](#installing-from-google-tag-manager), wenn Sie den Google Tag Manager verwenden.
</Aside>

```txt
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
```

2. Initialisieren Sie das Web Push SDK und stellen Sie sicher, dass die Initialisierung in die Warteschlange gestellt wird, bis das SDK vollständig geladen ist.
<Aside type="note">
Um das Web Push SDK zu initialisieren, müssen Sie ein [Device API-Token](/de/developer/api-reference/api-access-token/#device-api-token) im `apiToken`-Parameter angeben.

**Wichtig:** Stellen Sie sicher, dass das Token Zugriff auf die richtige Anwendung in Ihrem Pushwoosh Control Panel hat. [Mehr erfahren](/de/developer/api-reference/api-access-token/#edit-token)
</Aside>
```html
<script type="text/javascript">
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
    logLevel: 'info', // possible values: error, info, debug
    applicationCode: 'XXXXX-XXXXX', // you application code from Pushwoosh Control Panel
    apiToken: 'XXXXXXX', //  Device API Token
    safariWebsitePushID: 'web.com.example.domain', //  unique reverse-domain string, obtained in you Apple Developer Portal. Only needed if you send push notifications to Safari browser
    defaultNotificationTitle: 'Pushwoosh', // sets a default title for push notifications
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // URL to custom custom notification image
    autoSubscribe: false, // or true. If true, prompts a user to subscribe for pushes upon SDK initialization
    subscribeWidget: {
      enable: true
    },
    userId: 'user_id', // optional, set custom user ID
    tags: {
        'Name': 'John Smith'   	// optional, set custom Tags
    }
}]);
</script>
```

#### Web-Popups

Fügen Sie `webPopups` zu Ihrem `init`-Objekt hinzu, um [Web-Popup-Kampagnen](/de/product/messaging-channels/web-popups/#start-working-with-web-popups) auf Ihrer Website zu aktivieren.

```javascript
webPopups: {
  enable: true,
},
```

Web-Popup-Kampagnen zeigen Overlays an, die Sie im Control Panel konfigurieren, wie z. B. Werbeaktionen, Ankündigungen oder Formulare zur Lead-Erfassung. Im Gegensatz zum [benutzerdefinierten Anmelde-Popup](/de/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/) (`subscribePopup`), das nur die Web-Push-Anmeldung behandelt, können Web-Popup-Kampagnen jeden von Ihnen konfigurierten Inhalt anzeigen.
Informationen zur Einrichtung im Control Panel finden Sie unter [Grundlegendes zu Web-Popups](/de/product/messaging-channels/web-popups/).

#### Schaltfläche für die Push-Anmeldung

Um Ihre Benutzer zur Anmeldung für Push-Benachrichtigungen aufzufordern, empfehlen wir die Implementierung einer [Schaltfläche für die Push-Anmeldung](/de/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/) auf Ihrer Website. Verbessern Sie die Benutzererfahrung und gewinnen Sie mehr Abonnenten!


## Konfiguration

Um die Implementierung von Push-Benachrichtigungen in Ihre Website abzuschließen, müssen Sie die Web-Plattformen in Ihrem Pushwoosh Control Panel gemäß unseren Schritt-für-Schritt-Anleitungen konfigurieren:

* [Chrome-Konfiguration](/de/developer/first-steps/connect-messaging-services/chrome-configuration/)
* [Firefox-Konfiguration](/de/developer/first-steps/connect-messaging-services/chrome-configuration/)
* [Safari-Konfiguration](/de/developer/first-steps/connect-messaging-services/safari-configuration/)

<Aside type="note">
Um die FCM-Sender-ID und den API-Schlüssel zu erhalten, befolgen Sie bitte die Schritte 1-3 der [Android-Konfigurationsanleitung](/de/developer/first-steps/connect-messaging-services/android-configuration/android-firebase-configuration/).
</Aside>

## Service Worker in einem anderen Geltungsbereich registrieren

Manchmal können Sie die Service-Worker-Datei nicht im Stammverzeichnis einer Website, sondern in einem Unterverzeichnis platzieren.

In diesem Fall ändern Sie die Konfiguration (**Schritt 4.3**), indem Sie einen Parameter hinzufügen

`serviceWorkerUrl: “/push-notifications/pushwoosh-service-worker.js”`

wobei `/push-notifications/pushwoosh-service-worker.js` der Pfad zur Datei `pushwoosh-service-worker.js` ist.

## Event-Handler

Im Pushwoosh Web SDK 3.0 können Sie bestimmte Ereignisse abonnieren, um sie zu verfolgen**,** oder sich von Ereignissen abmelden, wenn Sie sie nicht mehr verfolgen müssen.

Um das Laden des Web SDK 3.0 zu verfolgen, lösen Sie das `onLoad`-Ereignis wie folgt aus:

```javascript
// Load Event
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh load!');
}]);
```

Um die korrekte Initialisierung des Web SDK zu verfolgen, lösen Sie das `onReady`-Ereignis aus:

```javascript
// Ready Event
Pushwoosh.push((api) => {
  console.log('Pushwoosh ready!');
});
```

Um sich für SDK-Ereignisse an- oder abzumelden, verwenden Sie die Handler nach dem Laden des SDK:

```javascript
Pushwoosh.push(['onLoad', (api) => {
  function onEventNameHandler() {
    console.log('Triggered event: event-name!');
  }

  // To subscribe to an event:
  Pushwoosh.addEventHandler('event-name', onEventNameHandler)

  // To unsubscribe from an event:
  Pushwoosh.removeEventHandler('event-name', onEventNameHandler)
}]);
```

### SDK-Ereignisse

#### Subscribe-Ereignis

Wird ausgeführt, nachdem ein Benutzer dem Empfang von Push-Benachrichtigungen zugestimmt hat.

```javascript
Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('subscribe', (payload) => {
    console.log('Triggered event: subscribe');
  });
}]);
```

#### Unsubscribe-Ereignis

Wird ausgeführt, nachdem ein Gerät von Benachrichtigungen abgemeldet wurde.

```javascript
Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('unsubscribe', (payload) => {
    console.log('Triggered event: unsubscribe');
  });
}]);
```

#### Ereignisse des Anmelde-Widgets

Verfolgen Sie die Anzeige eines Anmelde-Widgets.

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // Executed on displaying of the Subscription Prompt widget
  Pushwoosh.addEventHandler('show-subscription-widget', (payload) => {
    console.log('Triggered event: show-subscription-widget');
  });

  // Executed on hiding of the Subscription Prompt widget
  Pushwoosh.addEventHandler('hide-subscription-widget', (payload) => {
    console.log('Triggered event: hide-subscription-widget');
  });
}]);
```

#### Ereignisse des Benachrichtigungs-Berechtigungsdialogs

Verfolgen Sie die Anzeige des nativen Anmeldedialogs.

```javascript
Pushwoosh.push(['onLoad', function (api) {
  // Executed on permission dialog displaying
  Pushwoosh.addEventHandler('show-notification-permission-dialog', (payload) => {
    console.log('Triggered event: show-notification-permission-dialog');
  });

  // Executed on hiding the permission dialog with one of three possible statuses:
  // 1. default - the dialog is closed
  // 2. granted - permission is granted
  // 3. denied - permission is denied
  Pushwoosh.addEventHandler('hide-notification-permission-dialog', (payload) => {
    console.log('Triggered event: hide-notification-permission-dialog', payload.permission);
  });
}]);
```

#### Permission-Ereignisse

Überprüfen Sie den Status der Berechtigung für Push-Benachrichtigungen bei der SDK-Initialisierung; verfolgen Sie die Aktualisierung dieses Status, wann immer sie stattfindet.

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // Executed during the SDK initialization if 'autoSubscribe: false' or/and if a user ignores a push notification prompt.
  Pushwoosh.addEventHandler('permission-default', (payload) => {
    console.log('Triggered event: permission-default');
  });

  // Executed during the SDK initialization if notifications are blocked or once a user blocks push notifications.
  Pushwoosh.addEventHandler('permission-denied', (payload) => {
    console.log('Triggered event: permission-denied');
  });

  // Executed during the SDK initialization if notifications are allowed or once a user allows push notifications.
  Pushwoosh.addEventHandler('permission-granted', (payload) => {
    console.log('Triggered event: permission-granted');
  });
}]);
```

#### Receive-Push-Ereignis

Verfolgen Sie die Zustellung von Pushes an ein Gerät.

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // Executed when a push notification is displayed.
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('Triggered event: receive-push', payload.notification);
  });
}]);
```

#### Benachrichtigungs-Ereignisse

Verfolgen Sie, ob eine Push-Benachrichtigung von einem Benutzer geöffnet oder geschlossen wird.

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // Executed when a user clicks on notification.
  Pushwoosh.addEventHandler('open-notification', (payload) => {
    console.log('Triggered event: open-notification', payload.notification);
  });

  // Executed when a user closes a push notification.
  Pushwoosh.addEventHandler('hide-notification', (payload) => {
    console.log('Triggered event: hide-notification', payload.notification);
  });
}]);
```

#### Inbox-Ereignisse

Verfolgen Sie an die Inbox gesendete Benachrichtigungen.

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // Executed by ServiceWorker after the Inbox Message is received and saved to indexedDB.
  Pushwoosh.addEventHandler('receive-inbox-message', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.message);
  });

  // Executed after the Inbox is updated automatically while the page is loading.
  Pushwoosh.addEventHandler('update-inbox-messages', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.messages);
  });
}]);
```

#### Ereignisse des benutzerdefinierten Anmelde-Popups

Details zur Behandlung von Ereignissen des benutzerdefinierten Anmelde-Popups finden Sie im [Leitfaden zu Ereignissen des benutzerdefinierten Anmelde-Popups](/de/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/#custom-subscription-popup-events).

## API

Nachdem das Web Push SDK initialisiert wurde, können Sie die folgenden Aufrufe an die Pushwoosh-API tätigen. Alle Methoden geben [**Promise**](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)-Objekte zurück.

```javascript
Pushwoosh.push((api) => {
  // Set tags for a user
  api.setTags({
    'Tag Name 1': 'value1',
    'Tag Name 2': 'value2'
  });

  // Get tags for a user from server
  api.getTags();

  // Register user ID
  api.registerUser('user123');

    // Register user email
  api.registerEmail('user@example.com');

  // Register SMS number
  api.registerSmsNumber('+15551234567');

  // Register WhatsApp number
  api.registerWhatsappNumber('+1234567890');

  // Post an Event
  api.postEvent('myEventName', {attributeName: 'attributeValue'});

  //Unregister from notifications
  api.unregisterDevice();

  // Set the device language (overrides the value in the "Language" Tag)
  api.setLanguage('es');

  // Alternatively Multi-register user with devices and channels
  api.multiRegisterDevice({
    user_id: 'user123',
    email: 'user@example.com',
    sms_phone_number: '+1234567890',
    tags: {
      'UserType': { operation: TTagOperationSet, value: 'Premium' },
      'Interests': { operation: TTagOperationAppend, values: ['sports', 'technology'] }
    }
  });
});
```

### multiRegisterDevice

Erweiterte Registrierungsmethode, die es ermöglicht, ein Benutzerprofil mit mehreren Geräten und Nachrichtenkanälen in einem einzigen API-Aufruf zu registrieren. Diese Methode ist besonders nützlich für plattformübergreifende Anwendungen oder bei der Implementierung von Omnichannel-Messaging-Strategien.

```javascript
Pushwoosh.push((api) => {
  api.multiRegisterDevice({
    user_id: 'user123',              // Optional: User identifier
    email: 'user@example.com',       // Optional: Email for email messaging
    sms_phone_number: '+1234567890', // Optional: SMS phone number (E.164 format)
    whatsapp_phone_number: '+1234567890', // Optional: WhatsApp number (E.164 format)
    kakao_phone_number: '+1234567890',    // Optional: KakaoTalk number (E.164 format)
    language: 'en',                  // Optional: Language code (ISO 639-1)
    timezone: 'America/New_York',    // Optional: Timezone identifier
    city: 'New York',               // Optional: City for targeting
    country: 'US',                  // Optional: Country for targeting
    state: 'NY',                    // Optional: State for targeting
    tags: {                         // Optional: Tag values with operations
      'UserType': {
        operation: TTagOperationSet,     // Set tag value (0)
        value: 'Premium'
      },
      'Interests': {
        operation: TTagOperationAppend,  // Append to tag value (1)
        values: ['sports', 'technology']
      },
      'LoginCount': {
        operation: TTagOperationIncrement, // Increment tag value (3)
        value: '1'
      }
    },
    push_devices: [                 // Optional: Array of push devices
      {
        hwid: 'web-device-456',
        platform: TPlatformChrome, // Chrome platform (11)
        push_token: 'fcm-token-here',
        app_version: '2.1.0',
        platformData: {
          public_key: 'web-push-public-key',
          auth_token: 'web-push-auth-token',
          browser: 'chrome'
        }
      }
    ]
  })
  .then((response) => {
    console.log('Multi-registration successful:', response);
  })
  .catch((error) => {
    console.error('Multi-registration failed:', error);
  });
});
```

**Plattformtypen:**
- `TPlatformSafari` (10): Safari-Plattform
- `TPlatformChrome` (11): Chrome-Plattform
- `TPlatformFirefox` (12): Firefox-Plattform

**Tag-Operationstypen:**
- `TTagOperationSet` (0): Tag-Wert setzen (bestehenden Wert ersetzen)
- `TTagOperationAppend` (1): An Tag-Wert anhängen (zur Liste hinzufügen)
- `TTagOperationRemove` (2): Tag-Wert entfernen (aus der Liste entfernen)
- `TTagOperationIncrement` (3): Tag-Wert inkrementieren (numerische Erhöhung)

**Vorteile:**
- **Einzelner API-Aufruf**: Registrieren Sie mehrere Geräte und Kanäle auf einmal
- **Atomare Operation**: Alle Registrierungen gelingen oder scheitern gemeinsam
- **Benutzerzentriert**: Ordnet alle Geräte einem einzigen Benutzerprofil zu
- **Erweitertes Tagging**: Unterstützt komplexe Tag-Operationen
- **Plattformübergreifend**: Behandeln Sie mehrere Plattformen gleichzeitig

Beispiel für das Senden von Tags an Pushwoosh:

```javascript
Pushwoosh.push((api) => {
  var myCustomTags = {
    'Tag 1': 123,
    'Tag 2': 'some string'
  };
  api.setTags(myCustomTags)
    .then((res) => {
      var skipped = res && res.skipped || [];
      if (!skipped.length) {
        console.log('success');
      }
      else {
        console.warn('skipped tags:', skipped);
      }
    })
    .catch((err) => {
      console.error('setTags error:', err);
    });
});
```

### Tag-Wert inkrementieren

Um einen **Wert** eines Zahlen-Tags zu **inkrementieren**, verwenden Sie den `operation`-Parameter mit dem Wert 'increment' wie folgt:

```javascript
Pushwoosh.push((api) => {
  api.setTags({
    'Tag 1': {
      operation: 'increment',
      value: 1
    }
  })
});
```

### Tag-Werte anhängen

Um **neue Werte** an das bestehende Listen-Tag **anzuhängen**, verwenden Sie den `operation`-Parameter mit dem Wert 'append' wie folgt:

```javascript
Pushwoosh.push((api) => {
  api.setTags({
    'Tag 3': {
      operation: 'append',
      value: ['Value3']
    }
  })
});
```

### Tag-Wert entfernen

Um einen **Wert** aus einem Listen-Tag zu **entfernen**, verwenden Sie den `operation`-Parameter mit dem Wert 'remove' wie folgt:

```javascript
Pushwoosh.push((api) =>{
  api.setTags({
    'Tag 3': {
      operation: 'remove',
      value: ['Value2']
    }
  })
});
```

## Öffentliche Methoden

<Aside type="caution">
Bitte beachten Sie, dass die **automatische Anmeldung für Safari-Benutzer nicht verfügbar ist**. Bitte ziehen Sie in Betracht, Safari-Benutzer durch Aufrufen der `Pushwoosh.subscribe()`-Methode für Push-Benachrichtigungen anzumelden.
</Aside>

**Pushwoosh.subscribe()**

Diese Methode wird verwendet, um die Erlaubnis eines Benutzers für Push-Benachrichtigungen anzufordern. Wenn ein Benutzer bereits angemeldet ist, wird die Ausführung der Methode beendet.

Wenn ein Benutzer noch nicht für Pushes angemeldet ist:

1\. Die Erlaubnis für Push-Benachrichtigungen wird angefordert.

<img src="/web-push-notifications-web-push-sdk-3.0-1.webp" alt=""/>

2\. Wenn ein Benutzer Benachrichtigungen zulässt, wird das `onSubscribe`-Ereignis ausgelöst.

`Pushwoosh.subscribe()` wird automatisch ausgeführt, wenn `autoSubscribe: true`. während der SDK-Initialisierung gesetzt ist.

Rufen Sie diese Methode auf, wenn Sie sich entschieden haben, einen Benutzer manuell zur Anmeldung für Pushes aufzufordern, indem Sie den Parameter `autoSubscribe: false` während der Initialisierung verwenden:

```html
<button onclick="Pushwoosh.subscribe()">Subscribe</button>
<script>
  Pushwoosh.push(['onSubscribe', (api) => {
    console.log('User successfully subscribed');
  }]);
</script>
```

**Pushwoosh.unsubscribe()**

1. Die `/unregisterDevice`-Methode wird ausgeführt.
2. Das `onUnsubscribe`-Ereignis wird ausgelöst.

```html
<button onclick="Pushwoosh.unsubscribe()">Unsubscribe</button>
<script type="text/javascript">
  Pushwoosh.push(['onUnsubscribe', (api) => {
    console.log('User successfully unsubscribed');
  }]);
</script>
```

**Pushwoosh.isSubscribed()**

Prüft, ob ein Benutzer angemeldet ist und gibt ein true/false-Flag zurück.

```javascript
Pushwoosh.isSubscribed().then((isSubscribed) => {
  console.log('isSubscribed', isSubscribed);
});
```

**Pushwoosh.getHWID()**

Gibt die Pushwoosh HWID zurück.

```javascript
Pushwoosh.getHWID().then((hwid) => {
  console.log('hwid:', hwid);
});
```

**Pushwoosh.getPushToken()**

Gibt den Push-Token zurück, falls verfügbar.

```javascript
Pushwoosh.getPushToken().then((pushToken) => {
  console.log('pushToken:', pushToken);
});
```

**Pushwoosh.getUserId()**

Gibt die [**User ID**](/de/developer/pushwoosh-knowledge-hub/users-userids/users-userids/) zurück, falls verfügbar.

```javascript
Pushwoosh.getUserId().then((userId) => {
  console.log('userId:', userId);
});
```

**Pushwoosh.getParams()**

Gibt eine Liste der folgenden Parameter zurück:

```javascript
Pushwoosh.getParams().then((params) => {
  params = params || {};
  var hwid = params.hwid;
  var pushToken = params.pushToken;
  var userId = params.userId;
});
```

**Pushwoosh.isAvailableNotifications()**

Prüft, ob ein Browser das Pushwoosh WebSDK 3.0 unterstützt, gibt 'true' oder 'false' zurück.

```
Pushwoosh.isAvailableNotifications() // true/false
```

### InboxMessages-Methoden

**messagesWithNoActionPerformedCount(): Promise\<number>**

Gibt die Anzahl der geöffneten Nachrichten zurück.

```javascript
Pushwoosh.pwinbox.messagesWithNoActionPerformedCount()
  .then((count) => {
    console.log(`${count} messages opened`);
  });
```

**unreadMessagesCount()**

Gibt die Anzahl der ungelesenen Nachrichten zurück.

```javascript
Pushwoosh.pwinbox.unreadMessagesCount()
  .then((count) => {
    console.log(`${count} messages unread`);
  });
```

**messagesCount(): Promise\<number>**

Gibt die Gesamtzahl der Nachrichten zurück.

```javascript
Pushwoosh.pwinbox.messagesCount()
  .then((count) => {
    console.log(`${count} messages`);
  });
```

**loadMessages(): Promise\<Array>**

Lädt die Liste der nicht gelöschten Nachrichten.

```javascript
Pushwoosh.pwinbox.loadMessages()
  .then(() => {
    console.log('Messages have been loaded');
  });
```

**readMessagesWithCodes(codes: Array\<string>): Promise\<void>**

Markiert Nachrichten anhand von Inbox\_Ids als gelesen.

```javascript
Pushwoosh.pwinbox.readMessagesWithCodes(codes)
  .then(() => {
    console.log('Messages have been read');
  });
```

**performActionForMessageWithCode(code: string): Promise\<void>**

Führt die einer Nachricht zugewiesene Aktion aus und markiert die Nachricht als gelesen.

```javascript
Pushwoosh.pwinbox.performActionForMessageWithCode(code)
  .then(() => {
    console.log('Action has been performed');
  });
```

**deleteMessagesWithCodes(codes: Array\<string>): Promise\<void>**

Markiert Nachrichten als gelöscht.

```javascript
Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
  .then(() => {
    console.log('Messages have been deleted');
  });
```

**syncMessages(): Promise\<void>**

Synchronisiert Nachrichten mit dem Server.

```javascript
Pushwoosh.pwinbox.syncMessages()
  .then(() => {
    console.log('Messages have been synchronized');
  });
```

## Unterstützung für Progressive Web Apps

Um Pushwoosh in Ihre Progressive Web Application (PWA) zu integrieren, befolgen Sie die unten beschriebenen Schritte.

**1**. Kopieren Sie den Pfad zu Ihrer Service-Worker-Datei:

```javascript
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') // <- your service worker url
  });
}
```

Verwenden Sie dann den Parameter serviceWorkerUrl bei der Initialisierung des WebSDK wie folgt:

```javascript
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
  logLevel: 'error',
  applicationCode: 'XXXXX-XXXXX',
  safariWebsitePushID: 'web.com.example.domain',
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // <- your service worker url
}]);
```

Das WebSDK registriert den neuen Service Worker nicht sofort; ein Service Worker wird registriert, wenn er benötigt wird:

* wenn ein Gerät einen Push-Token erhält (bei der Geräteregistrierung oder erneuten Anmeldung),
* wenn ein Push-Token gelöscht wird (beim Entfernen eines Geräts aus der Benutzerbasis).

Es beschleunigt das Laden Ihrer Seiten, indem die Anzahl der Serveranfragen verkürzt wird.

Browser erlauben nicht, dass zwei verschiedene Service Worker gleichzeitig registriert werden (lesen Sie mehr: [https://github.com/w3c/ServiceWorker/issues/921](https://github.com/w3c/ServiceWorker/issues/921)), daher sollte für Ihre Codebasis und die Pushwoosh-Codebasis ein gemeinsamer Service Worker registriert werden, damit Ihre PWA korrekt funktioniert.

**2**. Fügen Sie die folgende Zeichenfolge zu Ihrem Service Worker hinzu (am Anfang oder am Ende, es spielt keine Rolle):

```javascript
importScripts('https://cdn.pushwoosh.com/webpush/v3/pushwoosh-service-worker.js' + self.location.search);
```

So ermöglichen Sie Ihrem Service Worker den Empfang und die Verarbeitung von Push-Benachrichtigungen, die über Pushwoosh-Dienste gesendet werden.

<Aside type="note">
Pushwoosh wird Ihre Codebasis nicht beeinträchtigen. Sie können unseren Service Worker jederzeit unter [https://github.com/Pushwoosh/web-push-notifications](https://github.com/Pushwoosh/web-push-notifications) einsehen.
</Aside>

## Installation über den Google Tag Manager

<Aside type="note">
Stellen Sie sicher, dass Sie die [Schritte 1 bis 4](#integration) dieser Anleitung befolgen, bevor Sie das Skript zum Google Manager Tag hinzufügen!
</Aside>

Verwenden Sie den folgenden Code in Ihrem **Google Tag Manager**, um das Pushwoosh SDK zu initialisieren. Erstellen Sie ein benutzerdefiniertes HTML-Tag und fügen Sie den folgenden Code ein. Stellen Sie sicher, dass Sie Ihren Pushwoosh Application Code, Ihre Safari Website ID und die URL des Standard-Benachrichtigungsbildes ändern.\
Setzen Sie außerdem eine hohe **Tag Firing**-Priorität (z. B. 100) und lösen Sie es auf **Allen Seiten** aus. Siehe unten für einen Screenshot.Kopieren

```html
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script type="text/javascript">
  var Pushwoosh = Pushwoosh || [];
  Pushwoosh.push(['init', {
    logLevel: 'error',
    applicationCode: 'XXXXX-XXXXX',
    safariWebsitePushID: 'web.com.example.domain',
    defaultNotificationTitle: 'Pushwoosh',
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
    autoSubscribe: true,
    subscribeWidget: {
      enable: false
    },
    userId: 'user_id'
  }]);
</script>
```

<img src="/web-push-notifications-web-push-sdk-3.0-2.webp" alt=""/>