Web-Push-Benachrichtigungen mit React und Pushpad

Dieses Tutorial zeigt, wie Sie Web-Push-Benachrichtigungen mithilfe des Pushpad SDK nahtlos in Ihre React-Anwendung integrieren. Wir erstellen eine einfache React-Komponente: eine Schaltfläche, mit der Benutzer Push-Benachrichtigungen abonnieren oder abbestellen können.

Einrichten des Pushpad JavaScript SDK

Fügen Sie zunächst eine service-worker.js-Datei zum Stammverzeichnis Ihrer Website hinzu. Fügen Sie dieser Datei den folgenden Code hinzu:

<code class="language-javascript">importScripts('https://pushpad.xyz/service-worker.js');</code>

Fügen Sie als Nächstes dieses Code-Snippet in Ihre Website ein:

<code class="language-javascript">(function(p,u,s,h,x){p.pushpad=p.pushpad||function(){(p.pushpad.q=p.pushpad.q||[]).push(arguments)};h=u.getElementsByTagName('head')[0];x=u.createElement('script');x.async=1;x.src=s;h.appendChild(x);})(window,document,'https://pushpad.xyz/pushpad.js');

pushpad('init', PROJECT_ID);</code>

Denken Sie daran, PROJECT_ID durch Ihre tatsächliche Projekt-ID aus dem Pushpad-Dashboard zu ersetzen.

Hinweis: Die init-Funktion von Pushpad versucht, service-worker.js zu registrieren. Wenn Sie bereits einen Servicemitarbeiter registriert haben, können Sie dies umgehen, indem Sie Folgendes verwenden: pushpad('init', PROJECT_ID, { serviceWorkerPath: null });.

Pushpad SDK-Funktionen

Das Pushpad SDK bietet mehrere nützliche Funktionen:

• pushpad('subscribe'): Abonniert den Benutzer und zeigt die Berechtigungsaufforderung des Browsers an.
• pushpad('status'): Ruft den aktuellen Abonnementstatus ab.
• pushpad('unsubscribe'): Abmelden des Benutzers.
• pushpad('uid'): Authentifiziert Benutzer.
• pushpad('tags'): Fügt Targeting-Daten hinzu.

React-Komponente: Eine Schaltfläche zum Abonnieren/Abmelden

Hier ist der React-Code zum Erstellen einer Schaltfläche zum Abonnieren/Abmelden:

<code class="language-javascript">import React, { useState, useEffect } from 'react';

const PushSubscriptionButton = () => {
  const [subscribed, setSubscribed] = useState(null);

  useEffect(() => {
    pushpad('status', (isSubscribed) => {
      setSubscribed(isSubscribed);
    });
  }, []);

  const subscribe = () => {
    pushpad('subscribe', (isSubscribed) => {
      setSubscribed(isSubscribed);
      if (!isSubscribed) {
        alert('Notifications are blocked by browser settings.');
      }
    });
  };

  const unsubscribe = () => {
    pushpad('unsubscribe', () => {
      setSubscribed(false);
    });
  };

  if (subscribed === null) {
    return null;
  }

  return (
    subscribed ? (
      <button onClick={unsubscribe}>Unsubscribe</button>
    ) : (
      <button onClick={subscribe}>Subscribe</button>
    )
  );
};

export default PushSubscriptionButton;</code>

Diese Komponente prüft den Abonnementstatus, zeigt die entsprechende Schaltfläche („Abonnieren“ oder „Abbestellen“) an und verwaltet An-/Abmeldeaktionen. Es bietet auch eine benutzerfreundliche Warnung, wenn Benachrichtigungen blockiert sind.

Benachrichtigungen senden

Sobald Sie Abonnenten haben, können Sie Benachrichtigungen über das Pushpad-Dashboard (manuelles Senden) oder programmgesteuert über die Pushpad-API (mithilfe ihrer Node.js oder anderen Sprachbibliotheken) senden. Dadurch können Sie Benachrichtigungen senden, auch wenn Benutzer nicht aktiv auf Ihrer Website sind. Beispiele hierfür sind Ankündigungen neuer Blogbeiträge oder E-Commerce-Werbeaktionen.

Das obige ist der detaillierte Inhalt vonWeb-Push-Benachrichtigungen mit React und Pushpad. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!