Vous cherchez un moyen simple d'ajouter des notifications push PWA ?
Les Progressive Web Apps (PWA) sont des applications qui fonctionnent sur n'importe quel appareil. Mais il y a toujours un conflit avec l'envoi de notifications push web. Habituellement, le plus gros problème est le taux de livraison. Vous pouvez ajouter des notifications push web à votre PWA de plusieurs manières. Mais comment envoyer des notifications push web qui sont réellement livrées depuis votre PWA ?
Ne vous inquiétez pas ! Dans cet article, nous allons vous montrer étape par étape comment envoyer des notifications push PWA avec des taux de livraison fiables en moins de 10 minutes.
Plongeons dans le vif du sujet.
TL;DR — Qu'est-ce que les notifications push PWA ? Les notifications push de Progressive Web App (PWA) sont des messages push web standard livrés via le service worker enregistré d'une PWA, permettant aux applications installées depuis le web de recevoir des messages push même lorsque la page web est fermée.
Envoyez des notifications push PWA dès aujourd'hui !
Les notifications push sont un outil marketing super efficace et peu coûteux pour vous aider à augmenter votre trafic de retour, votre engagement et vos ventes en mode automatique.
Comment installer les notifications push PWA
L'ajout de notifications push à une Progressive Web App est assez simple. Suivez simplement les étapes de cet article. Si vous suivez chaque étape, à la fin de cet article, vous devriez être en mesure d'envoyer des notifications push comme celle-ci :
- Enregistrez un service worker à la racine du site qui combine la logique PWA et la gestion des notifications push.
- Installez le script PushEngage et copiez le code d'installation dans
<head>. - Configurez la fenêtre modale d'opt-in et créez une campagne dans le tableau de bord PushEngage.
Le principal défi est que tous les logiciels de notification push web utilisent un fichier Javascript appelé service_worker.js. Le service worker vous aide à collecter les abonnés aux notifications push via des fenêtres modales pop-up. Mais toutes les PWA ont déjà un fichier de service worker qui sert à un autre objectif. Et à la fois, votre PWA ne peut utiliser qu'un seul service worker.
En termes simples, les services de notifications push web confondent votre PWA. Ainsi, parfois, il collectera les abonnés aux notifications push et parfois, il ne le fera pas. Parfois, vous pourrez envoyer des notifications et parfois, vous ne le pourrez pas. Vous pourriez même finir par envoyer des messages push à toute votre liste d'abonnés et qu'ils ne soient livrés qu'à quelques abonnés.
Nous vous recommandons d'utiliser PushEngage pour envoyer des notifications push PWA. PushEngage est le logiciel de notification push n°1 au monde. Vous savez donc que vos campagnes sont entre de bonnes mains.
Bien sûr, les constructeurs de PWA comme Mendix sont livrés avec leur propre système de notification push. Mais que faire si vous souhaitez migrer vers un autre service de notification push ? Que faire si vous souhaitez plus de flexibilité et de contrôle sur vos campagnes de notification push ? De plus, ces services vous fournissent généralement une API pour créer des campagnes push. Mais avec PushEngage, vous obtenez un tableau de bord facile à utiliser à partir duquel vous pouvez créer, planifier, envoyer et gérer des campagnes push.
Et oui, vous pouvez utiliser Firebase Cloud Messaging (FCM) pour envoyer des notifications push d'applications Android. Mais avec PushEngage, vous pouvez envoyer des notifications push d'applications Android et web, des notifications push web et d'applications iOS et iPadOS, ainsi que des notifications push de navigateur.
Le meilleur ? Vous pouvez même envoyer de puissantes notifications push e-commerce en quelques clics.
| Fait | Valeur |
|---|---|
| Mécanisme de livraison principal | Service worker (abonnement push) |
| Temps d'installation typique | ~10 minutes (de base) |
| Exigence courante | service_worker.js à la racine + manifest.json |
| Fonctionne sur | La plupart des navigateurs de bureau et Android (varie selon la plateforme) |
Commençons.
Étape n°1 : Configurer votre compte PushEngage
Rendez-vous sur la page d'accueil de PushEngage et cliquez sur le bouton Commencer :
Vous pouvez essayer PushEngage gratuitement. Si vous gérez un petit blog qui a besoin de trafic et d'engagement répétés, cela suffira probablement. Mais si vous êtes sérieux au sujet des ventes, vous devriez obtenir le package Enterprise et débloquer les campagnes automatisées.
Une fois que vous avez créé votre compte PushEngage, rendez-vous sur votre tableau de bord PushEngage et allez dans Paramètres du site » Détails du site :
Vous pouvez y définir votre logo, le nom de votre site et l'URL de votre site. Il est très important de régler ces éléments dès maintenant afin de pouvoir tester toute votre configuration plus tard.
Étape n°2 : Obtenir le code d'installation de PushEngage
Pour installer les notifications push, vous devrez obtenir un code d'installation. Dans votre écran Paramètres du site, faites défiler vers le bas et cliquez sur le bouton Cliquez ici pour les instructions de configuration :
Ensuite, cliquez sur l'onglet N'importe quel site :
Vous pouvez utiliser le code Javascript pour commencer à envoyer des notifications push.
Étape n°3 : Ajouter le code du service worker pour les notifications push PWA
La partie la plus délicate du processus est enfin là. Dans le tableau de bord PushEngage, sous Instructions d'installation, vous verrez également une option pour télécharger le fichier du service worker.
IMPORTANT : Une PWA ne peut avoir qu'un seul périmètre de service worker actif à la fois — fusionnez le code push dans votre service worker existant. Par défaut, une PWA ne nécessite pas de fichier de service worker. Tout ce dont vous avez besoin pour transformer n'importe quel site en une Progressive Web App est un fichier manifeste. Donc, si votre PWA n'a pas de fichier de service worker, vous pouvez simplement ajouter le service worker PushEngage au répertoire racine de votre site Web ou application Web.
Mais si votre PWA a déjà un service worker en place, alors NE téléchargez PAS directement le fichier du service worker de notification push PushEngage tel quel. Ouvrez le service worker PushEngage dans un éditeur de texte comme le Bloc-notes et copiez le code du fichier du service worker PushEngage. Ensuite, trouvez le fichier du service worker pour votre PWA et ajoutez simplement le code du service worker PushEngage au fichier.
Si vous négligez cette étape, vous ne pourrez pas collecter d'abonnés aux notifications push.
Étape n°4 : Configurer l'opt-in PushEngage
Maintenant, retournez à votre tableau de bord PushEngage. Allez dans Design » Modèles de popup et sélectionnez l'option de votre choix :
L'idée ici est de donner à vos visiteurs une bonne raison de s'abonner. Si vous avez besoin d'aide à ce sujet, consultez notre article sur comment créer un opt-in de notification push personnalisé.
Et si vous souhaitez des modèles pour commencer, vous devriez consulter cet article sur les opt-ins de notification push à haute conversion.
Étape n°5 : Créer votre première campagne
Maintenant que votre PWA peut envoyer des notifications push, vous devriez créer une campagne réelle.
Une campagne de panier abandonné aide à générer des revenus supplémentaires en convertissant les paniers abandonnés. C'est un simple rappel qui vend beaucoup de produits en mode automatique. C'est donc une excellente campagne pour soutenir toute page de destination qui génère des ventes directes.
Rendez-vous simplement sur votre tableau de bord PushEngage et allez dans Campagnes » Campagnes déclenchées » Créer une nouvelle campagne déclenchée :
Et ensuite, sélectionnez le modèle de campagne Abandon de panier :
Si vous débutez dans la création de campagnes marketing automatisées, vous pouvez simplement suivre notre article sur comment configurer une campagne de notification push de panier abandonné. Suivez chaque étape et vous pourrez configurer des notifications push comme celle-ci :
Et juste au cas où vous vous demanderiez, vous n'avez pas besoin d'être une marque de renommée mondiale pour que vos campagnes de notifications push soient efficaces. En fait, PushEngage a été créé pour aider les petites entreprises à se développer grâce aux notifications push.
Mais avant de commencer à commercialiser votre site, vous devriez corriger tout problème avec votre processus d'abonnement aux notifications push. Consultez cet article sur le test de vos notifications push. Si tout fonctionne parfaitement, vous avez terminé !
Questions fréquemment posées
Q : Les notifications push PWA nécessitent-elles un service worker ?
R : Oui. Les messages push PWA sont délivrés par le service worker enregistré qui doit inclure la gestion des événements push.
Q : Puis-je envoyer des notifications push PWA sur iOS ?
R : La prise en charge iOS pour les notifications push web basées sur un service worker est limitée ; les navigateurs Android et de bureau prennent largement en charge les notifications push PWA. (Si vous avez des informations précises sur le statut iOS, remplacez par une déclaration courte et actuelle et citez la source.)
Q: Quelle est l’erreur d’intégration la plus courante ?
R : Téléverser un service worker Push distinct à la racine sans le fusionner avec le service worker existant du PWA, ce qui entraîne des conflits et des abonnements manqués.
Que faire après avoir ajouté les notifications push PWA ?
C'est tout pour cette fois, les amis !
Vous pouvez désormais envoyer des notifications push PWA. D'ici là, vous aurez également créé une campagne de notifications push Web puissante pour stimuler votre croissance. Tout cela, en moins de 10 minutes !
Découvrez comment créer d'autres campagnes automatisées de notifications push. La plupart des campagnes push sont simples et efficaces. Nous vous recommandons donc de configurer plusieurs campagnes pour votre site. Voici quelques excellentes campagnes pour commencer :
- Comment envoyer automatiquement des notifications push RSS
- Comment configurer les notifications push d'abandon de panier à l'aide de GTM
- Comment programmer les notifications push facilement [Guide de 5 min.]
Et si ce n'est pas déjà fait, commencez avec PushEngage. PushEngage est le logiciel de notification push n°1 au monde. Vos campagnes sont donc entre de bonnes mains.
