Utilisation avec npm

Installation du SDK Push Web de Pushwoosh via npm

Voici comment installer et utiliser le SDK de notifications Push Web de 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.

Installer le SDK :

npm install web-push-notifications

Configuration du Service Worker

Lorsque vous utilisez le 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 crucial 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 de la sortie de build
        }
      ]
    })
  ]
});

Pour les 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.

Widgets intégrés

Le SDK Web de Pushwoosh est fourni avec quatre widgets d’interface utilisateur intégrés pour améliorer l’interaction de l’utilisateur et simplifier le processus d’abonnement. Alors que le PWSubscriptionPromptWidget est principalement configuré via le Panneau de Contrôle de 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 :

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

Popup d’abonnement personnalisé (PWSubscribePopupWidget) Un pop-up personnalisable qui offre un moyen plus engageant 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 : Popup d’abonnement personnalisé

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

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

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

Importer et initialiser

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);
  }
});

Liens

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