Configuration du SDK Web

​

Aperçu

​

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

​

Configurer votre application et plateforme OneSignal

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

Activez la plateforme web dans vos paramètres OneSignal

​

Configuration 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 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.

Paramètres web dans le tableau de bord OneSignal

​

URL du site

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

​

Tests locaux

Configuration localhost

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

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.

Tests locaux dans le tableau de bord OneSignal

​

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

Copy

Ask AI

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

​

Invite d’autorisation

​

Notification de bienvenue (optionnel)

​

Paramètres avancés

​

Webhooks

​

Service workers

• 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.

Configuration du service worker

​

Comportement de clic

• Si les utilisateurs n’ont pas votre site ouvert dans aucun onglet du navigateur, et cliquent sur une notification qui les amène à votre site, le navigateur ouvrira un nouvel onglet et naviguera vers l’URL de la notification.
• Si les utilisateurs ont votre site ouvert dans un ou plusieurs onglets du navigateur, et cliquent sur une notification qui les amène à votre site, il existe plusieurs façons dont le navigateur peut se comporter que vous pouvez configurer :
  • Navigation exacte (par défaut) - Si l’URL exacte de la notification (par ex. example.com/product) correspond à un onglet que le navigateur a déjà ouvert, le navigateur naviguera vers l’URL de la notification dans cet onglet.
  • Navigation d’origine - Si l’origine de la notification (par ex. example.com) correspond à un onglet que le navigateur a déjà ouvert, le navigateur naviguera vers l’URL de la notification dans cet onglet.
  • Focus exact - Si l’URL exacte de la notification (par ex. example.com/product) correspond à un onglet que le navigateur a déjà ouvert, le navigateur se concentrera sur cet onglet, mais ne rafraîchira pas la page.
  • Focus d’origine - Si l’origine de la notification (par ex. example.com) correspond à un onglet que le navigateur a déjà ouvert, le navigateur se concentrera sur cet onglet, mais ne rafraîchira pas la page.

​

Persistance

​

Certificat Safari (optionnel)

Configuration du certificat Safari

​

Télécharger le fichier service worker

Étape de téléchargement du fichier service worker

​

Ajouter du code à votre site

  <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

​

Tester l’intégration du SDK OneSignal

​

Vérifier les abonnements web push

1

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 web push

2

Vérifiez votre tableau de bord OneSignal

Vérifiez le tableau de bord OneSignal :

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

Tableau de bord affichant un abonnement 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

1

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 Subscriptions.

Ajout d'un appareil aux abonnements de test

2

Nommez votre abonnement.

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

Tableau de bord affichant le champ 'Name your subscription'

3

Créer un segment d'utilisateurs de test.

Allez dans Audience > Segments > New Segment.

4

Nommez le segment.

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

5

Ajoutez le filtre Test Users et cliquez sur Create Segment.

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

1

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

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

2

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.

Copy

Ask AI

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

3

Exécutez le code.

Exécutez le code dans votre terminal.

4

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 avec image sur Chrome macOS

5

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.

Statistiques de livraison affichant la livraison confirmée

Si vous avez un forfait Professional ou supérieur, faites défiler jusqu’à Audience Activity pour voir la confirmation au niveau de l’abonnement :

Livraison confirmée au niveau de l'appareil dans Audience Activity

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

Besoin d’aide ? Contactez support@onesignal.com avec les informations suivantes :

• Copiez-collez la requête et la réponse API dans un fichier .txt
• Votre Subscription ID
• L’URL de votre site Web avec le code OneSignal

Nous serons ravis de vous aider !

​

Identification des utilisateurs

​

Attribuer un External ID

​

Ajouter des tags de données

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

É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

• Utilisez la méthode addEmail pour créer des abonnements email.
• Utilisez la méthode addSms pour créer des abonnements SMS.

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

​

Confidentialité et consentement de l’utilisateur

• 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é.

• 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

• É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

• 🔁 Migrer vers OneSignal depuis un autre service
• 🔌 Intégrations
• 🛎️ Boutons d’action
• 🌐 Messagerie multilingue
• 🛡️ Vérification d’identité
• 📊 Résultats personnalisés

​

Configuration et référence du SDK Web