Configuration avec code personnalisé

Utilisez cette configuration avec code personnalisé uniquement si vous avez besoin d’une configuration avancée ou d’un contrôle programmatique. Pour la plupart des utilisateurs, nous recommandons :

Prérequis

Un compte OneSignal
Un site web avec HTTPS (requis pour les notifications push web)
Accès pour modifier le HTML de votre site web et télécharger des fichiers sur votre serveur
Compréhension de base de JavaScript (utile mais non requis)

Création de votre application OneSignal

Si ce n’est pas votre première application avec OneSignal, cliquez sur Nouvelle application/site web. Sinon, vous passerez directement à la configuration.

Tableau de bord OneSignal montrant l'écran initial de création d'application

Nommez votre application de manière descriptive (il est recommandé de faire correspondre le nom de votre site web), puis sélectionnez Web dans la liste des plateformes. Cliquez sur Suivant : Configurer votre plateforme. Remarque : Vous pouvez ajouter des plateformes supplémentaires (iOS, Android, etc.) ultérieurement dans les paramètres de votre application.

Écran de sélection de plateforme montrant l'option Web mise en évidence

1. Choisir l’intégration

Sélectionnez Code personnalisé. Cela active le contrôle programmatique complet sur les invites, le timing et d’autres paramètres en utilisant notre SDK JavaScript. Quand choisir le code personnalisé :

Besoin de personnaliser les invites de notification
Souhait de contrôler quand les utilisateurs sont invités
Exigence de segmentation ou de ciblage avancé
Construction d’une application monopage (SPA)

Options de configuration web avec code personnalisé sélectionné

2. Configuration du site

Configurez les informations de base de votre site. Ces paramètres affectent la façon dont les notifications apparaissent aux utilisateurs.

Formulaire de configuration du site avec champs requis mis en évidence

Champ	Description	Exigences
NOM DU SITE	Nom affiché dans les notifications push	Gardez-le concis et reconnaissable
URL DU SITE	L’URL complète de votre site web	Doit inclure `https://` et correspondre exactement (inclure `www` si utilisé)
RÉABONNEMENT AUTOMATIQUE	Réabonne automatiquement les utilisateurs de retour	Recommandé : Aide à maintenir le nombre d’abonnés
URL DE L’ICÔNE PAR DÉFAUT	Icône pour les invites et notifications	Carré `256x256` pixels, format `.png/.jpg/.gif`, URL HTTPS requise

Pièges courants :

L’URL du site doit correspondre exactement (avec ou sans www)
Les icônes doivent être servies via HTTPS
Pour les tests locaux, voir Configuration des tests locaux

3. Paramètres push avancés

Certificat push web Safari (optionnel)

OneSignal fournit automatiquement des certificats Safari sans frais. N’activez cette option que si vous avez des certificats push web Safari existants que vous devez utiliser.

Option de téléchargement de certificat Safari pour les certificats existants

Si activé, téléchargez votre Certificat push .p12 Safari Web et entrez le mot de passe. Cliquez sur Enregistrer pour continuer.

4. Télécharger les fichiers Service Worker

Le Service Worker OneSignal est requis pour que les notifications push fonctionnent. Vous avez deux options :

Option 1 : Créer le fichier manuellement (recommandé)

Créez un nouveau fichier nommé OneSignalSDKWorker.js

Ajoutez cette seule ligne de code :

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

Téléchargez le fichier dans le répertoire racine de votre site web

Option 2 : Télécharger et installer

Téléchargez les fichiers SDK OneSignal
Décompressez le téléchargement
Téléchargez OneSignalSDKWorker.js sur votre serveur

Exigences d’hébergement des fichiers

Emplacement par défaut : Le service worker doit être accessible à https://votresite.com/OneSignalSDKWorker.js Emplacement personnalisé : Si vous devez placer le fichier dans un sous-dossier, consultez notre Guide du Service Worker OneSignal pour des instructions détaillées.

Besoin d’un emplacement personnalisé ? Pour le placement dans un sous-dossier ou la migration depuis un autre fournisseur push, suivez notre Guide du Service Worker OneSignal.

Interface de téléchargement du fichier service worker

Alerte configuration héritée : Si votre site a été configuré avant le 22 novembre 2021 et que vous utilisez actuellement deux fichiers service worker (OneSignalSDKWorker.js et OneSignalSDKUpdaterWorker.js), continuez d’héberger les deux fichiers pour éviter les problèmes de service worker.Les nouvelles configurations ne nécessitent que le seul fichier OneSignalSDKWorker.js.

5. Ajouter du code à votre site web

Implémentation de base

Ajoutez ce code à la section <head> de votre site web. Remplacez YOUR_ONESIGNAL_APP_ID par votre ID d’application réel depuis le tableau de bord OneSignal.

<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_ONESIGNAL_APP_ID",
      safari_web_id: "YOUR_SAFARI_WEB_ID", // Nécessaire uniquement si vous utilisez un certificat Safari personnalisé
      notifyButton: {
        enable: true, // Affiche l'icône de cloche OneSignal
      },
    });
  });
</script>

Configuration spécifique aux frameworks

Si vous utilisez un framework JavaScript, suivez ces guides spécialisés :

Étapes suivantes après l’installation du code

Initialiser le SDK : Le code ci-dessus gère l’initialisation de base
Configurer les invites : Définissez quand et comment les utilisateurs sont invités - voir Demandes d’autorisation
Ajouter une logique personnalisée : Utilisez la Référence du SDK Web pour les fonctionnalités avancées

Points d’intégration courants :

Timing des invites personnalisé basé sur le comportement de l’utilisateur
Segmentation et balisage des utilisateurs
Suivi des événements et analyses
Tests A/B de différentes stratégies de notification

Tester votre configuration

Vérifier l’installation

Visitez votre site web - vous devriez voir l’icône de cloche OneSignal (si activée)
Cliquez sur la cloche pour déclencher l’invite d’autorisation native du navigateur
Abonnez-vous aux notifications
Vérifiez la console du navigateur pour toute erreur JavaScript

Envoyer une notification de test

Trouvez votre abonnement de test : Suivez Trouver et définir des abonnements de test
Envoyez un push de test : Utilisez notre guide pour vous envoyer une notification push
Vérifiez la livraison sur différents navigateurs et appareils

Dépannage des problèmes courants

Problèmes de Service Worker :

Assurez-vous que OneSignalSDKWorker.js est accessible à l’URL correcte
Vérifiez que le fichier contient l’instruction d’importation correcte
Vérifiez que HTTPS fonctionne correctement

L’icône de cloche n’apparaît pas :

Confirmez que le code JavaScript est dans la section <head>
Vérifiez la console du navigateur pour les erreurs
Vérifiez que votre ID d’application est correct

Notifications non reçues :

Testez dans une fenêtre de navigation privée/incognito
Assurez-vous que les notifications sont activées dans les paramètres du navigateur
Vérifiez que votre site est servi via HTTPS

Besoin d’aide ? Si vous rencontrez des problèmes, consultez notre Guide de dépannage du push web ou contactez support@onesignal.com pour obtenir de l’aide.

Et ensuite

Après une configuration réussie, envisagez ces fonctionnalités avancées :

Segmentation de l’audience pour la messagerie ciblée
Tests A/B de vos stratégies de notification
Analyses et insights pour suivre les performances

Documentation développeur

SDK mobiles

SDK web

Live Activities

Configuration desktop et montre

Configuration avec code personnalisé

Prérequis