Skip to main content
Suivez ce guide pour activer le push web afin d’atteindre les utilisateurs avec du contenu opportun lorsqu’ils ne sont pas sur votre site. Le push web prend en charge le texte, les images, les boutons d’action et les sons.
Web push notification examples across different browsers and devices

Les notifications push web atteignent les utilisateurs même lorsqu'ils ne sont pas sur votre site

Le push web nécessite :
  • Un site web HTTPS sécurisé avec un certificat SSL valide
  • La possibilité d’ajouter le service worker OneSignal à votre site web
  • Une origine unique qui respecte la politique de même origine
  • L’autorisation de l’utilisateur pour recevoir des notifications
  • Des navigateurs pris en charge (Chrome, Firefox, Safari, Edge)
Les utilisateurs ne peuvent pas s’abonner en mode incognito ou navigation privée. iOS nécessite une configuration supplémentaire. Consultez Push web pour iOS. Certains navigateurs limitent les invites ou nécessitent un geste de l’utilisateur. Consultez FAQ Push Web.

​
Choisissez votre guide de configuration

Complétez l’un de ces parcours de configuration de site.
Pas développeur ? Consultez Gérer les membres de l’équipe pour inviter un coéquipier avec accès développeur à votre projet OneSignal.

Configuration du SDK Web

Site typique : configurez le tableau de bord, téléversez le service worker et ajoutez le SDK JavaScript.

Plugin WordPress

Plugin officiel OneSignal. Aucun SDK JavaScript ni téléversement de service worker requis.

Configuration Shopify

Connectez Shopify via l’intégration Vendo. Vendo déploie le SDK sur votre boutique en ligne.

Migration depuis un autre fournisseur

Passez d’un autre fournisseur de push web et conservez vos abonnements.
Si votre site est construit avec Angular, React ou Vue, utilisez le guide de framework correspondant. Si vous chargez le SDK avec Google Tag Manager, terminez la configuration du tableau de bord et du service worker dans Configuration du SDK Web, puis initialisez dans GTM. Le push web iOS sur iPhones et iPads fonctionne à partir d’iOS 16.4+. Après avoir terminé un parcours de configuration de site, ajoutez un manifest.json et demandez aux utilisateurs d’ajouter votre site à leur écran d’accueil.

Configuration du push web iOS

Exigences Apple supplémentaires après avoir terminé un parcours de configuration de site.

​
Types d’intégration

Dans le tableau de bord OneSignal, allez dans Settings > Push & In-App > Web et sélectionnez le type d’intégration qui correspond à votre site.
OneSignal dashboard showing integration type options: Typical Site, WordPress, and Custom Code

Choisissez votre type d'intégration en fonction de la configuration de votre site web

Site typique

Recommandé. Configurez les invites, la notification de bienvenue et le chemin du service worker dans le tableau de bord.

WordPress

Requis si vous utilisez le plugin WordPress officiel de OneSignal.

Code personnalisé

Contrôle total sur les invites et les options init dans le code.
Shopify n’est pas un bouton radio du tableau de bord. Les boutiques Shopify doivent utiliser Code personnalisé. Le Site typique ne peut pas définir le chemin du service worker Vendo, donc les abonnements échouent. Consultez Configuration Shopify.
Après avoir sélectionné un type d’intégration, terminez le guide de configuration correspondant. Les détails des champs du Site typique se trouvent dans Configuration du SDK Web. Les détails des champs du Code personnalisé se trouvent dans Configuration avec code personnalisé.

​
Invites d’autorisation web

Les utilisateurs doivent accorder l’autorisation avant de pouvoir recevoir du push web. Les navigateurs affichent une boîte de dialogue système native pour cette autorisation. OneSignal recommande d’abord une pré-invite personnalisable afin que vous puissiez en expliquer la valeur et éviter que le navigateur bloque les invites natives répétées. Site typique et WordPress : ajoutez, supprimez et mettez à jour les invites dans le tableau de bord OneSignal à tout moment. Code personnalisé : contrôlez les invites dans OneSignal.init(). Consultez la Référence du SDK Web.
Expliquez l’avantage dans la pré-invite, affichez-la après un engagement (pas au premier chargement de page), puis ouvrez la boîte de dialogue native du navigateur uniquement lorsque l’utilisateur accepte.

Invites d'autorisation web

Comparez les invites de type glissement vers le bas, catégories, natives, cloche d’abonnement et autres.

Référence du SDK Web

Affichez ou masquez les invites dans le code avec le SDK Web.
iOS n’affiche pas l’invite d’autorisation tant que l’utilisateur n’a pas ajouté votre site à son écran d’accueil. Consultez Push web pour iOS.

​
Utilisateurs et abonnements

Lorsqu’un utilisateur s’abonne au push, OneSignal crée un abonnement lié à ce navigateur et cet appareil. Les abonnements push web sont créés lorsque les utilisateurs :
  • Accordent l’autorisation pour les notifications push sur votre site web dans un navigateur et un appareil spécifiques
  • Retournent sur votre site après avoir effacé les données du navigateur (si le réabonnement automatique est activé)
  • S’abonnent depuis un nouveau navigateur ou appareil
Chaque combinaison navigateur/appareil crée un abonnement séparé. Le mode incognito et la navigation privée ne peuvent pas créer d’abonnements. Les abonnements push web restent anonymes jusqu’à ce que vous attribuiez un ID externe.
OneSignal dashboard Users page showing a list of Users with Subscription details

Tableau de bord OneSignal : Audience > Utilisateurs

Utilisateurs

Gérez les utilisateurs, attribuez des ID externes et suivez leur activité.

Abonnements

Comment les abonnements fonctionnent sur les navigateurs et appareils.

Segments

Regroupez les utilisateurs en segments pour cibler en fonction du comportement, de l’appareil et plus encore.

​
Concevoir les notifications push web

Les notifications push web prennent en charge les titres, messages, icônes, images et boutons d’action. Le diagramme montre quels éléments vous pouvez personnaliser (1–5) et lesquels sont contrôlés par le navigateur (6–9).
Annotated diagram showing the anatomy of a web push notification with customizable and browser-controlled elements

Anatomie de la notification push web. Personnalisez les éléments 1–5. Le navigateur contrôle 6–9.

Éléments personnalisables :
  1. Titre : Titre accrocheur (recommandé : moins de 50 caractères)
  2. Message : Contenu principal de la notification (recommandé : moins de 120 caractères)
  3. Icône : Icône carrée de votre marque (recommandé : PNG, JPG ou GIF non animé 256×256)
  4. Grande image : Contenu visuel accrocheur
  5. Boutons d’action : Boutons d’appel à l’action
Éléments contrôlés par le navigateur (non personnalisables) :
  1. Navigateur : Le navigateur affichant le push
  2. Domaine : L’origine de votre site, définie par le navigateur
  3. Horodatage et fermeture : Contrôles ajoutés par le navigateur
  4. Plus d’options : Contrôles supplémentaires spécifiques au navigateur

Aperçu du push

Aperçu complet de la création de notifications push, des options et du comportement de livraison.

Modèles

Gagnez du temps avec des modèles réutilisables pour une messagerie cohérente.

​
Personnalisation et localisation

Personnalisez les messages push pour correspondre aux préférences et à la langue de chaque utilisateur.

Personnalisation des messages

Insérez des variables dynamiques comme le nom ou les préférences pour adapter les messages.

Messagerie multilingue

Livrez les messages dans la langue préférée de chaque utilisateur.

​
Configurer le comportement du push web

Contrôlez quand les messages apparaissent, combien de temps ils sont stockés et ce qui se passe au clic.

​
Paramètres de livraison, d’affichage et de fermeture

Limitation

Contrôlez la vitesse de livraison des notifications.

Plafonnement de fréquence

Définissez des limites pour éviter l’envoi excessif de notifications au même utilisateur.

Durée de vie (TTL)

Définissez combien de temps les services push conservent les messages lorsque l’appareil est hors ligne.

Sujet push web

Utilisez des sujets pour regrouper, remplacer ou supprimer les notifications en double.

Comportement de clic

Choisissez l’URL de lancement et la façon dont un clic met le focus sur un onglet ouvert ou y navigue.

​
Tester votre configuration

Confirmez l’intégration sur tous les navigateurs avant d’envoyer à toute votre audience.

​
Liste de vérification pré-lancement

  • Le SDK est chargé sans erreurs de console
  • L’invite d’autorisation apparaît et fonctionne correctement
  • La notification de test est envoyée et reçue
  • Les icônes et images s’affichent correctement
  • Le service worker est enregistré et à jour
  • Le certificat HTTPS est valide

​
Analyses et dépannage

Rapports de messages push

Visualisez la livraison, le taux d’ouverture et les métriques de clics pour chaque message.

Aperçu des analyses

Explorez les métriques d’engagement et de comportement des utilisateurs à travers les canaux.

Notifications non affichées ou retardées

Liste de vérification de dépannage si les messages n’apparaissent pas.

Images de notification non affichées

Corrigez les problèmes de rendu d’image sur différents navigateurs.

​
Prochaines étapes

Tests A/B

Optimisez les messages avec des expériences pour trouver ce qui génère l’engagement.

Parcours

Créez des flux de messagerie automatisés et multi-étapes déclenchés par le comportement des utilisateurs.

Tags

Ajoutez des propriétés personnalisées aux utilisateurs pour la personnalisation et la segmentation.

​
Questions fréquentes

​
Les utilisateurs peuvent-ils s’abonner au push web sur iOS ?

Oui, à partir d’iOS 16.4+. Terminez d’abord la configuration Site typique, Code personnalisé, WordPress ou Shopify, puis ajoutez un manifest.json et demandez aux utilisateurs d’ajouter votre site à leur écran d’accueil. Consultez Configuration du push web iOS.

​
Pourquoi un utilisateur a-t-il cessé de recevoir des notifications push web ?

Les raisons les plus courantes sont :
  1. L’utilisateur a effacé ses données de navigateur. Il sera automatiquement et silencieusement réabonné lorsqu’il retournera sur votre site si vous avez activé l’option Réabonnement automatique dans vos paramètres de push web.
  2. L’utilisateur a désactivé les notifications push dans les paramètres du système d’exploitation. Il devra se réabonner manuellement à votre site pour recevoir à nouveau des notifications push.
Pour plus de détails sur ces raisons et d’autres, consultez Notifications push web non affichées.

​
Les notifications push web fonctionnent-elles en mode incognito ou navigation privée ?

Non. Les utilisateurs ne peuvent pas s’abonner au push web en mode incognito ou navigation privée. Les abonnements créés dans une session normale ne sont pas accessibles en mode privé.

​
Quels navigateurs prennent en charge les notifications push web ?

Chrome, Firefox, Safari (macOS et iOS 16.4+) et Edge prennent tous en charge le push web. Chaque navigateur peut avoir un comportement d’invite et un affichage de notification différents. Consultez FAQ Push Web pour les détails spécifiques à chaque navigateur.

​
Puis-je utiliser des sous-domaines avec le push web ?

Chaque sous-domaine (par exemple, app.example.com vs shop.example.com) est une origine distincte. Les navigateurs appliquent la politique de même origine pour le push web, donc chaque sous-domaine nécessite sa propre application OneSignal. Le service worker doit également être hébergé sur la même origine que la page d’abonnement. Les CDN et autres sous-domaines ne sont pas autorisés. Consultez Plusieurs sites et sous-domaines.

​
Comment enregistrer plus d’un domaine pour le push web ?

Vous avez besoin d’une application OneSignal distincte pour chaque domaine ou sous-domaine. Une seule application OneSignal ne peut servir qu’une seule origine. Redirigez les utilisateurs vers une seule origine pour l’abonnement, ou créez une application OneSignal par origine. Consultez Plusieurs sites et sous-domaines.

​
Pourquoi mon invite de push web ne s’affiche-t-elle pas ?

Les causes courantes incluent un site servi via HTTP, un service worker qui n’est pas enregistré, une autorisation déjà accordée ou refusée par l’utilisateur, ou le mode incognito. Vérifiez la console du navigateur et consultez Invites d’autorisation web et Problèmes d’affichage des invites.