Nutzung mit npm

Pushwoosh Web Push SDK über npm installieren

Hier erfahren Sie, wie Sie das Pushwoosh Web Push Notifications SDK in Ihrem Projekt über 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 der 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' // Copies to output directory root
        }
      ]
    })
  ]
};

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

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: '' // Copies to build output root
        }
      ]
    })
  ]
});

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 innerhalb der init-Methode des SDK.

Hier ist eine Übersicht über jedes Widget:

Abonnement-Aufforderung (PWSubscriptionPromptWidget) Dieses Widget ist dafür verantwortlich, die native Browser-Aufforderung anzuzeigen, um Benutzer um Erlaubnis zum Senden von Push-Benachrichtigungen zu bitten. Sein Verhalten wird weitgehend durch Browserstandards und Einstellungen im Pushwoosh Control Panel gesteuert. Es hat keine spezifischen Konfigurationsparameter innerhalb des pushwoosh.push(['init', {...}])-Aufrufs.
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 subscribeWidget-Objekt im init-Aufruf verwaltet.
Erfahren Sie mehr: Push-Abonnement-Schaltfläche

Benutzerdefiniertes Abonnement-Popup (PWSubscribePopupWidget) Ein anpassbares Pop-up, das eine ansprechendere Möglichkeit bietet, um Benachrichtigungsberechtigungen zu bitten, bevor die native Browser-Aufforderung angezeigt wird.

Konfiguration: Passen Sie sein Aussehen und Verhalten mit dem subscribePopup-Objekt im init-Aufruf an.
Erfahren Sie mehr: Benutzerdefiniertes Abonnement-Popup

Inbox-Widget (PWInboxWidget) Dieses Widget integriert ein In-App-Nachrichtencenter, das Benutzern ermöglicht, eine Historie von Rich Push-Benachrichtigungen anzuzeigen.

Konfiguration: Verwaltet über das inboxWidget-Objekt im init-Aufruf.
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', // your Pushwoosh Application Code
  apiToken: 'XXXXXXX', // Device API Token
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // path to your copied service worker

  // Custom Subscription Popup settings
  subscribePopup: {
    enable: true // Enable the subscription popup
    // other options can be added here
  },

  // Push subscription button settings
  subscribeWidget: {
    enable: true // Enable the subscription button widget
    // other options can be added here
  },

  // Inbox widget settings
  inboxWidget: {
    enable: true // Enable the inbox widget
    // 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