Remarque : Il n'y a pas de documentation héritée disponible pour cet élément, vous voyez donc la documentation actuelle.
Apple a publié iOS et iPadOS 16.4, qui prend en charge les notifications push web pour les applications web ajoutées à l’écran d’accueil sur les appareils iPhone et iPad. Dans ce guide, nous vous aidons à configurer votre site web pour envoyer des notifications aux utilisateurs d’iPhone et d’iPad visitant votre site web.
Débloquez une portée illimitée sur les appareils iOS. Ne manquez pas l’élan.
Configurez dès aujourd’hui et faites revenir les visiteurs de votre site avant qu’ils ne vous oublient. Commencez gratuitement, envoyez plus intelligemment et développez-vous avec un plan adapté à votre site.
Les notifications push web sont disponibles pour le navigateur Safari, Google Chrome et Edge sur iPhone et iPad avec iOS et iPadOS 16.4. iOS exige que l’utilisateur ajoute votre site web à son écran d’accueil, puis ouvre l’application web en appuyant sur son icône. L’application web s’ouvre comme toute autre application native sur iOS ou iPadOS au lieu de s’ouvrir dans un navigateur. Les utilisateurs peuvent accorder la permission de recevoir des notifications push, puis gérer ces permissions dans les paramètres de notification, comme toute autre application sur iPhone et iPad.
Avant de commencer
Vous avez besoin de quelques éléments pour que les campagnes push web fonctionnent sur les appareils iOS.
- Votre application web doit servir un fichier de manifeste d’application web (manifest.json) avec son membre display défini sur standalone ou fullscreen.
- Les utilisateurs doivent être sous iOS ou iPadOS 16.4 ou une version ultérieure.
- L’utilisateur doit installer l’application web sur son écran d’accueil en appuyant sur le bouton Partager pour ouvrir le menu Partager, puis en appuyant sur « Ajouter à l’écran d’accueil ».
- Un geste de l’utilisateur, tel qu’un clic ou un appui sur un bouton, est requis pour afficher l’invite de permission native et autoriser la permission de recevoir des notifications push.
Si votre site web est déjà une Progressive Web App (PWA), vous n’avez pas besoin d’apporter de mises à jour supplémentaires pour vous préparer aux notifications push web iOS/iPadOS. En cas de doute sur le fait que votre site web soit une PWA, vérifiez auprès de votre équipe de développement ou utilisez Lighthouse dans Chrome DevTools.
Configuration de votre site web pour les notifications push web iOS et iPadOS
Suivez les étapes pour activer et envoyer des notifications push à Safari sur iPhone et iPad :
- 1. Ajoutez un fichier de manifeste d’application web à votre site web.
- 2. Intégrez PushEngage sur votre site web.
- 3. Déployez et testez le manifeste de votre site web.
- 4. Testez la fenêtre modale de la boîte de dialogue d’abonnement et l’invite de permission.
1. Ajoutez un fichier de manifeste d’application web à votre site web
Le manifeste d’application web est un fichier JSON qui renseigne le navigateur sur votre Progressive Web App (PWA) et sur la manière dont elle doit apparaître et se comporter lorsqu’elle est installée sur le bureau ou l’appareil mobile de l’utilisateur. Il contient des métadonnées telles que le nom de votre application web, sa description, ses icônes, sa palette de couleurs et l’URL qui doit être ouverte au lancement de l’application.
Vous pouvez utiliser n’importe quel outil en ligne pour générer rapidement un fichier de manifeste. Le fichier de manifeste peut porter n’importe quel nom, mais il est généralement nommé manifest.json et doit être téléchargé dans le répertoire racine de votre site web. Si vous avez besoin d’aide pour ajouter du code à votre site WordPress, essayez le plugin WPCode.
Un manifeste typique ressemble à ceci :
{
"name": "PushEngage",
"short_name": "PushEngage",
"start_url": "/",
"display": "standalone",
"theme_color": "#3b43ff",
"background_color": "#ffffff",
"icons": [
{
"src": "icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Remarque : La valeur du membre display dans le manifeste doit être définie sur standalone ou fullscreen.
Après avoir créé le fichier manifeste, référencez le manifeste dans la page HTML de votre site Web à l'aide d'une balise <link> dans la section <head> de la page.
Par exemple :
<link rel="manifest" href="/manifest.json">
2. Intégrer PushEngage sur votre site Web
L'étape suivante consiste à intégrer PushEngage sur votre site Web pour gérer l'enregistrement et l'installation du Service Worker sur la page.
Si vous n'avez pas terminé l'installation, voici le guide d'installation de PushEngage. Si vous êtes un utilisateur WordPress, vous pouvez utiliser le plugin WordPress PushEngage, qui gérera l'enregistrement du service worker.
Vous pouvez suivre les étapes mentionnées ici si vous avez déjà votre service worker et que vous devez le fusionner avec le service worker de PushEngage.
3. Déployer et tester le manifeste de votre site Web
Une fois que vous avez téléchargé le manifeste et intégré PushEngage, l'étape suivante consiste à tester votre application Web pour vous assurer que le manifeste de votre application Web a été correctement implémenté. Vous pouvez tester votre site Web sur divers appareils et navigateurs en l'ajoutant à votre écran d'accueil.
Suivez ces étapes :
- 1. Ouvrez le site Web dans le navigateur Safari exécuté sur iOS 16.4 ou une version ultérieure
- 2. Cliquez sur le bouton « Partager » pour ouvrir le menu de partage.
- 3. Cliquez sur l'option « Ajouter à l'écran d'accueil ».
- 4. Enregistrez l'application sur votre écran d'accueil.
Si votre site Web a été configuré avec succès pour les notifications push Web, il ouvrira l'application Web comme toute autre application sur iOS ou iPadOS au lieu de s'ouvrir dans un navigateur et d'agir simplement comme un raccourci.
Vous devez informer votre utilisateur en affichant une bannière sur l'écran de l'application, lui demandant d'ajouter votre application à l'écran d'accueil de son appareil iOS et de s'abonner aux notifications push Web.
4. Tester la boîte de dialogue d'abonnement
Une application Web sur l'écran d'accueil sur iOS et iPadOS nécessite une interaction directe de l'utilisateur, telle que le tapotement sur un bouton de la page pour afficher la boîte de dialogue d'abonnement pour autorisation. Suivez ces étapes pour tester que l'invite d'autorisation fonctionne :
- 1. Ouvrez l'application Web en tapotant l'icône de l'application depuis l'écran d'accueil de votre appareil.
- 2. Attendez que la boîte de dialogue d'abonnement PushEngage apparaisse sur la page.
- 3. Cliquez sur le bouton « Autoriser » dans la fenêtre modale contextuelle PushEngage pour afficher l'invite d'autorisation.
- 4. Cliquez sur le bouton « Autoriser » dans l'invite d'autorisation.
Remarque : La boîte de dialogue d'abonnement n'apparaîtra que si votre site Web est HTTPS et que l'application a été lancée depuis l'écran d'accueil. Vous pouvez personnaliser la conception et le comportement de la boîte de dialogue d'abonnement à partir du tableau de bord PushEngage.
Envoyer une campagne de notifications push Web aux utilisateurs iOS et iPadOS
Une fois que vous avez terminé les étapes ci-dessus requises pour les notifications push Web iOS et iPadOS, vous pouvez maintenant commencer à envoyer une notification push en utilisant le tableau de bord PushEngage.
Les notifications push Web sur iOS fonctionnent de manière similaire aux autres applications natives. Les notifications push Web s'affichent à l'écran comme une notification d'alerte, dans le centre de notifications et également sur l'écran de verrouillage. Les utilisateurs peuvent également gérer leurs préférences de notification dans les Réglages iOS. Une fois que vous cliquez sur la notification, elle vous mènera à la page de destination souhaitée dans l'application Web.
La structure d'une notification push Web sur iOS
Les notifications push de Safari sur iOS ne prennent actuellement pas en charge les médias riches, les GIF animés ou les vidéos. Une fois que ces fonctionnalités seront ajoutées, nous les activerons également. Veuillez suivre les directives ci-dessous pour créer vos notifications pour les utilisateurs iOS.
Les notifications push Web sur iOS et iPadOS comprennent les éléments suivants :
- 1. Icône – L'icône spécifiée dans le fichier manifeste. Elle ne peut pas être modifiée pour des messages individuels.
- 2. Titre – Le titre est limité à 30-40 caractères, après quoi il est tronqué.
- 3. Nom de l'application – Le nom de l'application est indiqué dans le fichier manifeste et ne peut pas être modifié pour des messages individuels.
- 4. Message – Le texte est limité à 120-150 caractères, après quoi il est tronqué.
- 5. Horodatage – Ceci indique depuis combien de temps la notification a été délivrée à l'appareil.
C'est tout ce dont vous avez besoin pour commencer à collecter des abonnés et à envoyer des campagnes à vos utilisateurs d'iPhone et d'iPad.
Si vous rencontrez des problèmes, veuillez nous contacter en cliquant ici. Notre équipe d'assistance pourra vous aider.
