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:

npm install web-push-notifications

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:

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:

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:

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', {...}]).
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

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

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

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

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