Dépannage du SDK Web

Aperçu

Ce guide vous accompagne dans le dépannage de votre configuration du SDK Web OneSignal. Avant de continuer, consultez la Configuration du SDK Web pour vous assurer d’avoir complété toutes les étapes. Les raisons les plus courantes pour lesquelles le push web semble ne pas fonctionner sont liées aux paramètres de notification de votre navigateur et de votre appareil :

Compatibilité des navigateurs

Les utilisateurs peuvent voir les invites d’autorisation web mais ne peuvent pas s’abonner aux notifications push en modes incognito, privé ou invité du navigateur.

Compatibilité des navigateurs par système d'exploitation

Browser	Windows	macOS	Android	iOS
Chrome	✅	✅	✅	✅ ¹
Firefox	✅	✅	✅	✅ ¹
Safari 10+	❌	✅	❌	✅ ¹
Microsoft Edge	✅	✅	✅	✅ ¹
Opera ²	✅	✅	✅	✅ ¹
Samsung Internet ²	❌	❌	✅	✅ ¹
Yandex ²	✅	✅	✅	✅ ¹
UC Browser ²	✅	❌	✅	✅ ¹
Internet Explorer	❌	❌	❌	❌
DuckDuckGo	❌	❌	❌	❌

¹ iOS nécessite l’installation de l’application web (voir Configuration du push web iOS)² Les navigateurs basés sur Chromium apparaissent comme “Chrome” dans les analyses OneSignal

Paramètres de notification de l’appareil

Les paramètres de notification de l’appareil sont la cause la plus courante des notifications web push qui n’apparaissent pas sur un appareil. Vérifiez les paramètres suivants, y compris les modes de concentration (Ne pas déranger, Batterie faible, etc.), avant de chercher d’autres causes.

Sélectionnez le système d’exploitation correct dans les onglets ci-dessous. Vous devriez voir Windows, macOS, Android et iOS.

Windows
macOS
Android
iOS

Paramètres de notification Windows 10

Sélectionnez Démarrer > Paramètres > Notifications et actions > Recevoir des notifications des applications et autres expéditeurs
Assurez-vous que votre site et votre navigateur sont également activés.

Paramètres de notification Windows 11 :

Sélectionnez Démarrer > Paramètres > Système > Notifications

Activez les Notifications
Désactivez Ne pas déranger (lors des tests, les notifications s’afficheront lorsque cette option est désactivée)
Faites défiler vers le bas jusqu’à Notifications des applications et autres expéditeurs

Windows 11 Settings showing the Notifications from apps and other senders list — Windows 11 Notifications des applications et autres expéditeurs

Assurez-vous que vos navigateurs sont activés.

Liste des navigateurs dans les paramètres de notification Windows 11

Problèmes d’affichage des invites

Voici les raisons courantes pour lesquelles l’invite de notification push web peut ne pas s’afficher comme prévu.

Confirmer qu'une invite est configurée

Vérifiez votre configuration d’invite d’autorisation web pour vous assurer que vous avez configuré une invite et que vous comprenez les différents comportements des navigateurs.Par exemple, certains navigateurs comme Safari nécessitent un geste de l’utilisateur (clic sur un bouton) avant que l’invite native puisse apparaître. Les détails pour chaque navigateur se trouvent dans notre section Invite d’autorisation web > Invite d’autorisation native.

Vérifier la compatibilité du navigateur, les modes incognito, navigation privée ou invité.

Les navigateurs ne permettent pas aux utilisateurs de s’abonner aux notifications dans ces modes. C’est pourquoi l’invite coulissante peut s’afficher alors que l’invite d’autorisation native ne s’affichera pas.Assurez-vous d’utiliser un navigateur et un appareil qui prennent en charge le push web.

Vérifier les paramètres de notification de votre navigateur

Accédez aux paramètres de votre navigateur et vérifiez le paramètre d’autorisation “Notifications”. Exemple Chrome : chrome://settings/content/notifications

Dans cet exemple :

L’utilisateur a sélectionné “Ne pas autoriser les sites à envoyer des notifications”, ce qui empêchera l’invite d’autorisation native de s’afficher. Ce paramètre doit indiquer “Les sites peuvent demander à envoyer des notifications” pour permettre l’affichage de l’invite d’autorisation native.
L’utilisateur a ajouté https://yoursite.com à la liste “Non autorisés à envoyer des notifications”, ce qui empêchera l’invite d’autorisation native de s’afficher. Cette entrée doit être supprimée de la liste pour permettre l’affichage de l’invite d’autorisation native.

Documentation spécifique aux navigateurs :

Chrome - Cette page explique comment gérer les notifications dans Chrome en allant dans Paramètres > Confidentialité et sécurité > Paramètres des sites > Notifications, où vous pouvez contrôler le comportement par défaut et gérer les autorisations pour chaque site web.
Firefox - Ce guide couvre les notifications Web Push de Firefox, expliquant comment gérer les autorisations de notification via Paramètres > Vie privée et sécurité > Notifications, et comment contrôler les autorisations pour des sites spécifiques via l’icône d’informations du site dans la barre d’adresse.
Safari - Ce guide Apple explique comment personnaliser les notifications Safari sur Mac via Safari > Préférences > Sites web > Notifications, où vous pouvez gérer quels sites peuvent envoyer des notifications et contrôler le comportement des notifications via les Préférences Système.
Edge - Cet article détaille comment gérer les notifications Edge en accédant à Paramètres > Confidentialité, recherche et services > Autorisations de site > Notifications, ou en cliquant sur l’icône d’informations du site dans la barre d’adresse.

Les exigences iOS/iPadOS ne sont pas remplies.

Pour iOS, il existe des exigences supplémentaires pour inviter les utilisateurs à s’abonner. Plus d’informations dans le guide Push web mobile pour iOS/iPadOS.

Étapes de dépannage

Après avoir vérifié ce qui précède, suivez ces étapes pour dépanner votre configuration du SDK Web OneSignal.

Ouvrir la console des outils de développement du navigateur

Les outils de développement du navigateur vous permettent d’interagir avec le SDK Web OneSignal et d’activer la journalisation pour vérifier les erreurs.

Desktop
Android
iOS

Chrome : Faites un clic droit sur la page, cliquez sur Inspecter, et cliquez sur l’onglet Console de la fenêtre contextuelle qui s’ouvre.
Firefox : Faites un clic droit sur la page, cliquez sur Inspecter l’élément, et cliquez sur l’onglet Console de la fenêtre contextuelle qui s’ouvre.
Safari : Allez dans Safari → Préférences → Avancé et assurez-vous que Afficher le menu Développement dans la barre de menus est coché. Ensuite, sur votre page web, faites un clic droit, cliquez sur Inspecter l’élément, et cliquez sur l’onglet Console de la fenêtre contextuelle qui s’ouvre.

Browser developer tools console open on a webpage — Console des outils de développement Desktop

Chrome sur Android : Activez le débogage USB, connectez votre appareil à votre ordinateur et accédez aux Dev Tools avec chrome://inspect#devices dans votre navigateur Chrome de bureau.
Firefox sur Android : Activez le débogage USB, connectez votre appareil à votre ordinateur et accédez aux Dev Tools avec about:debugging dans votre navigateur Firefox de bureau.

Activer la journalisation du SDK web

Exécutez la commande suivante dans la Console des outils de développement :

OneSignal.Debug.setLogLevel('trace');

Vous devriez voir undefined comme résultat.
Fermez l’onglet et ouvrez-en un nouveau sur la même page. Actualiser seul ne déclenchera pas tous les événements d’initialisation du SDK.
Vous commencerez à voir les logs du SDK OneSignal dans la Console.

Browser console showing OneSignal SDK trace-level log output — Console avec logs SDK détaillés

Erreurs de configuration

Vous pouvez rencontrer les erreurs suivantes après l’initialisation de OneSignal :

Error: SDK already initialized

Console error showing SDK already initialized message — Erreur d'initialisation en double du SDK

Ce que cela signifie : Le code init du SDK Web OneSignal est appelé plus d’une fois, souvent causé par la combinaison de la configuration du plugin WordPress ou de l’intégration Shopify avec du code manuel, ou par l’ajout accidentel du code init OneSignal plusieurs fois. Comment résoudre : Supprimez tous les appels init en double. Si vous utilisez le plugin WordPress ou l’intégration Shopify, supprimez tout code OneSignal manuel de vos fichiers.

Error: Can only be used on: (URL Set in OneSignal Dashboard)

Console error showing site origin mismatch between dashboard URL and current page — L'exemple montre que l'URL définie dans le tableau de bord OneSignal `http://127.0.0.1:5501` n'est pas l'origine du site que vous visitez actuellement.

Ce que cela signifie : Le domaine que vous visitez actuellement ne correspond pas à l’URL du site configurée dans votre tableau de bord OneSignal. Comment résoudre : Copiez l’URL du site dans votre navigateur et collez-la dans la configuration Settings > Push & In-app > Web > Site URL de votre tableau de bord OneSignal. Assurez-vous qu’il s’agit de l’origine du site au format suivant :

Protocole : Doit être https:// (pour les tests locaux, voir Configuration localhost)
Domaine : example.com vs www.example.com
Sous-domaine : app.example.com vs example.com

Les trois composants doivent correspondre entre l’URL réelle de votre site et votre configuration du tableau de bord.

Error: OneSignalSDK: The “My site is not fully HTTPS” option is no longer supported starting with version 16 (User Model) of the OneSignal SDK.

Console error showing HTTP site not supported in SDK v16 — Exemple d'erreur de site HTTP non pris en charge

Ce que cela signifie : Votre tableau de bord OneSignal est configuré pour utiliser un site HTTP et vous avez probablement mis à jour pour utiliser HTTPS. Les utilisateurs qui se sont abonnés en utilisant HTTP ou l’option “My site is not fully HTTPS” sont en fait abonnés à un sous-domaine au format https://your-label.os.tc, et non à l’origine réelle de votre site. Le push web n’est pas pris en charge sur les sites HTTP ou les sites web qui ne peuvent pas héberger de service workers. Comment résoudre : Les deux options nécessitent que vos utilisateurs se réabonnent car ils sont abonnés au sous-domaine os.tc, et non à votre site.

Créez une nouvelle application OneSignal et définissez le nouvel App ID dans votre code d’initialisation. Cela vous permet de continuer à envoyer des push depuis l’ancienne application pour notifier les utilisateurs. Envoyez des notifications informant les utilisateurs que le site a été mis à jour et qu’ils doivent se réabonner. Offrir une réduction ou une incitation aide. Définissez l‘“URL de lancement” sur une page de destination avec une invite de réabonnement (cloche, lien personnalisé ou diapositive de catégorie). Consultez Invites d’autorisation pour plus de détails.
Conservez le même App ID en utilisant l’API Mettre à jour une application pour mettre à jour chrome_web_origin et safari_site_origin vers votre origine HTTPS. Parce que les utilisateurs se sont abonnés au sous-domaine os.tc, leur navigateur n’a pas d’autorisations push pour votre domaine réel. Ils seront à nouveau invités, et s’ils se réabonnent, ils auront deux abonnements push web sur le même navigateur — provoquant des notifications en double. Pour éviter les doublons, supprimez tous les abonnés push web actuels avant la mise à jour. Envoyez d’abord quelques notifications informant les utilisateurs qu’ils doivent se réabonner. Consultez Invites d’autorisation pour les options d’invite.

Erreurs d’installation du service worker

Si l’invite d’autorisation native vous est présentée et que vous cliquez sur “Autoriser”, vous pouvez rencontrer les erreurs d’installation de service worker suivantes :

Y: Registration of a Service Worker failed.

[Service Worker Installation] Installing service worker failed TypeError: Failed to register a ServiceWorker for scope (‘https://your-site.com/’) with script (‘https://your-site.com/...’): A bad HTTP response code (404) was received when fetching the script.

[Service Worker Installation] Installing service worker failed TypeError: Failed to register a ServiceWorker for scope (‘https://www.yoursite.com/’) with script (‘https://www.yoursite.com/...’): A bad HTTP response code (403) was received when fetching the script.

Console error showing service worker registration failure with 404 or 403 response — Exemple d'erreur d'installation de service worker

The script has an unsupported MIME type (‘current MIME type’). [Service Worker Installation] Installing service worker failed SecurityError: Failed to register a ServiceWorker for scope (‘https://your-site.com/’) with script (‘https://your-site.com/…’): The script has an unsupported MIME type (‘current MIME type’).

Console error showing unsupported MIME type for service worker script — Erreur de type MIME dans le service worker

[Service Worker Installation] Installing service worker failed SecurityError: Failed to register a ServiceWorker for scope (‘https://your-site.com/’) with script (‘https://your-site.com/…’): The script resource is behind a redirect, which is disallowed.

Console error showing service worker script blocked by a redirect — Erreur de redirection dans la console

Ce que cela signifie : Votre fichier de service worker est configuré incorrectement. Comment résoudre :

Trouver le chemin de votre service worker

Site typique et Code personnalisé : le SDK recherche OneSignalSDKWorker.js à la racine de votre site, sauf si vous avez défini un chemin personnalisé. Consultez Service worker OneSignal.WordPress : ne téléversez pas de worker à la racine du site et ne définissez pas de chemin personnalisé. Le plugin héberge le fichier dans sdk_files. Ouvrez cette URL à l’étape suivante. Consultez Configuration WordPress.

Visiter directement le fichier du service worker dans votre navigateur

Ouvrez l’URL du fichier dans votre navigateur.

Site typique par défaut (racine) : https://yoursite.com/OneSignalSDKWorker.js
Plugin WordPress (v3) : https://yoursite.com/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js (nom du dossier WordPress.org ; les installations via zip peuvent différer)
Chemin personnalisé (tableau de bord Site typique ou init Code personnalisé uniquement) : https://yoursite.com/your-custom-location/OneSignalSDKWorker.js

Les noms de fichiers sont sensibles à la casse. Assurez-vous d’utiliser OneSignalSDKWorker.js ou le nom de fichier que vous avez configuré.Certains serveurs mettent automatiquement le nom de fichier en minuscules. Prenez cela en considération si vous ne trouvez pas le fichier.

Vérifier que le fichier se charge

Vous devriez voir le code JavaScript suivant :

JavaScript

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

Ce fichier doit être servi avec un content-type de application/javascript.
Il ne peut y avoir aucune redirection vers ce fichier. Les fichiers doivent être hébergés sur le même domaine que votre site (pas de domaines CDN ou proxy).

Site typique et Code personnalisé : consultez Service worker OneSignal pour le téléversement et la configuration du chemin. Les utilisateurs du plugin WordPress ne doivent pas suivre ce guide. Consultez Configuration WordPress.

Notifications non affichées

Cette section suppose que :

Vous avez consulté le guide Notifications non affichées : Web Push pour les raisons courantes pour lesquelles les notifications peuvent ne pas s’afficher sur votre appareil.
L’invite d’autorisation native vous a été présentée et vous avez cliqué sur “Autoriser”. Consultez Problèmes d’affichage des invites ci-dessus si vous ne vous êtes pas abonné via l’invite d’autorisation native.

Si ce qui précède est vrai, suivez ces étapes pour vérifier votre Subscription ID et vous envoyer une notification push :

Obtenir votre Subscription ID

Exécutez le code suivant dans la console des outils de développement du navigateur :

JavaScript

function getUserInfo() {
  console.log('getUserInfo()');
  Promise.all([
    OneSignal.Notifications.isPushSupported(),
    OneSignal.Notifications.permission,
    OneSignal.User.PushSubscription.optedIn,
    OneSignal.User.PushSubscription.id
  ]).then(([
    isPushSupported,
    isSubscribed,
    isOptedIn,
    subscriptionId
  ]) => {
    console.log('The current URL of this page: ', location.href);
    console.log('Push is supported on this browser: ', isPushSupported);
    console.log('You are subscribed to notifications in the browser: ', isSubscribed);
    console.log('You are opted-in with OneSignal: ' , isOptedIn);
    console.log('Your OneSignal Subscription ID: ', subscriptionId);
  }).catch(e => {
    console.error('Error getting user info:', e);
  });
}
getUserInfo();

Cela vous indiquera :

L’URL de la page sur laquelle vous vous trouvez en cas de confusion.
Si le navigateur actuel prend en charge les notifications push.
- true signifie que le navigateur prend en charge les notifications push.
- false signifie que le navigateur ne prend pas en charge les notifications push.
Si vous êtes abonné aux notifications dans le navigateur.
- true signifie que vous avez autorisé les autorisations push pour cette URL.
- false signifie que vous n’avez pas autorisé ou avez refusé les autorisations push pour cette URL.
Si vous êtes opté-in avec OneSignal.
- true signifie que votre abonnement est abonné aux notifications push dans OneSignal.
- false signifie que votre abonnement n’est pas abonné aux notifications push dans OneSignal. Vérifiez si la méthode optOut() est appelée sur votre site.
Votre Subscription ID OneSignal.
- Conservez-le pour l’étape suivante. C’est l’ID que vous utiliserez pour vous envoyer une notification push.
Exemple de sortie des informations utilisateur dans la console

Enregistrez ces données de console dans un fichier texte et partagez-les avec le support OneSignal si vous avez besoin d’une aide supplémentaire.

Envoyez-vous une notification

Si vous êtes abonné aux notifications, opté-in avec OneSignal et que vous avez un Subscription ID, vous pouvez vous envoyer une notification.Suivez les étapes dans Utilisateurs de test pour vous définir comme testeur et vous envoyer une notification.

Tester avec Chrome

Si vous ne recevez pas de notifications dans Chrome, utilisez ces outils de diagnostic spécifiques à Chrome pour identifier le problème.

Dans un nouvel onglet, ouvrez chrome://gcm-internals.
Cliquez sur le bouton “Start Recording” en haut à gauche. Assurez-vous de voir “Connection State: CONNECTED”.
Laissez cela ouvert et envoyez-vous une autre notification push vers votre abonnement push web Chrome.
Vous devriez voir quelque chose dans le “Receive Message Log” si vous l’avez reçue.

Chrome GCM internals page showing Receive Message Log with a received data message — Journalisation des internes GCM

Si vous ne voyez pas de “Data msg received”, alors votre navigateur Chrome ne reçoit pas du tout la notification. Contactez le support OneSignal avec les logs des internes GCM.
Si vous voyez “Data msg received” mais que vous n’avez toujours pas reçu de notification, passez à l’étape suivante.

Ouvrez un nouvel onglet vers chrome://serviceworker-internals
Recherchez Scope: https://your-site.com (remplacez your-site.com par le domaine réel de votre site).
Cliquez sur Inspect, ou Start -> Inspect. Une fenêtre contextuelle des outils de développement Chrome apparaîtra.

Chrome service worker internals page showing the Inspect button for a registered service worker — Inspection du service worker

Dans la fenêtre contextuelle des outils de développement Chrome de notre service worker, cliquez sur l’onglet Console, et exécutez OneSignalWorker.log.trace();. Cela devrait retourner undefined. Tous les messages de notre service worker devraient maintenant apparaître dans cette fenêtre contextuelle.

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 !

Questions fréquentes

Pourquoi est-ce que je vois “SDK already initialized” ?

Le code init du SDK Web OneSignal est appelé plus d’une fois sur la page. Cela se produit souvent lors de la combinaison du plugin WordPress avec du code manuel, ou lorsque la balise init est incluse dans plusieurs modèles de page. Supprimez les appels init en double pour résoudre le problème.

Puis-je utiliser le push web sur des sites HTTP ?

Non. Le push web nécessite HTTPS car les service workers — qui gèrent la livraison des push — ne fonctionnent que sur des origines sécurisées. Si vous utilisiez auparavant l’option “My site is not fully HTTPS”, vous devez migrer vers HTTPS. Consultez Erreurs de configuration pour les étapes de migration.

Comment tester le push web sur localhost ?

Vous pouvez tester sur localhost pendant le développement. Consultez Configuration localhost pour les instructions de configuration. Notez que les tests sur localhost ne fonctionnent que dans les navigateurs basés sur Chromium.

Pages connexes

Configuration du SDK Web

Complétez l’installation et la configuration initiales du SDK Web OneSignal.

Configuration du service worker

Configurez le fichier du service worker OneSignal pour votre site.

Invites d'autorisation

Configurez comment et quand inviter les visiteurs à accorder l’autorisation de push web.

Notifications non affichées

Raisons courantes pour lesquelles les notifications push web peuvent ne pas apparaître sur votre appareil.

Documentation développeur

SDK mobiles

SDK web

Activités en direct

Configuration desktop et montre

Dépannage du SDK Web

Aperçu

Compatibilité des navigateurs

Paramètres de notification de l’appareil

Problèmes d’affichage des invites

Étapes de dépannage

Erreurs de configuration

Erreurs d’installation du service worker

Notifications non affichées

Questions fréquentes

Pourquoi est-ce que je vois “SDK already initialized” ?

Puis-je utiliser le push web sur des sites HTTP ?

Comment tester le push web sur localhost ?

Pages connexes

Configuration du SDK Web

Configuration du service worker

Invites d'autorisation

Notifications non affichées

​Aperçu

​Compatibilité des navigateurs

​Paramètres de notification de l’appareil

​Problèmes d’affichage des invites

​Étapes de dépannage

​Erreurs de configuration

​Erreurs d’installation du service worker

​Notifications non affichées

​Questions fréquentes

​Pourquoi est-ce que je vois “SDK already initialized” ?

​Puis-je utiliser le push web sur des sites HTTP ?

​Comment tester le push web sur localhost ?

​Pages connexes

Configuration du SDK Web

Configuration du service worker

Invites d'autorisation

Notifications non affichées

Aperçu

Compatibilité des navigateurs

Paramètres de notification de l’appareil

Problèmes d’affichage des invites

Étapes de dépannage

Erreurs de configuration

Erreurs d’installation du service worker

Notifications non affichées

Questions fréquentes

Pourquoi est-ce que je vois “SDK already initialized” ?

Puis-je utiliser le push web sur des sites HTTP ?

Comment tester le push web sur localhost ?

Pages connexes