# Verwendung mit npm

## Installation des Pushwoosh Web Push SDK über npm

Hier erfahren Sie, wie Sie das Pushwoosh Web Push Notifications SDK in Ihrem Projekt mit npm installieren und verwenden.
Diese Anleitung setzt ein grundlegendes Verständnis von npm und JavaScript-Modulimporten voraus.

### SDK installieren:

```bash title="Pushwoosh Web Push Notifications SDK installieren"
npm install web-push-notifications
```

<Aside type="caution" title="Wichtiger Hinweis zur SDK-Versionierung (v3.45.0+)">
  Ab Version **3.45.0** führt das Pushwoosh Web SDK einen modularen Ansatz für den Import des Core SDK und seiner UI-Widgets ein.

  - **Separate Importe:** Sie müssen nun die Hauptklasse `Pushwoosh` und alle gewünschten Widgets (wie `PWSubscriptionButtonWidget`, `PWSubscribePopupWidget` usw.) separat importieren. Vor dieser Version wurden alle Komponenten typischerweise in einem einzigen Import gebündelt.
  - **ES2020-Kompilierung:** Das SDK wird ab dieser Version nach der JavaScript-Spezifikation ES2020 kompiliert. Bitte stellen Sie sicher, dass Ihre Build-Umgebung und die Zielbrowser ES2020-Funktionen unterstützen.
</Aside>

### Service Worker-Einrichtung

Bei Verwendung des SDK über npm befindet sich die Service Worker-Datei unter:

```
node_modules/web-push-notifications/service-worker.js
```

**Wichtig:** Während Ihres Build- oder Bereitstellungsprozesses müssen Sie diese Service Worker-Datei in das Stammverzeichnis Ihrer Website kopieren. Dies ist entscheidend, damit Push-Benachrichtigungen korrekt funktionieren.

In einem webpack-Projekt können Sie beispielsweise `copy-webpack-plugin` verwenden:

```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/web-push-notifications/service-worker.js',
          to: 'service-worker.js' // Kopiert in das Stammverzeichnis des Ausgabeverzeichnisses
        }
      ]
    })
  ]
};
```

Wenn Sie Vite verwenden, können Sie das Plugin `vite-plugin-static-copy` verwenden:

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  // ...other vite config
  plugins: [
    // ...other plugins
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/web-push-notifications/service-worker.js',
          dest: '' // Kopiert in das Stammverzeichnis der Build-Ausgabe
        }
      ]
    })
  ]
});
```
Für andere Build-Systeme verwenden Sie deren jeweilige Dateikopiermechanismen, um sicherzustellen, dass der Service Worker im Stammverzeichnis Ihrer Website verfügbar ist.

### Integrierte Widgets

Das Pushwoosh Web SDK enthält vier integrierte UI-Widgets, um die Benutzerinteraktion zu verbessern und den Abonnementprozess zu optimieren. Während das `PWSubscriptionPromptWidget` hauptsächlich über das Pushwoosh Control Panel und die Browsereinstellungen konfiguriert wird, bieten die anderen drei Widgets (`PWSubscriptionButtonWidget`, `PWSubscribePopupWidget` und `PWInboxWidget`) detaillierte Konfigurationsoptionen direkt in der `init`-Methode des SDK.

Hier ist eine Übersicht über jedes Widget:

1.  **Abonnement-Prompt (`PWSubscriptionPromptWidget`)**
Dieses Widget ist für die Anzeige des nativen Browser-Prompts verantwortlich, um Benutzer um Erlaubnis zum Senden von Push-Benachrichtigungen zu bitten. Sein Verhalten wird weitgehend durch Browserstandards und im Pushwoosh Control Panel konfigurierte Einstellungen bestimmt. Es hat keine spezifischen Konfigurationsparameter innerhalb des Aufrufs `pushwoosh.push(['init', {...}])`.

2.  **Abonnement-Schaltfläche (`PWSubscriptionButtonWidget`)**
Dieses Widget fügt Ihrer Website eine schwebende Schaltfläche (oft ein Glockensymbol) hinzu, die es Benutzern ermöglicht, Benachrichtigungseinstellungen einfach zu abonnieren oder zu verwalten.
*   **Konfiguration:** Die Einstellungen für dieses Widget werden unter dem Objekt `subscribeWidget` im `init`-Aufruf verwaltet.
*   **Erfahren Sie mehr:** [Push-Abonnement-Schaltfläche](/de/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/)

3.  **Benutzerdefiniertes Abonnement-Popup (`PWSubscribePopupWidget`)**
Ein anpassbares Popup, das eine ansprechendere Möglichkeit bietet, um Benachrichtigungsberechtigungen zu bitten, bevor der native Browser-Prompt angezeigt wird.
*   **Konfiguration:** Passen Sie das Erscheinungsbild und Verhalten mithilfe des Objekts `subscribePopup` im `init`-Aufruf an.
*   **Erfahren Sie mehr:** [Benutzerdefiniertes Abonnement-Popup](/de/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/)

4.  **Inbox-Widget (`PWInboxWidget`)**
Dieses Widget integriert ein In-App-Nachrichtencenter, das Benutzern ermöglicht, einen Verlauf von Rich Push-Benachrichtigungen anzuzeigen.
*   **Konfiguration:** Wird über das Objekt `inboxWidget` im `init`-Aufruf verwaltet.
*   **Erfahren Sie mehr:** [Web-Inbox-Widget](/de/developer/pushwoosh-sdk/web-push-notifications/web-inbox-widget/)

Sie können diese Widgets dann wie in den folgenden Beispielen gezeigt initialisieren und ausführen:

### Importieren und Initialisieren

```javascript title="Pushwoosh importieren und initialisieren"
import { Pushwoosh } from 'web-push-notifications';
import { PWSubscriptionPromptWidget } from 'web-push-notifications/widget-subscription-prompt';
import { PWSubscriptionButtonWidget } from 'web-push-notifications/widget-subscription-button';
import { PWSubscribePopupWidget } from 'web-push-notifications/widget-subscribe-popup';
import { PWInboxWidget } from 'web-push-notifications/widget-inbox';

const pushwoosh = new Pushwoosh();

pushwoosh.push(['init', {
  applicationCode: 'XXXXX-XXXXX', // Ihr Pushwoosh Application Code
  apiToken: 'XXXXXXX', // Device API Token
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // Pfad zu Ihrem kopierten Service Worker

  // Einstellungen für benutzerdefiniertes Abonnement-Popup
  subscribePopup: {
    enable: true // Abonnement-Popup aktivieren
    // other options can be added here
  },

  // Einstellungen für Push-Abonnement-Schaltfläche
  subscribeWidget: {
    enable: true // Abonnement-Schaltflächen-Widget aktivieren
    // other options can be added here
  },

  // Einstellungen für Inbox-Widget
  inboxWidget: {
    enable: true // Inbox-Widget aktivieren
    // other options can be added here
  }
}]);

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionPromptWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscriptionPromptWidget initialization failed:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionButtonWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscriptionButtonWidget initialization failed:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscribePopupWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscribePopupWidget initialization failed:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWInboxWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWInboxWidget initialization failed:', error);
  }
});
```

## Links

Siehe eine Beispielanwendung mit React und Vite: https://github.com/Pushwoosh/websdk-npm-vite-react-example