Notifications Web Push avec React et Pushpad

Ce tutoriel montre comment intégrer de manière transparente les notifications push Web dans votre application React à l'aide du SDK Pushpad. Nous allons créer un composant React simple : un bouton qui permet aux utilisateurs de s'abonner ou de se désinscrire des notifications push.

Configuration du SDK JavaScript Pushpad

Commencez par ajouter un fichier service-worker.js au répertoire racine de votre site Web. Ajoutez le code suivant à ce fichier :

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

Ensuite, incluez cet extrait de code dans votre site Web :

<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>

N'oubliez pas de remplacer PROJECT_ID par votre ID de projet réel à partir du tableau de bord Pushpad.

Remarque : La fonction init de Pushpad tente d'enregistrer service-worker.js. Si vous avez déjà enregistré un service worker, vous pouvez contourner cela en utilisant : pushpad('init', PROJECT_ID, { serviceWorkerPath: null });.

Fonctions du SDK Pushpad

Le SDK Pushpad fournit plusieurs fonctions utiles :

• pushpad('subscribe') : Abonne l'utilisateur et affiche l'invite d'autorisation du navigateur.
• pushpad('status') : Récupère l'état actuel de l'abonnement.
• pushpad('unsubscribe') : Désabonne l'utilisateur.
• pushpad('uid') : Authentifie les utilisateurs.
• pushpad('tags') : ajoute des données de ciblage.

Composant React : Un bouton d'abonnement/désabonnement

Voici le code React pour créer un bouton d'abonnement/désabonnement :

<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>

Ce composant vérifie l'état de l'abonnement, affiche le bouton approprié (« S'abonner » ou « Se désinscrire ») et gère les actions d'abonnement/désabonnement. Il fournit également une alerte conviviale si les notifications sont bloquées.

Envoi de notifications

Une fois que vous avez des abonnés, vous pouvez envoyer des notifications à l'aide du tableau de bord Pushpad (envoi manuel) ou par programmation via l'API Pushpad (en utilisant leur Node.js ou d'autres bibliothèques de langage). Cela vous permet d'envoyer des notifications même lorsque les utilisateurs ne sont pas activement sur votre site Web. Les exemples incluent les annonces de nouveaux articles de blog ou les promotions de commerce électronique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!