Configuration du SDK Web

Ajoutez le push web OneSignal à votre site en configurant le tableau de bord, en téléversant un service worker et en initialisant le SDK JavaScript. OneSignal prend en charge Chrome, Firefox, Edge, Safari et les autres principaux navigateurs. Si vous utilisez WordPress ou Shopify, suivez l’intégration de plateforme au lieu de ce guide du SDK JavaScript. Si vous avez besoin d’une personnalisation plus poussée, des invites, des options init et du chemin du service worker dans le code, utilisez Custom Code.

Configuration WordPress

Installez le plugin officiel OneSignal. Le plugin ajoute le SDK et le service worker pour vous.

Configuration Shopify

Connectez Shopify via l’intégration Vendo. Vendo déploie le SDK sur votre boutique sans modifier le code du thème.

Configuration Custom Code

Définissez les invites, les options d’initialisation et le chemin du service worker dans OneSignal.init().

Si votre site est construit avec Angular, React ou Vue, utilisez le guide du framework correspondant au lieu de l’extrait de cette page.

Exigences

Site web HTTPS : Le push web ne fonctionne pas sur HTTP ou en modes incognito/privé.
Accès au serveur : Vous devez téléverser un fichier service worker sur votre site.
Origine unique : Le push web suit la politique de même origine. Si vous avez plusieurs origines (domaines/sous-domaines), vous avez 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.

Si votre équipe a déjà créé un compte avec OneSignal, demandez à être invité avec un rôle d’administrateur afin de pouvoir configurer l’application. Sinon, inscrivez-vous pour un compte gratuit sur onesignal.com pour commencer.

Configurer votre application et plateforme OneSignal

Dans le tableau de bord OneSignal :

Allez dans Settings > Push & In-App > Web.

Page Paramètres du tableau de bord OneSignal affichant l'activation de la plateforme Web — Activez la plateforme web dans vos paramètres OneSignal

Sélectionnez le type d’intégration :

Site typique (recommandé)

Gérez les invites et les paramètres directement via le tableau de bord OneSignal sans codage supplémentaire.

WordPress

Requis si vous utilisez WordPress avec notre plugin officiel.

Code personnalisé

Pour les développeurs qui ont besoin d’un contrôle total sur les invites et la configuration du SDK.

Configuration du site

Ajoutez les détails du site :

Site Name : Le nom de votre site et le titre de notification par défaut.
Site URL : L’URL de votre site. Voir URL du site pour plus de détails.
Auto Resubscribe : Activez cette option pour réabonner automatiquement les utilisateurs qui effacent leurs données de navigateur lorsqu’ils reviennent sur votre site (aucune nouvelle invite d’autorisation requise).
Default Icon URL : Téléversez une image PNG, JPG ou GIF non animé carrée de 256×256 qui apparaît dans les notifications et les invites. Si elle n’est pas définie, une icône de cloche est utilisée par défaut. Voir Icônes de notification.

Si les utilisateurs effacent leurs données de navigateur, ils cessent de recevoir des notifications push jusqu’à leur retour. Activez Auto Resubscribe pour qu’ils soient réabonnés sans nouvelle invite d’autorisation. Voir Abonnements.

Configuration push web OneSignal affichant le nom du site, l'URL et les paramètres d'icône — Paramètres web dans le tableau de bord OneSignal

URL du site

Entrez l’origine exacte de votre site, par ex. https://yourdomain.com. Évitez d’utiliser www. si votre site n’est pas configuré de cette façon. Si vous avez plusieurs origines, voir Exigences.

Tests locaux

Le SDK web peut être testé sur des environnements localhost. Si vous testez sur localhost, utilisez une application OneSignal distincte de votre application de production.

Configuration localhost

Définissez la SITE URL pour qu’elle corresponde exactement à l’URL de votre environnement localhost. L’URL doit correspondre à l’un de ces formats localhost courants :

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

Si votre URL localhost utilise HTTP, sélectionnez Treat HTTP localhost as HTTPS for testing. Chrome traite http://localhost et http://127.0.0.1 comme des origines sécurisées, donc le SDK peut s’initialiser sur HTTP uniquement sur ces hôtes. Les autres noms d’hôte (par exemple http://mysite.local) ne sont pas traités comme sécurisés et ne peuvent pas être utilisés pour tester le push web.

Configuration localhost OneSignal avec l'option Traiter HTTP localhost comme HTTPS — Tests locaux dans le tableau de bord OneSignal

Ajoutez allowLocalhostAsSecureOrigin: true à vos options init OneSignal lors de l’initialisation sur localhost.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

<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",
      allowLocalhostAsSecureOrigin: true,
    });
  });
</script>

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.

Invites d'autorisation web

Configurez quand et comment la boîte de dialogue d’autorisation du navigateur apparaît à vos utilisateurs.

Notification de bienvenue (optionnel)

Vous pouvez également définir une notification de bienvenue à envoyer aux utilisateurs lorsqu’ils s’abonnent aux notifications push. Les configurations Site typique et WordPress la définissent dans le tableau de bord. La configuration Custom Code définit welcomeNotification dans OneSignal.init(). Pour la définir dans le tableau de bord, allez dans Settings > Push & In-App > Web :

Configuration de la notification de bienvenue

Pour les configurations Custom Code, consultez les paramètres welcomeNotification dans la référence du SDK Web.

Paramètres avancés

Les fonctionnalités suivantes sont configurables dans le tableau de bord OneSignal.

Webhooks

Le SDK web peut envoyer via 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 et ne peuvent pas être utilisés de manière interchangeable.

Webhooks push web

Envoyez des événements push web à votre serveur via des requêtes POST.

Service workers

Le SDK Web cherche OneSignalSDKWorker.js à la racine de votre site (https://yourdomain.com/OneSignalSDKWorker.js) sauf si vous lui indiquez un autre emplacement. La façon d’indiquer au SDK un emplacement autre que la racine dépend du type d’intégration que vous avez sélectionné. Site typique : Définissez le chemin dans le tableau de bord. Ne définissez pas serviceWorkerPath dans le code. Si vous hébergez le fichier à la racine, laissez les paramètres de chemin par défaut. Si vous l’hébergez dans un sous-répertoire, vous devez définir le chemin ci-dessous, sinon le SDK continue de demander /OneSignalSDKWorker.js et l’enregistrement échoue.

Allez dans Settings > Push & In-App > Web.
Ouvrez Advanced Push Settings.
Activez Customize service worker paths and filenames.
Définissez les champs pour correspondre à l’URL publique du fichier :

Champ	Que saisir	Exemple
Path to service worker files	Répertoire où vous hébergerez le fichier.	`/push/onesignal/`
Service worker filename	Le nom de fichier `.js`. Si le tableau de bord affiche également un nom de fichier de mise à jour, définissez les deux champs sur le même fichier.	`OneSignalSDKWorker.js`
Service worker registration scope	Même chemin que l’emplacement du fichier.	`/push/onesignal/`

Champs de configuration du chemin, du nom de fichier et de la portée du service worker — Configuration du service worker

Avec les valeurs d’exemple ci-dessus, le fichier doit être accessible publiquement à https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js. Custom Code : N’utilisez pas les champs de chemin du tableau de bord. Passez serviceWorkerPath et serviceWorkerParam dans OneSignal.init(). Consultez la configuration Custom Code pour les options d’initialisation, et Service worker OneSignal pour la combinaison de workers et la migration.

Comportement de clic

Le comportement de clic ne change que ce qui se passe lorsque l’utilisateur a déjà votre site ouvert dans un onglet de même origine. Si aucun onglet correspondant n’est ouvert, le navigateur ouvre un nouvel onglet vers l’URL de la notification. Ce paramètre ne change pas cela. Le comportement de clic fonctionne sur Chrome, Edge, Firefox et Safari. Si aucune URL de lancement n’est définie, l’URL de la notification est votre page d’accueil. Définissez une URL de lancement pour envoyer les utilisateurs vers une page spécifique, ajouter un suivi UTM, ou ajoutez ?_osp=do_not_open pour fermer la notification sans ouvrir de page. Si un onglet de même origine est déjà ouvert, le comportement dépend du paramètre que vous choisissez :

Paramètre	Correspond à	Action
Exact Navigate (par défaut)	URL exacte (par ex. `example.com/product`)	Navigue vers l’URL de la notification dans l’onglet correspondant
Origin Navigate	Origine (par ex. `example.com`)	Navigue vers l’URL de la notification dans l’onglet correspondant
Exact Focus	URL exacte	Met le focus sur l’onglet correspondant sans rafraîchir
Origin Focus	Origine	Met le focus sur l’onglet correspondant sans rafraîchir

URL, liens et liens profonds

Dirigez les utilisateurs vers une page spécifique, ajoutez un suivi UTM ou fermez la notification avec ?_osp=do_not_open.

Boutons d'action

Permettez aux utilisateurs d’effectuer une action depuis la notification sans utiliser le clic par défaut.

Écouteurs d'événements push du SDK Web

Écoutez les événements de clic et exécutez un comportement dans l’application avec du code personnalisé.

Persistance

La persistance maintient la notification à l’écran jusqu’à ce que l’utilisateur interagisse avec elle. Elle fonctionne uniquement sur Chrome et Edge sur ordinateur. Firefox, Safari et tous les navigateurs mobiles l’ignorent. Une notification persistante peut réduire l’espace pour le texte, les images et les boutons d’action, vous pouvez donc vouloir la désactiver si cela pose problème à vos utilisateurs. Lorsque la valeur n’est pas définie, le SDK traite actuellement la persistance comme activée.

Site typique : Utilisez le bouton bascule Persistence dans Settings > Push & In-App > Web.
Custom Code : Définissez persistNotification dans OneSignal.init(). Le bouton bascule du tableau de bord ne s’applique pas. Voir persistNotification.

Les modifications de la persistance ne prennent effet que pour les abonnés qui visitent votre site après la mise à jour. Si vous ne voyez pas le changement, attendez que les abonnés revisitent votre site ou demandez-leur d’effacer leurs données de navigateur.

Certificat Safari Web Push .p12 (optionnel, legacy)

Laissez cette option désactivée sauf si vous avez déjà votre propre certificat Safari Web Push .p12 et souhaitez prendre en charge les utilisateurs Safari legacy. Safari moderne (macOS 13+ et iOS 16.4+) utilise le Web Push basé sur les standards avec VAPID (Voluntary Application Server Identification). OneSignal gère VAPID automatiquement. Vous ne téléversez pas de certificat pour ces navigateurs. Apple ne propose pas de jeton ou de clé .p8 pour le push web Safari. Les applications natives iOS et macOS utilisent un .p8 pour s’authentifier auprès d’APNs. Le push web Safari ne le fait pas. Le seul identifiant Apple qui s’applique à Safari est un certificat Safari Web Push .p12, et uniquement pour le chemin legacy Website Push ID. Ce chemin legacy s’applique encore à :

Safari sur macOS 12 et versions antérieures (pas de VAPID)
Les abonnés existants qui ont déjà accordé l’autorisation via l’ancienne API Safari (Safari ne migre pas ces abonnements vers VAPID)

OneSignal peut toujours fournir un certificat pour ce chemin legacy résiduel. Un .p12 fourni par le client n’est pas utilisé pour les nouveaux abonnés sur Safari 16.4+ (macOS 13+ ou iOS 16.4+). Ces abonnements utilisent VAPID. Si vous avez déjà votre propre certificat, activez Safari Web Push .p12 certificate (optional, advanced) dans Settings > Push & In-App > Web > Advanced Push Settings. Téléversez le fichier .p12 et son mot de passe. Site typique et Custom Code définissent tous deux ceci dans le tableau de bord. Vous ne le définissez pas dans OneSignal.init().

Bouton bascule et champs de téléversement du certificat Safari Web Push .p12 dans Advanced Push Settings — Certificat Safari Web Push .p12 (optionnel, legacy)

Téléverser le fichier service worker

Ajoutez le fichier service worker OneSignalSDKWorker.js à votre site. Téléchargez-le depuis le tableau de bord OneSignal, ou créez un fichier nommé OneSignalSDKWorker.js avec cette seule ligne :

importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

Étape de téléchargement et de configuration du fichier service worker OneSignal — Étape de téléversement du fichier service worker

Le SDK Web cherche ce fichier à la racine de votre site sauf indication contraire. Cette page concerne Site typique, vous faites donc correspondre l’emplacement du fichier dans le tableau de bord. Si vous avez sélectionné Custom Code, définissez plutôt le chemin dans OneSignal.init(). Consultez la configuration Custom Code. Racine (par défaut) : Téléversez le fichier pour qu’il soit disponible à https://yourdomain.com/OneSignalSDKWorker.js. Laissez les paramètres de chemin du service worker inchangés. Le SDK demande cette URL automatiquement. Sous-répertoire : Si votre site a déjà un service worker (par exemple une PWA), placez le fichier de OneSignal dans un sous-répertoire tel que /push/onesignal/ pour qu’il n’entre pas en conflit avec le worker qui possède /. Indiquez ensuite au SDK où chercher : suivez Service workers et activez Customize service worker paths and filenames. Définissez Path to service worker files et Service worker registration scope sur ce sous-répertoire (par exemple /push/onesignal/). Le fichier doit être accessible publiquement à https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js.

Si le fichier n’est pas à la racine du site et que vous ne définissez pas ces champs du tableau de bord, le SDK continue de récupérer https://yourdomain.com/OneSignalSDKWorker.js et l’enregistrement du service worker échoue. Les configurations Custom Code doivent définir serviceWorkerPath dans OneSignal.init() au lieu de ces champs du tableau de bord.

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

Vérifier l'emplacement

Visitez l’URL que le SDK est configuré pour utiliser. Si vous avez laissé les paramètres par défaut, cette URL est la racine du site. Si vous avez personnalisé le chemin, elle doit correspondre à Path to service worker files plus le nom du fichier :

Par défaut : https://yourdomain.com/OneSignalSDKWorker.js
Exemple de sous-répertoire : https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js

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.

Il doit être servi avec un content-type: application/javascript

C’est un fichier JavaScript et il doit être servi comme tel. Il ne peut pas avoir un content-type de text/html.

Service worker OneSignal

Configuration avancée et migration depuis d’autres fournisseurs de push web.

Ajouter du code à votre site

Pour initialiser OneSignal sur votre site avec le SDK JavaScript, copiez 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. Si vous chargez vos scripts avec Google Tag Manager, arrêtez-vous ici et suivez la configuration Google Tag Manager. Ce guide utilise cette même configuration du tableau de bord et du service worker, puis initialise le SDK dans GTM au lieu de coller l’extrait ci-dessous.

HTML

<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 dans un navigateur pris en charge sans configuration supplémentaire, Apple exige un fichier manifest.json et une action utilisateur pour ajouter votre site à leur écran d’accueil.

Configuration du push web iOS

Ajoutez le fichier manifest.json requis et guidez les utilisateurs pour ajouter votre site à leur écran d’accueil.

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

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.
Cliquez sur Autoriser dans l’invite native pour vous abonner aux notifications push.

Invite de permission native du navigateur demandant à l'utilisateur d'autoriser ou bloquer les notifications — Invite de permission native web push

Vérifiez votre tableau de bord OneSignal

Allez dans Audience > Subscriptions.
Vous devriez voir une nouvelle entrée avec le statut Subscribed.

Vous avez créé avec succès un abonnement web push. Les abonnements web push sont créés lorsque les utilisateurs s’abonnent pour la première fois aux notifications push sur votre site.

Configurer les abonnements de test

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

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.

Nommez votre abonnement.

Nommez l’abonnement afin de pouvoir identifier facilement votre appareil plus tard dans l’onglet Test Users.

Créer un segment d'utilisateurs de test.

Allez dans Audience > Segments > New Segment.

Nommez le segment.

Nommez le segment Test Users (le nom est important car il sera utilisé plus tard).

Ajoutez le filtre Test Users et cliquez sur Create Segment.

Éditeur de segment avec le filtre Test Users sélectionné et le segment nommé Test Users — Création d'un segment 'Test Users' avec le filtre Test Users

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.

Envoyer un push de test via l’API

Obtenez votre clé API d'application et votre ID d'application.

Dans votre tableau de bord OneSignal, allez dans Settings > Keys & IDs.

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 -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"
}'

Exécutez le code.

Exécutez le code dans votre terminal.

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.

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.

Notification push développée sur Chrome macOS affichant une image personnalisée — Notification push développée avec image sur Chrome macOS

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.

Safari ne prend pas en charge la Livraison confirmée.

Rapports de messages de notifications push

Consultez les statistiques de livraison, de clics et de conversion pour vos notifications push.

Vous avez envoyé avec succès une notification via l’API à un segment.

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 web push. Cette section s’étend à l’identification des Utilisateurs 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). Définissez l’External ID avec la méthode login du SDK chaque fois qu’un utilisateur est identifié par votre application.

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.

Ajouter des tags de données

Les 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 et la Segmentation avancées permettant des cas d’utilisation plus avancés. Définissez les tags avec les méthodes addTag et 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.

Un profil utilisateur dans OneSignal avec un tag appelé "current_level" défini sur "6"

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 :

Éditeur de segment montrant un segment ciblant les utilisateurs avec une valeur current_level supérieure à 4 et inférieure à 10

Capture d'écran montrant une notification push ciblant le segment Niveau 5-10 avec un message personnalisé

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 pour créer des abonnements email.
Utilisez la méthode addSms 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.

Un profil utilisateur avec des abonnements push, email et SMS unifiés par External ID

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.

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) : Empêche la collecte de données jusqu’à ce que le consentement soit donné.
setConsentGiven(true) : Active la collecte de données une fois le consentement accordé.

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

Données collectées par le SDK

Examinez les données que le SDK OneSignal collecte auprès des utilisateurs.

Gestion des données personnelles

Gérez et protégez les données utilisateur conformément aux réglementations sur la confidentialité.

É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 pour plus de détails.

Événements de notification push

Écouteur d’événement de clic : Détecter quand une notification est tapée.
Écouteur du cycle de vie au premier plan : 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 : Détecter quand l’External ID est défini.
Observateur de permission : Suivre l’interaction spécifique de l’utilisateur avec l’invite d’autorisation push native.
Observateur de changement d’abonnement push : 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 :

Migrer vers OneSignal

Passez d’un autre fournisseur de push à OneSignal.

Intégrations

Connectez OneSignal avec des outils et plateformes tiers.

Boutons d'action

Ajoutez des boutons interactifs aux notifications push.

Messagerie multilingue

Envoyez des messages localisés aux utilisateurs dans leur langue préférée.

Vérification d'identité

Sécurisez votre intégration SDK avec la vérification d’identité côté serveur.

Résultats personnalisés

Suivez les événements de conversion personnalisés liés à vos messages.

Configuration et référence du SDK Web

Configuration web push

Activez toutes les fonctionnalités clés de web push pour votre intégration.

Référence du SDK Web

Détails complets sur les méthodes disponibles et les options de configuration.

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

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.

Où le SDK Web cherche-t-il le service worker ?

Le SDK Web cherche OneSignalSDKWorker.js à la racine de votre site (https://yourdomain.com/OneSignalSDKWorker.js) sauf si vous définissez un chemin personnalisé. Site typique définit le chemin dans le tableau de bord : activez Customize service worker paths and filenames sous Settings > Push & In-App > Web > Advanced Push Settings. Custom Code n’utilise pas ces champs du tableau de bord. Passez serviceWorkerPath et serviceWorkerParam dans OneSignal.init(). Consultez la configuration Custom Code.

Dois-je utiliser ce guide si mon site est sur WordPress ou Shopify ?

Non. Utilisez la configuration WordPress ou la configuration Shopify. Ces intégrations ajoutent le SDK et le service worker pour vous.

Quelle est la différence entre Site typique et Custom Code ?

Site typique est le chemin recommandé sur cette page : vous configurez les invites, la plupart des paramètres et le chemin du service worker dans le tableau de bord OneSignal, puis vous ajoutez l’extrait JavaScript. Custom Code est destiné au contrôle programmatique. Vous définissez les invites, les options init et le chemin du service worker dans le code avec serviceWorkerPath et serviceWorkerParam. Consultez la configuration Custom Code.

Dois-je téléverser un certificat Safari ?

Non, pas pour Safari sur macOS 13+ ou iOS 16.4+. OneSignal utilise VAPID automatiquement. Téléversez un certificat Safari Web Push .p12 uniquement pour le chemin legacy Website Push ID (macOS 12 et versions antérieures, plus les abonnés legacy existants). Voir Certificat Safari Web Push .p12.

Puis-je utiliser une clé .p8 pour le push web Safari ?

Non. Apple ne propose pas de jeton ou de clé .p8 pour le push web Safari. Utilisez un .p8 uniquement pour les applications natives iOS ou macOS. Voir Connexion iOS à APNs basée sur un jeton p8. Le seul identifiant Safari est un certificat Safari Web Push .p12, et uniquement pour le chemin legacy.

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 pour les exigences complètes. Le push web iOS utilise VAPID. Vous ne téléversez pas de .p12 Safari ni de .p8 pour cela.

Pourquoi mes notifications ne s’affichent-elles pas ?

Les causes courantes incluent un fichier service worker mal placé, une Site URL incorrecte dans le tableau de bord, ou l’utilisateur ayant bloqué les notifications dans les paramètres de son navigateur. Consultez Push web : notifications non affichées pour une liste de vérification complète de dépannage.

Besoin d’aide ?Discutez avec notre équipe d’assistance ou envoyez un e-mail à support@onesignal.comVeuillez 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 pertinents

Nous serons ravis de vous aider !

Configuration WordPress

Configuration Shopify

Configuration Custom Code

​Exigences

​Configurer votre application et plateforme OneSignal

Site typique (recommandé)

WordPress

Code personnalisé

​Configuration du site

​URL du site

​Tests locaux

​Invite d’autorisation

Invites d'autorisation web

​Notification de bienvenue (optionnel)

​Paramètres avancés

​Webhooks

Webhooks push web

​Service workers

​Comportement de clic

URL, liens et liens profonds

Boutons d'action

Écouteurs d'événements push du SDK Web

​Persistance

​Certificat Safari Web Push .p12 (optionnel, legacy)

​Téléverser le fichier service worker

Service worker OneSignal

​Ajouter du code à votre site

​Support du push web iOS

Configuration du push web iOS

​Tester l’intégration du SDK OneSignal

​Vérifier les abonnements web push

​Configurer les abonnements de test

​Envoyer un push de test via l’API

Rapports de messages de notifications push

​Identification des utilisateurs

​Attribuer un External ID

​Ajouter des tags de données

​Ajouter des abonnements email et/ou SMS

​Confidentialité et consentement de l’utilisateur

Données collectées par le SDK

Gestion des données personnelles

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

​Événements de notification push

​Changements d’état de l’utilisateur

​Configuration avancée et capacités

Migrer vers OneSignal

Intégrations

Boutons d'action

Messagerie multilingue

Vérification d'identité

Résultats personnalisés

​Configuration et référence du SDK Web

Configuration web push

Référence du SDK Web

​FAQ

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

​Pourquoi ai-je besoin d’un fichier service worker ?

​Où le SDK Web cherche-t-il le service worker ?

​Dois-je utiliser ce guide si mon site est sur WordPress ou Shopify ?

​Quelle est la différence entre Site typique et Custom Code ?

​Dois-je téléverser un certificat Safari ?

​Puis-je utiliser une clé .p8 pour le push web Safari ?

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

​Pourquoi mes notifications ne s’affichent-elles pas ?

Exigences

Configurer votre application et plateforme OneSignal

Configuration du site

URL du site

Tests locaux

Invite d’autorisation

Notification de bienvenue (optionnel)

Paramètres avancés

Webhooks

Service workers

Comportement de clic

Persistance

Certificat Safari Web Push .p12 (optionnel, legacy)

Téléverser le fichier service worker

Ajouter du code à votre site

Support du push web iOS

Tester l’intégration du SDK OneSignal

Vérifier les abonnements web push

Configurer les abonnements de test

Envoyer un push de test via l’API

Identification des utilisateurs

Attribuer un External ID

Ajouter des tags de données

Ajouter des abonnements email et/ou SMS

Confidentialité et consentement de l’utilisateur

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

Événements de notification push

Changements d’état de l’utilisateur

Configuration avancée et capacités

Configuration et référence du SDK Web

FAQ

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

Pourquoi ai-je besoin d’un fichier service worker ?

Où le SDK Web cherche-t-il le service worker ?

Dois-je utiliser ce guide si mon site est sur WordPress ou Shopify ?

Quelle est la différence entre Site typique et Custom Code ?

Dois-je téléverser un certificat Safari ?

Puis-je utiliser une clé .p8 pour le push web Safari ?

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

Pourquoi mes notifications ne s’affichent-elles pas ?