> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration du SDK Web

> Ajoutez des notifications push web OneSignal à votre site web avec le SDK JavaScript, la configuration du service worker et la configuration du tableau de bord.

export const SdkReleasesIframe = ({sdkFilter = undefined, viewMode = undefined, height, ...frameProps}) => {
  const baseUrl = 'https://onesignal.github.io/sdk-releases';
  const buildUrl = (theme, sdkFilter, viewMode) => {
    const url = new URL(baseUrl);
    const params = new URLSearchParams();
    if (theme) {
      params.set('theme', theme);
    }
    if (sdkFilter) {
      params.set('sdk', sdkFilter);
    }
    if (viewMode) {
      params.set('viewMode', viewMode);
    }
    if (params.toString()) {
      url.search = params.toString();
    }
    return url.toString();
  };
  const detectTheme = () => {
    if (document.documentElement.classList.contains('dark')) {
      return 'dark';
    }
    return 'light';
  };
  const [theme, setTheme] = useState('light');
  const [iframeSrc, setIframeSrc] = useState(() => {
    const initialTheme = detectTheme();
    return buildUrl(initialTheme, sdkFilter, viewMode);
  });
  useEffect(() => {
    const currentTheme = detectTheme();
    setTheme(currentTheme);
    setIframeSrc(buildUrl(currentTheme, sdkFilter, viewMode));
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleThemeChange = () => {
      const newTheme = detectTheme();
      setTheme(newTheme);
      setIframeSrc(buildUrl(newTheme, sdkFilter, viewMode));
    };
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handleThemeChange);
    } else {
      mediaQuery.addListener(handleThemeChange);
    }
    window.addEventListener('storage', handleThemeChange);
    const observer = new MutationObserver(handleThemeChange);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class', 'data-theme']
    });
    return () => {
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', handleThemeChange);
      } else {
        mediaQuery.removeListener(handleThemeChange);
      }
      window.removeEventListener('storage', handleThemeChange);
      observer.disconnect();
    };
  }, [sdkFilter, viewMode]);
  const getIframeHeight = () => {
    if (viewMode === 'table') {
      return '450';
    }
    if (viewMode === 'mini') {
      return '170';
    }
    return '800';
  };
  const iframeHeight = height || getIframeHeight();
  return <Frame {...frameProps}>
      <iframe src={iframeSrc} width="100%" height={iframeHeight} frameBorder="0" style={{
    border: "none"
  }} title="SDK Releases" key={iframeSrc} />
    </Frame>;
};

<SdkReleasesIframe sdkFilter="react,vue,vue3,angular,wordpress" viewMode="table" height="380" />

## Aperçu

Ce guide vous explique comment ajouter des notifications push web OneSignal à votre site — de la configuration du tableau de bord à l'installation du SDK. OneSignal prend en charge Chrome, Firefox, Edge, Safari et [les autres principaux navigateurs](./web-push-setup-faq).

***

## Exigences

* Site web HTTPS : Le push web ne fonctionne pas sur HTTP ou en modes incognito/privé.
* Accès au serveur : Vous devrez télécharger un fichier service worker sur votre site.
* Origine unique : Le push web suit la [politique de même origine](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). Si vous avez plusieurs origines (domaines/sous-domaines), vous aurez besoin de plusieurs applications OneSignal (une par origine). Pour vous conformer à cette limitation du navigateur, vous pouvez soit :
  * Rediriger le trafic vers une origine unique pour les abonnements.
  * Créer plusieurs applications OneSignal—une par origine.

<Note>
  Si votre équipe a déjà créé un compte avec OneSignal, [demandez à être invité en tant qu'administrateur](./manage-team-members) afin de pouvoir configurer l'application. Sinon, inscrivez-vous pour un compte gratuit sur [onesignal.com](https://onesignal.com) pour commencer !
</Note>

***

## Configurer votre application et plateforme OneSignal

Dans le tableau de bord OneSignal :

* Allez dans **Paramètres > Push et intégrés > Web**.

<Frame caption="Activez la plateforme web dans vos paramètres OneSignal">
  <img src="https://mintcdn.com/onesignal/KPVdijCt4_xCbkO8/images/dashboard/web-push-platform-activation.png?fit=max&auto=format&n=KPVdijCt4_xCbkO8&q=85&s=beba7df5d3a4ad5545311951da0f03d2" alt="Page Paramètres du tableau de bord OneSignal affichant l'activation de la plateforme Web" width="1188" height="597" data-path="images/dashboard/web-push-platform-activation.png" />
</Frame>

Sélectionnez le type d'intégration :

<Columns cols={3}>
  <Card title="Site typique (recommandé)">
    Gérez les invites et les paramètres directement via le tableau de bord OneSignal sans codage supplémentaire.
  </Card>

  <Card title="WordPress" href="./wordpress" arrow={true}>
    Requis si vous utilisez WordPress avec notre plugin officiel.
  </Card>

  <Card title="Code personnalisé" href="./web-push-custom-code-setup" arrow={true}>
    Pour les développeurs qui ont besoin d'un contrôle total sur les invites et la configuration du SDK.
  </Card>
</Columns>

### Configuration du site

Ajoutez les détails du site :

* **Nom du site** : Le nom de votre site et le titre de notification par défaut.
* **URL du site** : L'URL de votre site. Voir [URL du site](#site-url) pour plus de détails.
* **Réabonnement automatique** : Activez cette option pour réabonner automatiquement les utilisateurs qui effacent leurs données de navigateur lorsqu'ils retournent sur votre site (aucune nouvelle invite d'autorisation requise)
* **URL de l'icône par défaut** : Téléchargez une image PNG ou JPG carrée de 256x256px qui apparaît dans les notifications et les invites. Si elle n'est pas définie, nous utilisons une cloche pour l'icône par défaut.

<Frame caption="Paramètres web dans le tableau de bord OneSignal">
  <img src="https://mintcdn.com/onesignal/uaUYB-ILUGPSRvKB/images/docs/web-push-site-settings.png?fit=max&auto=format&n=uaUYB-ILUGPSRvKB&q=85&s=893a536c16cb4c439bc8fe53892861da" alt="Configuration push web OneSignal affichant le nom du site, l'URL et les paramètres d'icône" width="2072" height="712" data-path="images/docs/web-push-site-settings.png" />
</Frame>

#### URL du site

Entrez l'[origine](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) exacte de votre site, par ex., `https://votredomaine.com`. Évitez d'utiliser `www.` si votre site n'est pas configuré de cette façon.

Si vous avez plusieurs origines :

* Redirigez vers une origine unique.
* Ou configurez une application OneSignal par origine.

#### Tests locaux

Notre SDK web peut être testé sur des environnements localhost. Si vous testez sur localhost, nous recommandons de configurer une application OneSignal différente de votre application de production.

<Accordion title="Configuration localhost" icon="circle-chevron-down">
  Définissez l'**URL DU SITE** pour qu'elle corresponde exactement à l'URL de votre environnement localhost. Elle doit être une URL localhost courante, exemples :

  * `http://localhost`
  * `https://localhost:3000`
  * `http://127.0.0.1`
  * `https://127.0.0.1:5000`

  <Note>
    Si votre localhost utilise HTTP, sélectionnez **Traiter HTTP localhost comme HTTPS pour les tests**.

    Google Chrome traite `http://localhost` et `http://127.0.0.1` comme des origines sécurisées, permettant les intégrations HTTPS même sur HTTP. C'est pourquoi vous ne pouvez pas tester d'autres origines non standard sur HTTPS localhost.
  </Note>

  <Frame caption="Tests locaux dans le tableau de bord OneSignal">
    <img src="https://mintcdn.com/onesignal/56ctKxZSV4m5VEkn/images/docs/b7f98cead1dcfb39b8887e66f61bb58649891b3cbfb5a051897391e5d324dc56-Screenshot_2024-10-25_at_1.53.11_PM.png?fit=max&auto=format&n=56ctKxZSV4m5VEkn&q=85&s=c46d81db4be53243526d961eba527b9c" alt="Configuration localhost OneSignal avec l'option Traiter HTTP localhost comme HTTPS" width="2072" height="712" data-path="images/docs/b7f98cead1dcfb39b8887e66f61bb58649891b3cbfb5a051897391e5d324dc56-Screenshot_2024-10-25_at_1.53.11_PM.png" />
  </Frame>

  #### Ajouter `allowLocalhostAsSecureOrigin` à vos options `init` OneSignal

  Lors de l'initialisation de OneSignal sur votre site localhost, ajoutez `allowLocalhostAsSecureOrigin: true,` à vos options `init` OneSignal.

  De plus, si vous testez localhost sur HTTPS avec un certificat auto-signé, vous devrez peut-être demander à Chrome d'ignorer les certificats invalides pour les tests avec : ` --allow-insecure-localhost`. Firefox et Safari fournissent des mécanismes intégrés pour ajouter des exceptions pour les certificats de sécurité.

  ```html theme={null}
    <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
    <script>
      window.OneSignalDeferred = window.OneSignalDeferred || [];
      OneSignalDeferred.push(function(OneSignal) {
        OneSignal.init({
          appId: "YOUR_OS_APP_ID",
          allowLocalhostAsSecureOrigin: true,
        });
      });
    </script>
  ```
</Accordion>

### Invite d'autorisation

La configuration de site typique vous permet, à vous ou aux membres de votre équipe, d'ajouter, de supprimer et de mettre à jour les invites d'autorisation via le tableau de bord OneSignal à tout moment.

<Card title="Invites d'autorisation web" icon="bell" href="./permission-requests" arrow={true}>
  Configurez quand et comment la boîte de dialogue d'autorisation du navigateur apparaît à vos utilisateurs.
</Card>

### Notification de bienvenue (optionnel)

Vous pouvez également définir une notification de bienvenue à envoyer aux utilisateurs lorsqu'ils s'abonnent aux notifications push.

### Paramètres avancés

Fonctionnalités supplémentaires configurables dans le tableau de bord OneSignal.

#### Webhooks

Notre SDK web fournit la capacité de `POST` certains événements push web vers une URL de votre choix.

Les webhooks push web sont une implémentation distincte des [webhooks d'événements](./event-streams) et ne peuvent pas être utilisés de manière interchangeable.

<Card title="Webhooks push web" icon="webhook" href="./webhooks">
  Envoyez des événements push web à votre serveur via des requêtes POST.
</Card>

#### Service workers

À la page suivante de la configuration push web, vous recevrez le fichier service worker `OneSignalSDKWorker.js`.

Notre SDK web cherche par défaut ce fichier à la racine de votre site. Si vous souhaitez modifier l'emplacement, le nom et/ou la portée de notre fichier service worker, c'est ici que vous pouvez mettre à jour ces paramètres.

* **Chemin vers les fichiers service worker** est le chemin vers le répertoire où vous placerez ces fichiers.
* **Noms de fichiers service worker principal et de mise à jour** peut simplement être `OneSignalSDKWorker.js` ou si vous souhaitez renommer ce fichier. Doit utiliser l'extension de fichier `.js`.
* **Portée d'enregistrement du service worker** sont les pages sur lesquelles ce fichier peut fonctionner. Pour les notifications push, cela n'a pas d'importance et a été initialement conçu pour les cas où vous souhaitez ajouter plus de fonctionnalités au fichier service worker. Vous devriez définir ceci comme le même chemin que votre emplacement.

<Frame caption="Configuration du service worker">
  <img src="https://mintcdn.com/onesignal/0qspEXXeJ8zJbkJ-/images/docs/862419b594a5a0f7f77b8ed4199cae82d6db5d4d421024f6b553ca5b30e3ea00-Screenshot_2024-10-25_at_2.44.04_PM.png?fit=max&auto=format&n=0qspEXXeJ8zJbkJ-&q=85&s=13f219cd99022bdea5ecbdd2fb6a8f1c" alt="Champs de configuration du chemin, du nom de fichier et de la portée du service worker" width="1214" height="566" data-path="images/docs/862419b594a5a0f7f77b8ed4199cae82d6db5d4d421024f6b553ca5b30e3ea00-Screenshot_2024-10-25_at_2.44.04_PM.png" />
</Frame>

Avec cet exemple, vous devriez voir le code du fichier accessible publiquement à `https://votredomaine.com/push/onesignal/OneSignalSDKWorker.js`

<Card title="Service worker OneSignal" icon="gear" href="./onesignal-service-worker">
  Configuration avancée du service worker, intégration personnalisée et migration depuis d'autres fournisseurs.
</Card>

#### Comportement de clic

Contrôlez comment les utilisateurs naviguent vers l'[URL](./links) que vous définissez lorsqu'ils cliquent sur la notification.

Si l'utilisateur n'a pas votre site ouvert dans aucun onglet, le navigateur ouvre un nouvel onglet et navigue vers l'URL de la notification. Si l'utilisateur a déjà votre site ouvert, le comportement dépend du paramètre que vous choisissez :

| Paramètre                          | Correspond à                               | Action                                                            |
| ---------------------------------- | ------------------------------------------ | ----------------------------------------------------------------- |
| **Navigation exacte** (par défaut) | URL exacte (par ex. `example.com/product`) | Navigue vers l'URL de la notification dans l'onglet correspondant |
| **Navigation d'origine**           | Origine (par ex. `example.com`)            | Navigue vers l'URL de la notification dans l'onglet correspondant |
| **Focus exact**                    | URL exacte                                 | Se concentre sur l'onglet correspondant sans rafraîchir           |
| **Focus d'origine**                | Origine                                    | Se concentre sur l'onglet correspondant sans rafraîchir           |

#### Persistance

Le comportement push web par défaut est qu'elles apparaissent sur l'appareil pendant environ 5 secondes avant d'être déplacées vers le Centre de notifications où elles sont conservées pendant environ 1 semaine avant d'être supprimées par le système d'exploitation.

Certains appareils et versions de Chrome et Edge vous permettent de persister les notifications plus longtemps à l'écran. Cela signifie que la notification restera à l'écran jusqu'à ce que l'utilisateur interagisse avec elle. **Cela pourrait ennuyer vos utilisateurs et n'est pas recommandé.** De plus, si vous activez la persistance, cela affectera la façon dont les notifications apparaissent aux abonnés en réduisant le nombre de caractères et peut affecter la façon dont les images et les boutons sont affichés.

Lors de leur modification, elles ne prendront effet que pour les abonnés qui visitent le site avec les paramètres mis à jour. Si vous ne voyez pas ces options changer, vous devrez attendre

#### Certificat Safari (optionnel)

OneSignal fournit automatiquement les certificats nécessaires pour fonctionner avec les navigateurs Safari sans coût supplémentaire. Si vous avez déjà vos propres certificats push web Safari, activez cette option pour télécharger votre `certificat push Safari Web .p12` et mot de passe.

<Frame caption="Configuration du certificat Safari">
  <img src="https://mintcdn.com/onesignal/RWtLFPeffHrC81wI/images/docs/a515412b69ecdd249c610e4e833cf3f1169b70b7a25075f5311c27bcc9b8ed10-Screenshot_2024-10-25_at_2.59.27_PM.png?fit=max&auto=format&n=RWtLFPeffHrC81wI&q=85&s=2dc2354ec6ec21a71f090cd63e5a149d" alt="Bouton et champs de téléchargement du certificat push web Safari" width="1208" height="406" data-path="images/docs/a515412b69ecdd249c610e4e833cf3f1169b70b7a25075f5311c27bcc9b8ed10-Screenshot_2024-10-25_at_2.59.27_PM.png" />
</Frame>

***

## Télécharger le fichier service worker

Ajoutez le fichier service worker `OneSignalSDKWorker.js` à votre site. Téléchargez-le depuis le tableau de bord OneSignal ou [depuis GitHub](https://github.com/OneSignal/OneSignal-Website-SDK/files/11480764/OneSignalSDK-v16-ServiceWorker.zip).

<Frame caption="Étape de téléchargement du fichier service worker">
  <img src="https://mintcdn.com/onesignal/3zq1PvSaqvUE2bIx/images/docs/30d6d942cb4f6be59443b121ea226f50196995e56cb9e16586031475de66d15f-Screenshot_2024-10-25_at_3.54.04_PM.png?fit=max&auto=format&n=3zq1PvSaqvUE2bIx&q=85&s=f94e408fb2ecbfd3ecefda65e9839dd3" alt="Étape de téléchargement et de configuration du fichier service worker OneSignal" width="1742" height="416" data-path="images/docs/30d6d942cb4f6be59443b121ea226f50196995e56cb9e16586031475de66d15f-Screenshot_2024-10-25_at_3.54.04_PM.png" />
</Frame>

Placez ce fichier dans le répertoire racine de votre site ou dans un sous-répertoire. Si vous le placez dans un sous-répertoire, vous devrez définir le **Chemin vers les fichiers service worker** dans la section [Paramètres avancés > Service workers](#service-workers).

Une fois le fichier sur votre serveur, vérifiez ce qui suit pour vous assurer qu'il fonctionne :

<Steps>
  <Step title="Vérifier l'emplacement">
    Assurez-vous que le fichier est situé dans le même **Chemin vers les fichiers service worker** que défini dans [Paramètres avancés > Service workers](#service-workers). Si vous n'avez pas mis à jour ces paramètres, vous devriez avoir mis le fichier à votre racine. Par exemple :

    * `https://votredomaine.com/OneSignalSDKWorker.js`
    * `https://votredomaine.com/un-sous-repertoire/OneSignalSDKWorker.js`
  </Step>

  <Step title="Il doit être accessible publiquement sur votre origine">
    Le fichier `OneSignalSDKWorker.js` doit être accessible publiquement et disponible sur votre origine. Il ne peut pas être hébergé via un CDN ou placé sur une origine différente avec redirection.

    Lorsque vous visitez l'URL du fichier, vous devriez voir le code.
  </Step>

  <Step title="Il doit être servi avec un content-type: application/javascript">
    C'est un fichier javascript et doit être servi comme tel. Il ne peut pas avoir un content-type de text/html.
  </Step>
</Steps>

<Card title="Service worker OneSignal" icon="gear" href="./onesignal-service-worker" arrow={true}>
  Configuration avancée et migration depuis d'autres fournisseurs de push web.
</Card>

## Ajouter du code à votre site

Le code SDK JavaScript ci-dessous fonctionne sur n'importe quel site. Si votre site est construit avec [Angular](./angular-setup), [React JS](./react-js-setup) ou [Vue JS](./vue-js-setup), suivez ces liens.

Pour initialiser OneSignal sur votre site avec notre SDK JavaScript, copiez/collez le code fourni dans les balises `<head>` de votre site web. Le tableau de bord OneSignal fournit ce même extrait pré-rempli avec votre [ID d'application](./keys-and-ids).

```javascript theme={null}
  <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
  <script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(async function(OneSignal) {
      await OneSignal.init({
        appId: "YOUR_ONESIGNAL_APP_ID",
      });
    });
  </script>
```

### Support du push web iOS

Apple a commencé à prendre en charge les notifications push web sur les iPhones et iPads exécutant iOS 16.4+. Contrairement aux appareils Android où le push web "fonctionne" simplement tant qu'il est visité sur un navigateur pris en charge, Apple a ajouté quelques exigences supplémentaires telles qu'un fichier `manifest.json` et une action utilisateur pour ajouter votre site à leur écran d'accueil.

<Card title="Configuration du push web iOS" icon="apple" href="./web-push-for-ios" arrow={true}>
  Ajoutez le fichier `manifest.json` requis et guidez les utilisateurs pour ajouter votre site à leur écran d'accueil.
</Card>

***

## Tester l'intégration du SDK OneSignal

Ce guide vous aide à vérifier que votre intégration du SDK OneSignal fonctionne correctement en testant les notifications push et l'enregistrement des abonnements.

### Vérifier les abonnements web push

<Steps>
  <Step title="Lancez votre site sur un appareil de test.">
    * Utilisez Chrome, Firefox, Edge ou Safari pendant les tests.
    * **N'utilisez pas le mode Navigation privée ou Incognito.** Les utilisateurs ne peuvent pas s'abonner aux notifications push dans ces modes.
    * Les invites devraient apparaître en fonction de votre configuration des [invites de permission](/docs/en/permission-requests).
    * Cliquez sur **Autoriser** dans l'invite native pour vous abonner aux notifications push.

    <Frame caption="Invite de permission native web push">
      <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/push/web-push-native-permission-prompt.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=91c15dd6677de6a0ba37da20449ccca1" alt="Invite de permission native du navigateur demandant à l'utilisateur d'autoriser ou bloquer les notifications" width="1724" height="974" data-path="images/push/web-push-native-permission-prompt.png" />
    </Frame>
  </Step>

  <Step title="Vérifiez votre tableau de bord OneSignal">
    * Allez dans **Audience > Subscriptions**.
    * Vous devriez voir une nouvelle entrée avec le statut **Subscribed**.

    <Frame caption="Tableau de bord affichant un abonnement avec le statut 'Subscribed'">
      <img src="https://mintcdn.com/onesignal/KPVdijCt4_xCbkO8/images/dashboard/web-push-subscription-status.png?fit=max&auto=format&n=KPVdijCt4_xCbkO8&q=85&s=786e9c5e4131f01fef20d11bebd1a3d0" alt="Page Abonnements du tableau de bord OneSignal affichant un abonnement web push avec le statut Subscribed" width="1188" height="742" data-path="images/dashboard/web-push-subscription-status.png" />
    </Frame>

    <Check>Vous avez créé avec succès un [abonnement web push](/docs/en/subscriptions).
    Les abonnements web push sont créés lorsque les utilisateurs s'abonnent pour la première fois aux notifications push sur votre site.</Check>
  </Step>
</Steps>

### Configurer les abonnements de test

Les abonnements de test sont utiles pour tester une notification push avant d'envoyer un message.

<Steps>
  <Step title="Ajouter aux abonnements de test.">
    Dans le tableau de bord, à côté de l'abonnement, cliquez sur le bouton **Options (trois points)** et sélectionnez **Add to Test Users**.

    <Frame caption="Ajout d'un appareil aux abonnements de test">
      <img src="https://mintcdn.com/onesignal/NCUI56Tiw7V-s0dT/images/dashboard/add-to-test-subscriptions.png?fit=max&auto=format&n=NCUI56Tiw7V-s0dT&q=85&s=2455d4cd74ea4ad686f76730cd95bbaa" alt="Menu d'options sur un abonnement affichant l'option Ajouter aux abonnements de test" width="1188" height="742" data-path="images/dashboard/add-to-test-subscriptions.png" />
    </Frame>
  </Step>

  <Step title="Nommez votre abonnement.">
    Nommez l'abonnement afin de pouvoir identifier facilement votre appareil plus tard dans l'**onglet Test Users**.
  </Step>

  <Step title="Créer un segment d'utilisateurs de test.">
    Allez dans **Audience > Segments > New Segment**.
  </Step>

  <Step title="Nommez le segment.">
    Nommez le segment `Test Users` (le nom est important car il sera utilisé plus tard).
  </Step>

  <Step title="Ajoutez le filtre Test Users et cliquez sur Create Segment.">
    <Frame caption="Création d'un segment 'Test Users' avec le filtre Test Users">
      <img src="https://mintcdn.com/onesignal/NCUI56Tiw7V-s0dT/images/dashboard/create-test-users-segment.png?fit=max&auto=format&n=NCUI56Tiw7V-s0dT&q=85&s=91b8a021be6e83662854e68ec3e1da04" alt="Éditeur de segment avec le filtre Test Users sélectionné et le segment nommé Test Users" width="1188" height="742" data-path="images/dashboard/create-test-users-segment.png" />
    </Frame>

    <Check>Vous avez créé avec succès un segment d'utilisateurs de test.
    Nous pouvons maintenant tester l'envoi de messages à cet appareil individuel et à des groupes d'utilisateurs de test.</Check>
  </Step>
</Steps>

### Envoyer un push de test via l'API

<Steps>
  <Step title="Obtenez votre clé API d'application et votre ID d'application.">
    Dans votre tableau de bord OneSignal, allez dans **Settings > [Keys & IDs](/docs/en/keys-and-ids)**.
  </Step>

  <Step title="Mettez à jour le code fourni.">
    Remplacez `YOUR_APP_API_KEY` et `YOUR_APP_ID` dans le code ci-dessous par vos clés réelles. Ce code utilise le segment `Test Users` que nous avons créé plus tôt.

    ```curl theme={null}
    curl -X \
    POST --url 'https://api.onesignal.com/notifications' \
     --header 'content-type: application/json; charset=utf-8' \
     --header 'authorization: Key YOUR_APP_API_KEY' \
     --data \
     '{
      "app_id": "YOUR_APP_ID",
      "target_channel": "push",
      "name": "Testing basic setup",
      "headings": {
      	"en": "👋"
      },
      "contents": {
        "en": "Hello world!"
      },
      "included_segments": [
        "Test Users"
      ],
      "chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
    }'
    ```
  </Step>

  <Step title="Exécutez le code.">
    Exécutez le code dans votre terminal.
  </Step>

  <Step title="Vérifiez les images et la livraison confirmée.">
    Si toutes les étapes de configuration ont été complétées avec succès, les abonnements de test devraient recevoir une notification.

    <Warning>Seul Chrome prend en charge les images. Les images apparaîtront petites dans la vue de notification réduite. Développez la notification pour voir l'image complète.</Warning>

    <Frame caption="Notification push développée avec image sur Chrome macOS">
      <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/push/web-push-image.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=8dd90279daff9e24d3fd281e73aa1e74" alt="Notification push développée sur Chrome macOS affichant une image personnalisée" width="740" height="896" data-path="images/push/web-push-image.png" />
    </Frame>
  </Step>

  <Step title="Vérifiez la livraison confirmée.">
    Dans votre tableau de bord, allez dans **Delivery > Sent Messages**, puis cliquez sur le message pour afficher les statistiques. Vous devriez voir la statistique **confirmed**, ce qui signifie que l'appareil a reçu la push.

    <Note>Safari ne prend pas en charge la Livraison confirmée.</Note>

    <Card title="Rapports de messages de notifications push" icon="chart-bar" href="/docs/en/push-notification-message-reports">
      Consultez les statistiques de livraison, de clics et de conversion pour vos notifications push.
    </Card>
  </Step>
</Steps>

<Check>Vous avez envoyé avec succès une notification via l'API à un segment.</Check>

Si les notifications n'arrivent pas, contactez `support@onesignal.com` avec les éléments suivants :

* La requête et la réponse API (copiez-collez dans un fichier `.txt`)
* Votre Subscription ID
* L'URL de votre site Web avec le code OneSignal

***

## Identification des utilisateurs

La section précédente a couvert la création d'[Abonnements](/docs/en/subscriptions) web push. Cette section s'étend à l'identification des [Utilisateurs](/docs/en/users) sur tous leurs abonnements (y compris push, email et SMS) en utilisant le SDK OneSignal. Elle couvre les External IDs, les tags, les abonnements multicanaux, la confidentialité et le suivi des événements pour vous aider à unifier et engager les utilisateurs sur toutes les plateformes.

### Attribuer un External ID

Utilisez un External ID pour identifier les utilisateurs de manière cohérente sur tous les appareils, adresses e-mail et numéros de téléphone en utilisant l'identifiant utilisateur de votre backend. Cela garantit que votre messagerie reste unifiée sur tous les canaux et systèmes tiers (particulièrement important pour les [Intégrations](/docs/en/integrations)).

Définissez l'External ID avec la [méthode `login`](/docs/en/web-sdk-reference#login-external-id) du SDK chaque fois qu'un utilisateur est identifié par votre application.

<Note>
  OneSignal génère des ID uniques en lecture seule pour les abonnements (Subscription ID) et les utilisateurs (OneSignal ID).

  Lorsque les utilisateurs téléchargent votre application sur différents appareils, s'abonnent à votre site Web et/ou vous fournissent des adresses e-mail et des numéros de téléphone en dehors de votre application, de nouveaux abonnements seront créés.

  La définition de l'External ID via le SDK est fortement recommandée pour identifier les utilisateurs sur tous leurs abonnements, quelle que soit la façon dont ils sont créés.
</Note>

### Ajouter des tags de données

Les [Tags](/docs/en/add-user-data-tags) sont des paires clé-valeur de données chaîne que vous pouvez utiliser pour stocker les propriétés des utilisateurs (comme `username`, `role` ou les préférences) et les événements (comme `purchase_date`, `game_level` ou les interactions utilisateur). Les tags alimentent la [Personnalisation des messages](/docs/en/message-personalization) et la [Segmentation](/docs/en/segmentation) avancées permettant des cas d'utilisation plus avancés.

Définissez les tags avec les [méthodes `addTag` et `addTags`](/docs/en/web-sdk-reference#addtag-%2C-addtags) du SDK au fur et à mesure que les événements se produisent dans votre application.

Dans cet exemple, l'utilisateur a atteint le niveau 6 identifiable par le tag appelé `current_level` défini sur une valeur de `6`.

<Frame caption="Un profil utilisateur dans OneSignal avec un tag appelé &#x22;current_level&#x22; défini sur &#x22;6&#x22;">
  <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/d4674261847231079fecc176ba88065409c90943e3854b9df200457325a0aed4-Screenshot_2025-03-18_at_14.47.25.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=91083bf83a4c03ea40d485b23f072259" width="1380" height="941" data-path="images/docs/d4674261847231079fecc176ba88065409c90943e3854b9df200457325a0aed4-Screenshot_2025-03-18_at_14.47.25.png" />
</Frame>

Nous pouvons créer un segment d'utilisateurs ayant un niveau entre 5 et 10, et l'utiliser pour envoyer des messages ciblés et personnalisés :

<Frame caption="Éditeur de segment montrant un segment ciblant les utilisateurs avec une valeur current_level supérieure à 4 et inférieure à 10">
  <img src="https://mintcdn.com/onesignal/3zq1PvSaqvUE2bIx/images/docs/300d36b632a6f6d7017780457bbe2610b71767fd0db093c7611e59714dcbda5b-Screenshot_2025-03-18_at_14.49.56.png?fit=max&auto=format&n=3zq1PvSaqvUE2bIx&q=85&s=b84ab0d2c6eedbd6d4e7a2bf15afe103" width="1380" height="941" data-path="images/docs/300d36b632a6f6d7017780457bbe2610b71767fd0db093c7611e59714dcbda5b-Screenshot_2025-03-18_at_14.49.56.png" />
</Frame>

<br />

<Frame caption="Capture d'écran montrant une notification push ciblant le segment Niveau 5-10 avec un message personnalisé">
  <img src="https://mintcdn.com/onesignal/tc0EvmtSSX56SX0c/images/docs/97e09b42d25c6d3f4c7cb0a6fff4dfb8893cbb4b283f7ff1f77977c33113319c-Screenshot_2025-03-18_at_14.55.47.png?fit=max&auto=format&n=tc0EvmtSSX56SX0c&q=85&s=c7839b12057d65a12a4eaddce6e2c11f" width="2764" height="2286" data-path="images/docs/97e09b42d25c6d3f4c7cb0a6fff4dfb8893cbb4b283f7ff1f77977c33113319c-Screenshot_2025-03-18_at_14.55.47.png" />
</Frame>

### Ajouter des abonnements email et/ou SMS

Le SDK OneSignal crée automatiquement des abonnements web push lorsque les utilisateurs optent pour les recevoir. Vous pouvez également atteindre les utilisateurs via les canaux email et SMS en créant les abonnements correspondants.

* Utilisez la [méthode `addEmail`](/docs/en/web-sdk-reference#addemail-%2C-removeemail) pour créer des abonnements email.
* Utilisez la [méthode `addSms`](/docs/en/web-sdk-reference#addsms-%2C-removesms) pour créer des abonnements SMS.

Si l'adresse e-mail et/ou le numéro de téléphone existent déjà dans l'application OneSignal, le SDK l'ajoutera à l'utilisateur existant, il ne créera pas de doublons.

Vous pouvez afficher les utilisateurs unifiés via **Audience > Users** dans le tableau de bord ou avec l'[API View user](/reference/view-user).

<Frame caption="Un profil utilisateur avec des abonnements push, email et SMS unifiés par External ID">
  <img src="https://mintcdn.com/onesignal/56ctKxZSV4m5VEkn/images/docs/b1cf9999d41da6e4ce333e1126612529b85eac47447bb0b434418d082f595acd-Screenshot_2025-03-18_at_14.43.46.png?fit=max&auto=format&n=56ctKxZSV4m5VEkn&q=85&s=7c3885b66e44e097fa0ed7c47f27c911" width="1506" height="848" data-path="images/docs/b1cf9999d41da6e4ce333e1126612529b85eac47447bb0b434418d082f595acd-Screenshot_2025-03-18_at_14.43.46.png" />
</Frame>

<Note>
  Meilleures pratiques pour la communication multicanale

  * Obtenez un consentement explicite avant d'ajouter des abonnements email ou SMS.
  * Expliquez les avantages de chaque canal de communication aux utilisateurs.
  * Fournissez des préférences de canal afin que les utilisateurs puissent sélectionner les canaux qu'ils préfèrent.
</Note>

***

### Confidentialité et consentement de l'utilisateur

Pour contrôler quand OneSignal collecte les données utilisateur, utilisez les méthodes de contrôle du consentement du SDK :

* [`setConsentRequired(true)`](/docs/en/web-sdk-reference#setconsentrequired) : Empêche la collecte de données jusqu'à ce que le consentement soit donné.
* [`setConsentGiven(true)`](/docs/en/web-sdk-reference#setconsentgiven) : Active la collecte de données une fois le consentement accordé.

Pour en savoir plus sur la confidentialité et la sécurité :

<Columns cols={2}>
  <Card title="Données collectées par le SDK" icon="database" href="/docs/en/data-collected-by-the-onesignal-sdk">
    Examinez les données que le SDK OneSignal collecte auprès des utilisateurs.
  </Card>

  <Card title="Gestion des données personnelles" icon="shield-halved" href="/docs/en/handling-personal-data">
    Gérez et protégez les données utilisateur conformément aux réglementations sur la confidentialité.
  </Card>
</Columns>

***

## Écouter les événements push, utilisateur et in-app

Utilisez les écouteurs du SDK pour réagir aux actions des utilisateurs et aux changements d'état.

Le SDK fournit plusieurs écouteurs d'événements auxquels vous pouvez vous connecter. Consultez notre [guide de référence du SDK](/docs/en/web-sdk-reference) pour plus de détails.

### Événements de notification push

* [Écouteur d'événement de clic](/docs/en/web-sdk-reference#click) : Détecter quand une notification est tapée.
* [Écouteur du cycle de vie au premier plan](/docs/en/web-sdk-reference#foregroundwilldisplay) : Contrôler comment les notifications se comportent au premier plan.

### Changements d'état de l'utilisateur

* [Écouteur d'événement de changement d'état utilisateur](/docs/en/web-sdk-reference#addeventlistener-user-state) : Détecter quand l'External ID est défini.
* [Observateur de permission](/docs/en/web-sdk-reference#permissionchange) : Suivre l'interaction spécifique de l'utilisateur avec l'invite d'autorisation push native.
* [Observateur de changement d'abonnement push](/docs/en/web-sdk-reference#addeventlistener-push-subscription-changes) : Suivre quand le statut de l'abonnement push change.

***

## Configuration avancée et capacités

Explorez davantage de capacités pour améliorer votre intégration :

<Columns cols={3}>
  <Card title="Migrer vers OneSignal" icon="rotate" href="/docs/en/migrating-to-onesignal">
    Passez d'un autre fournisseur de push à OneSignal.
  </Card>

  <Card title="Intégrations" icon="plug" href="/docs/en/integrations">
    Connectez OneSignal avec des outils et plateformes tiers.
  </Card>

  <Card title="Boutons d'action" icon="bell" href="/docs/en/action-buttons">
    Ajoutez des boutons interactifs aux notifications push.
  </Card>

  <Card title="Messagerie multilingue" icon="globe" href="/docs/en/multi-language-messaging">
    Envoyez des messages localisés aux utilisateurs dans leur langue préférée.
  </Card>

  <Card title="Vérification d'identité" icon="shield-check" href="/docs/en/identity-verification">
    Sécurisez votre intégration SDK avec la vérification d'identité côté serveur.
  </Card>

  <Card title="Résultats personnalisés" icon="chart-line" href="/docs/en/custom-outcomes">
    Suivez les événements de conversion personnalisés liés à vos messages.
  </Card>
</Columns>

### Configuration et référence du SDK Web

<Columns cols={2}>
  <Card title="Configuration web push" icon="gear" href="/docs/en/web-push-setup">
    Activez toutes les fonctionnalités clés de web push pour votre intégration.
  </Card>

  <Card title="Référence du SDK Web" icon="code" href="/docs/en/web-sdk-reference">
    Détails complets sur les méthodes disponibles et les options de configuration.
  </Card>
</Columns>

<Check>Félicitations ! Vous avez terminé avec succès le guide de configuration du SDK Web.</Check>

***

***

## FAQ

### Le push web fonctionne-t-il sur les sites HTTP ?

Non. Le push web requiert HTTPS. Les navigateurs l'imposent comme exigence de sécurité. La seule exception est `localhost` et `127.0.0.1`, que les navigateurs traitent comme des origines sécurisées à des fins de développement.

### Pourquoi ai-je besoin d'un fichier service worker ?

Le service worker s'exécute en arrière-plan et gère les notifications push entrantes même lorsque l'utilisateur n'a pas votre site ouvert. Sans lui, le navigateur ne peut pas afficher les notifications. Le fichier `OneSignalSDKWorker.js` doit être accessible publiquement sur votre origine.

### Puis-je utiliser le push web sur iOS (iPhone/iPad) ?

Oui, à partir d'iOS 16.4+. Cependant, Apple exige un fichier `manifest.json` et l'utilisateur doit d'abord ajouter votre site à son écran d'accueil. Consultez [Configuration du push web iOS](./web-push-for-ios) pour les exigences complètes.

### Pourquoi mes notifications ne s'affichent-elles pas ?

Les causes courantes incluent un fichier service worker mal placé, une URL de site incorrecte dans le tableau de bord, ou l'utilisateur ayant bloqué les notifications dans les paramètres de son navigateur. Consultez [Notifications non affichées ou retardées](./notifications-show-successful-but-are-not-being-shown) pour une liste de vérification complète de dépannage.

***

<Info>
  Besoin d'aide ?

  Discutez avec notre équipe d'assistance ou envoyez un e-mail à `support@onesignal.com`

  Veuillez inclure :

  * Les détails du problème que vous rencontrez et les étapes de reproduction si disponibles
  * Votre OneSignal App ID
  * L'External ID ou le Subscription ID le cas échéant
  * L'URL du message que vous avez testé dans le OneSignal Dashboard le cas échéant
  * Tous les [journaux ou messages d'erreur](/docs/en/capturing-a-debug-log) pertinents

  Nous serons ravis de vous aider !
</Info>

***
