Passer au contenu principal

​
Aperçu

Ce guide explique comment configurer les notifications push dans votre application Angular en utilisant le package onesignal-ngx, couvrant tout de l’installation à la configuration et à la gestion des service workers.

​
Exigences

​
Installation

Installez le package onesignal-ngx en utilisant votre gestionnaire de packages préféré : 
npm install --save onesignal-ngx

​
Initialisation

Importez le service OneSignal et initialisez-le dans votre composant racine :
ts
import { OneSignal } from 'onesignal-ngx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private oneSignal: OneSignal) {
    this.oneSignal.init({
      appId: 'YOUR-ONESIGNAL-APP-ID',
    });
  }
}

​
Attendre l’initialisation

Vous pouvez gérer la promesse retournée par init() de deux manières :
ts
// Option 1 : async/await
await this.oneSignal.init({ appId: 'YOUR-APP-ID' });
// poursuivre avec d'autres logiques

// Option 2 : .then()
this.oneSignal.init({ appId: 'YOUR-APP-ID' }).then(() => {
  // sûr d'interagir avec les API OneSignal
});

​
Personnaliser les options d’initialisation

Vous pouvez personnaliser votre initialisation avec des paramètres init supplémentaires.

​
Paramètres du Service Worker

Pour éviter les conflits avec le propre service worker d’Angular (utilisé dans les configurations PWA), spécifiez une portée et un chemin uniques pour le service worker OneSignal. Si vous ne l’avez pas encore fait, vous devrez télécharger le fichier Service Worker OneSignal à ajouter à votre site. Le fichier OneSignalSDKWorker.js doit être accessible publiquement. Vous pouvez le placer dans votre répertoire public, à la racine de niveau supérieur ou dans un sous-répertoire. Cependant, si vous placez le fichier dans un sous-répertoire et/ou avez un autre service worker pour votre site, assurez-vous alors de spécifier le chemin. Consultez Service Worker OneSignal pour plus de détails.
OptionDescription
serviceWorkerParamPortée contrôlée par le worker OneSignal. Recommandation : Utilisez un sous-chemin personnalisé (par ex., "/onesignal/").
serviceWorkerPathChemin vers votre fichier service worker OneSignal hébergé (par ex., "onesignal/OneSignalSDKWorker.js"). Doit être accessible publiquement.
Exemple : 
this.oneSignal.init({
  appId: 'YOUR-APP-ID',
  serviceWorkerParam: {
    scope: '/onesignal/'
  },
  serviceWorkerPath: 'onesignal/OneSignalSDKWorker.js'
});

​
Héberger le worker

  • Racine publique (par défaut) : /OneSignalSDKWorker.js
  • Dossier personnalisé (recommandé) : par ex., /onesignal/OneSignalSDKWorker.js comme défini à l’étape précédente.

​
Vérifier l’hébergement du service worker

Visitez le chemin dans votre navigateur pour confirmer qu’il est accessible. Si vous avez utilisé la racine : 
https://your-site.com/OneSignalSDKWorker.js
Si vous utilisez le chemin d’exemple : 
https://your-site.com/onesignal/OneSignalSDKWorker.js
Il devrait retourner du JavaScript valide.

​
Important pour les utilisateurs d’Angular CLI

Si le fichier n’est pas servi, assurez-vous qu’il est listé dans votre angular.json sous le tableau assets :
json
"assets": [
  "src/assets",
  "onesignal/OneSignalSDKWorker.js"
]

​
Notes importantes

  • Éviter l’initialisation en double en développement
    • Lors de tests dans un environnement de développement, vous pourriez voir le SDK OneSignal s’initialiser deux fois, ce qui peut causer des erreurs de console.
    • Cela se produit en raison de <React.StrictMode> qui fait s’exécuter les effets deux fois en développement. Pour résoudre ce problème, supprimez <React.StrictMode> de votre composant racine pendant le développement.
Le mode strict n’affecte que le développement—il n’impacte pas les builds de production.

​
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

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

Les abonnements de test sont utiles pour tester une notification push avant d’envoyer un message.
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.
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

Précédemment, nous avons démontré comment créer des Abonnements web push. Nous allons maintenant étendre l’identification des Utilisateurs sur tous leurs abonnements (y compris push, email et SMS) en utilisant le SDK OneSignal. Nous couvrirons 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 de notre SDK chaque fois qu’ils sont identifiés 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 notre 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 de notre 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

Plus tôt, nous avons vu comment notre SDK crée des abonnements web push pour envoyer des push. Vous pouvez également atteindre les utilisateurs via les canaux email et SMS en créant les abonnements correspondants. 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 : Consultez nos documents sur la confidentialité et la sécurité pour en savoir plus sur :

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

​
Changements d’état de l’utilisateur

​
Configuration avancée et capacités

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

​
Configuration et référence du SDK Web

Assurez-vous d’avoir activé toutes les fonctionnalités clés en consultant le guide Configuration web push. Pour tous les détails sur les méthodes disponibles et les options de configuration, visitez la référence du SDK Web.
Félicitations ! Vous avez terminé avec succès le guide de configuration du SDK Web.
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 !