Utilisation avec npm

Voici comment installer et utiliser le SDK de notifications Push Web Pushwoosh dans votre projet en utilisant npm. Ce guide suppose que vous avez une compréhension de base de npm et des importations de modules JavaScript.

npm install web-push-notifications

Lors de l’utilisation du SDK via npm, le fichier du service worker se trouve à l’emplacement suivant :

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

Important : Pendant votre processus de build ou de déploiement, vous devez copier ce fichier de service worker à la racine de votre site web. C’est une étape cruciale pour que les notifications push fonctionnent correctement.

Par exemple, dans un projet webpack, vous pouvez utiliser copy-webpack-plugin :

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

module.exports = {
  // ...autre configuration webpack
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/web-push-notifications/service-worker.js',
          to: 'service-worker.js' // Copie à la racine du répertoire de sortie
        }
      ]
    })
  ]
};

Si vous utilisez Vite, vous pouvez utiliser le plugin vite-plugin-static-copy :

import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  // ...autre configuration vite
  plugins: [
    // ...autres plugins
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/web-push-notifications/service-worker.js',
          dest: '' // Copie à la racine du répertoire de build
        }
      ]
    })
  ]
});

Pour d’autres systèmes de build, utilisez leurs mécanismes respectifs de copie de fichiers pour vous assurer que le service worker est disponible à la racine de votre site web.

Le SDK Web Pushwoosh est fourni avec quatre widgets d’interface utilisateur intégrés pour améliorer l’interaction avec l’utilisateur et simplifier le processus d’abonnement. Alors que le PWSubscriptionPromptWidget est principalement configuré via le Panneau de Contrôle Pushwoosh et les paramètres du navigateur, les trois autres widgets (PWSubscriptionButtonWidget, PWSubscribePopupWidget et PWInboxWidget) offrent des options de configuration détaillées directement dans la méthode init du SDK.

Voici un aperçu de chaque widget :

1. Invite d’abonnement (PWSubscriptionPromptWidget) Ce widget est responsable de l’affichage de l’invite native du navigateur pour demander aux utilisateurs la permission d’envoyer des notifications push. Son comportement est largement régi par les standards du navigateur et les paramètres configurés dans votre Panneau de Contrôle Pushwoosh. Il n’a pas de paramètres de configuration spécifiques dans l’appel pushwoosh.push(['init', {...}]).

2. Bouton d’abonnement (PWSubscriptionButtonWidget) Ce widget ajoute un bouton flottant (souvent une icône de cloche) à votre site, permettant aux utilisateurs de s’abonner facilement ou de gérer leurs préférences de notification.

• Configuration : Les paramètres de ce widget sont gérés sous l’objet subscribeWidget dans l’appel init.
• En savoir plus : Bouton d’abonnement Push

3. Pop-up d’abonnement personnalisé (PWSubscribePopupWidget) Un pop-up personnalisable qui offre une manière plus engageante de demander les autorisations de notification avant d’afficher l’invite native du navigateur.

• Configuration : Personnalisez son apparence et son comportement en utilisant l’objet subscribePopup dans l’appel init.
• En savoir plus : Pop-up d’abonnement personnalisé

4. Widget de boîte de réception (PWInboxWidget) Ce widget intègre un centre de messagerie in-app, permettant aux utilisateurs de consulter un historique des notifications push riches.

• Configuration : Gérée via l’objet inboxWidget dans l’appel init.
• En savoir plus : Widget de boîte de réception Web

Vous pouvez ensuite initialiser et exécuter ces widgets comme le montrent les exemples ci-dessous :

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', // votre code d'application Pushwoosh
  apiToken: 'XXXXXXX', // Jeton d'API de l'appareil
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // chemin vers votre service worker copié

  // Paramètres du pop-up d'abonnement personnalisé
  subscribePopup: {
    enable: true // Activer le pop-up d'abonnement
    // d'autres options peuvent être ajoutées ici
  },

  // Paramètres du bouton d'abonnement Push
  subscribeWidget: {
    enable: true // Activer le widget du bouton d'abonnement
    // d'autres options peuvent être ajoutées ici
  },

  // Paramètres du widget de boîte de réception
  inboxWidget: {
    enable: true // Activer le widget de boîte de réception
    // d'autres options peuvent être ajoutées ici
  }
}]);

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionPromptWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('L\'initialisation de PWSubscriptionPromptWidget a échoué :', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionButtonWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('L\'initialisation de PWSubscriptionButtonWidget a échoué :', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscribePopupWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('L\'initialisation de PWSubscribePopupWidget a échoué :', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWInboxWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('L\'initialisation de PWInboxWidget a échoué :', error);
  }
});

Voir un exemple d’application avec React et Vite : https://github.com/Pushwoosh/websdk-npm-vite-react-example