Passer au contenu principal
Apple a commencé à prendre en charge les notifications push sur iOS et iPadOS 16.4+ pour les applications web ajoutées à l’écran d’accueil d’un utilisateur. Cette fonctionnalité fonctionne sur les navigateurs Safari, Chrome et Edge, ouvrant de nouvelles opportunités d’engagement pour les entreprises web-first. Ce guide complet couvre tout ce dont vous avez besoin pour implémenter avec succès les notifications push web iOS.

Exemple de notification push web sur mobile.

​
Mises à jour importantes pour 2025

Prise en charge multi-navigateurs : Les notifications push web fonctionnent désormais sur tous les principaux navigateurs sur iOS/iPadOS 16.4+ incluant Safari, Chrome et Edge. Améliorations iOS 17+ : Implémentation améliorée avec les API pertinentes activées par défaut, rendant le push web plus accessible aux utilisateurs. Considérations de fiabilité : Certains développeurs rapportent des problèmes de fiabilité occasionnels où les notifications push web iOS peuvent fonctionner initialement puis s’arrêter de manière inattendue. Surveillez vos taux de livraison de notifications et ayez des stratégies d’engagement de secours en place.

​
Exigences

  • Version iOS/iPadOS : 16.4 ou supérieure
  • Origine HTTPS : Connexion sécurisée avec design responsive
  • Manifest d’application web : Fichier manifest.json valide avec les paramètres corrects
  • Installation sur l’écran d’accueil : L’application web doit être ajoutée à l’écran d’accueil de l’utilisateur depuis n’importe quel navigateur pris en charge
  • Action initiée par l’utilisateur : L’utilisateur doit interagir avec votre site avant que les invites d’autorisation puissent apparaître
  • Service Worker OneSignal : Requis pour la livraison des notifications

​
Vérification d’application web progressive (PWA)

Si votre site web est déjà une Application Web Progressive (PWA), aucune mise à jour de site supplémentaire n’est nécessaire. Utilisez Lighthouse dans Chrome DevTools pour vérifier si votre site est qualifié comme PWA.

​
Configuration

​
1. Créer votre manifest d’application web

Un Manifest d’Application Web (manifest.json) est un fichier JSON qui définit comment votre application web apparaît et se comporte lorsqu’elle est installée sur l’appareil d’un utilisateur. Pour le push web iOS, ce fichier est obligatoire.

​
Champs obligatoires du manifest

Votre manifest.json doit inclure ces champs essentiels :
  • $schema (recommandé) : URL du schéma JSON pour la validation et le support IDE
  • name (requis) : Nom complet de l’application affiché aux utilisateurs
  • display (requis) : Doit être défini à "standalone" ou "fullscreen" pour la compatibilité iOS
  • start_url (requis) : URL du point d’entrée lorsque l’application démarre
  • icons (requis) : Tableau d’objets d’icône avec plusieurs tailles
  • id (recommandé) : Identifiant unique permettant plusieurs instances d’application

​
Exemple de fichier manifest

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "OneSignal Manifest Example",
  "short_name": "OS Manifest",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#E54B4D",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-256x256.png", "sizes": "256x256", "type": "image/png" },
    { "src": "/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "id": "?homescreen=1"
}

​
Étapes d’implémentation

  1. Placement du fichier : Placez manifest.json dans le répertoire racine de votre site web
  2. Intégration HTML : Ajoutez cette balise link à la section <head> de toutes les pages :
<link rel="manifest" href="/manifest.json"/>
  1. Préparation des icônes : Créez des icônes PNG de haute qualité en plusieurs tailles (192x192, 256x256, 384x384, 512x512 pixels recommandés)
Utilisez des outils comme SimiCart Manifest Generator pour créer rapidement des fichiers manifest, ou validez les existants avec Manifest Tester.

​
2. Ajouter le service worker OneSignal

Si vous avez déjà complété notre configuration du SDK Web et pouvez recevoir des notifications push web sur d’autres navigateurs, cette étape est terminée. Consultez la documentation Service Worker OneSignal pour des instructions de configuration détaillées.

​
3. Configurer les invites d’autorisation

Les invites d’autorisation Web existantes de votre configuration SDK Web fonctionneront sur les appareils iOS uniquement après que les utilisateurs ajoutent votre site à leur écran d’accueil et l’ouvrent depuis là. C’est une exigence de conception d’Apple.

​
4. Guider les utilisateurs vers “Ajouter à l’écran d’accueil”

Contrairement aux appareils de bureau ou Android où les invites d’autorisation apparaissent en fonction de vos paramètres, iOS nécessite un parcours utilisateur spécifique que vous devez faciliter.

​
Le parcours utilisateur requis

Les utilisateurs doivent compléter ces étapes pour recevoir des notifications :
  1. Visiter votre site web sur Safari, Chrome ou Edge sur iOS/iPadOS 16.4+
  2. Cliquer sur le bouton Partager du navigateur
  3. Sélectionner l’option Ajouter à l’écran d’accueil
  4. Enregistrer l’application sur leur appareil
  5. Ouvrir l’application depuis l’écran d’accueil (pas depuis le navigateur)
  6. Interagir avec votre bouton d’abonnement pour déclencher l’invite d’autorisation native

Ajouter un site web à l'écran d'accueil sur iOS

​
Stratégies d’intégration des utilisateurs

Comme ce processus n’est pas intuitif, implémentez des conseils clairs à travers :
  • Bannières de site web : Affichez des bannières spécifiquement sur les appareils mobiles Apple expliquant la valeur des notifications et fournissant des instructions étape par étape.
  • Guides visuels : Utilisez des captures d’écran et des flèches pour montrer aux utilisateurs exactement où appuyer.
  • Timing : Présentez le guide après que les utilisateurs ont démontré leur engagement avec votre contenu.

​
Exemples d’implémentation

Voici des approches efficaces d’applications réelles :

Exemple de bannière invitant les utilisateurs à ajouter à l'écran d'accueil

Guide visuel étape par étape

Messagerie axée sur les avantages

Appel à l'action clair avec des repères visuels

​
Solutions open source

Envisagez d’implémenter cette solution de bannière open source populaire : Projet GitHub : add-to-home-screen par rajatsehgal

Exemple d'une bannière d'invite d'ajout à l'écran d'accueil d'un projet open source par rajatsehgal.

Exemples de bannières supplémentaires et meilleures pratiques disponibles sur web.dev.

​
5. Tests et validation

​
Tests du fichier manifest

  1. Vérification d’accessibilité : Naviguez vers https://votresite.com/manifest.json pour assurer l’accessibilité publique
  2. Outils de développement du navigateur :
    • Ouvrez Chrome DevTools (F12)
    • Allez dans l’onglet Application → Manifest
    • Examinez toutes les erreurs ou avertissements
  3. Validateurs en ligne :

​
Tests de bout en bout des notifications push

  1. Visitez votre site web sur un appareil iOS 16.4+ en utilisant Safari, Chrome ou Edge
  2. Cliquez sur le bouton Partager du navigateur
  3. Sélectionnez Ajouter à l’écran d’accueil
  4. Enregistrez l’application sur votre appareil
  5. Ouvrez l’application depuis l’écran d’accueil (étape cruciale)
  6. Déclenchez votre bouton d’abonnement - l’invite d’autorisation native devrait apparaître
  7. Accordez l’autorisation et testez la livraison des notifications

​
Notes importantes sur les tests

Exigences pour re-tester : Pour tester à nouveau sur le même appareil :
  • Supprimez l’application de l’écran d’accueil
  • Effacez le cache du navigateur (Réglages > Safari/Chrome/Edge > Effacer le cache)
  • Répétez le processus
Récupération après refus d’autorisation : Si l’autorisation est refusée, l’application de l’écran d’accueil doit être supprimée et ré-ajoutée pour que l’invite d’autorisation réapparaisse. Problèmes courants à vérifier :
  • Assurez-vous que le champ display est "standalone" ou "fullscreen"
  • Vérifiez que tous les chemins d’icône sont accessibles
  • Confirmez que le manifest est servi avec le type MIME correct (application/manifest+json)
  • Testez les erreurs CORS

​
Dépannage

Manifest ne se charge pas : Vérifiez le chemin du fichier, l’exigence HTTPS et la configuration du type MIME sur votre serveur. Icônes ne s’affichent pas : Vérifiez l’accessibilité du fichier d’icône et les spécifications de taille correctes dans le manifest. Invite d’autorisation n’apparaît pas : Assurez-vous que l’utilisateur a accédé au site via l’application de l’écran d’accueil et a cliqué sur un élément interactif en premier. Notifications ne se livrent pas : Vérifiez que le service worker OneSignal est correctement installé et consultez la console du navigateur pour les erreurs.

​
Étapes suivantes

Vous êtes maintenant prêt à envoyer des notifications ! Continuez vers la documentation Push ou utilisez notre API Créer un message pour commencer à engager vos utilisateurs iOS avec des notifications push web.
Pour un succès continu, surveillez vos métriques de performance du push web iOS et envisagez d’implémenter des stratégies d’amélioration progressive qui gèrent avec élégance les étapes supplémentaires requises pour les utilisateurs iOS tout en offrant des expériences fluides sur d’autres plateformes.