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

```bash title="Installer le SDK de notifications Push Web de Pushwoosh"
npm install web-push-notifications
```

<Aside type="caution" title="Note importante sur le versioning du SDK (v3.45.0+)">
  À partir de la version **3.45.0**, le SDK Web de Pushwoosh a introduit une approche modulaire pour l'importation du SDK principal et de ses widgets d'interface utilisateur.

  - **Importations séparées :** Vous devez maintenant importer la classe principale `Pushwoosh` et tous les widgets souhaités (comme `PWSubscriptionButtonWidget`, `PWSubscribePopupWidget`, etc.) séparément. Avant cette version, tous les composants étaient généralement regroupés en une seule importation.
  - **Compilation ES2020 :** Le SDK est compilé selon la spécification JavaScript ES2020 à partir de cette version. Veuillez vous assurer que votre environnement de build et vos navigateurs cibles prennent en charge les fonctionnalités ES2020.
</Aside>

### 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` :

```javascript
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` :


```javascript
// vite.config.js
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 :

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](/fr/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/)

3.  **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é](/fr/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/)

4.  **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](/fr/developer/pushwoosh-sdk/web-push-notifications/web-inbox-widget/)

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

### Importer et initialiser

```javascript title="Importer et initialiser Pushwoosh"
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