Push web par code personnalisé avec le SDK Web OneSignal

• Configuration Angular
• Configuration React JS
• Configuration Vue JS

​

Prérequis

• Site web HTTPS : Le push web ne fonctionne pas en HTTP ni en mode navigation privée/incognito.
• Accès au serveur : Vous devrez 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 aurez besoin de plusieurs applications OneSignal (une par origine). Pour vous conformer à cette limitation du navigateur, vous pouvez :
  • Rediriger le trafic vers une seule origine pour les abonnements.
  • Créer plusieurs applications OneSignal, une par origine.

​

Configurer votre application et plateforme OneSignal

• Accédez à Settings > Push & In-App > Web.
• Sélectionnez le type d’intégration Custom Code.

​

Configuration du site

• Site Name : Le nom de votre site et le titre de notification par défaut.
• Site URL : L’origine exacte de votre site, par exemple https://yourdomain.com. Évitez d’utiliser www. si votre site n’est pas configuré ainsi. Consultez les Prérequis si vous avez plusieurs origines.
• Auto Resubscribe : Activez cette option pour réabonner automatiquement les utilisateurs qui effacent leurs données de navigateur lorsqu’ils reviennent sur votre site (sans nouvelle invite d’autorisation).
• 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.

​

Tests locaux

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

​

Notification de bienvenue (optionnel)

​

Téléverser le fichier service worker

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

​

Ajouter du code au 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",
      notifyButton: {
        enable: true,
      },
    });
  });
</script>

<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",
      serviceWorkerPath: "push/onesignal/OneSignalSDKWorker.js",
      serviceWorkerParam: { scope: "/push/onesignal/" },
      notifyButton: {
        enable: true,
      },
    });
  });
</script>

​

Support du push web iOS

​

Certificat .p12 Safari Web Push (optionnel, hérité)

​

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.

2

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

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

2

Nommez votre abonnement.

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

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.

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.

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.

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.

Rapports de messages de notifications push

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

• 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

​

Attribuer un External ID

​

Ajouter des tags de données

​

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.

​

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

​

É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

​

Configuration et référence du SDK Web

​

FAQ

​

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

​

Ai-je besoin de HTTPS pour les notifications push web ?

​

Puis-je utiliser cette configuration avec une application monopage (SPA) ?

​

Que se passe-t-il si un utilisateur efface ses données de navigateur ?

​

Pages associées