Accueil » Blog » Application Mobile » Les piliers des PWA : les notifications push Web ?

La création d’une Progressive Web App engageante change la façon de penser une conception visuelle et les interactions habituelles… Pour proposer une expérience utilisateur agréable et unique, les notifications push web gagnent en popularité. Focus sur ce canal ultra-engageant : les piliers des PWA !

Que signifient les notifications push Web ?

L’idée des notifications n’est pas nouvelle, mais désormais les Progressive Web Apps (PWA) offrent la possibilité d’utiliser une fonctionnalité intéressante. En fait, il s’agit d’envoyer des notifications push web même lorsque le navigateur n’est pas ouvert !

Ainsi, une PWA permet aux utilisateurs de recevoir des messages provenant de sites internet qu’ils aiment via leur navigateur.
Pratique nous direz-vous, puisque l’utilisateur est informé rapidement d’une nouvelle vente, d’un nouveau contenu ou d’une mise à jour importante.

De plus, les notifications Push Web améliorent l’engagement des utilisateurs par le biais d’un contenu personnalisé et pertinent.

Notifications PUSH WEB, un nouveau canal ultra-engageant.
Un lien plus direct avec vos abonnés !

Les notifications push Web sont-elles réellement utiles ?

Aussi, ce nouveau canal de communication est très utile pour de multiples raisons.  C’est une bonne opportunité pour créer des connexions en temps réel avec vos prospects et vos clients. Les notifications push web viennent également compléter votre stratégie marketing et de fidéliser davantage votre clientèle.
Selon l’un des sondages Google, “85% des utilisateurs de smartphones disent que les notifications mobiles sont utiles”.

De même, sur les appareils mobiles, les notifications sont un élément fondamental pour transformer un utilisateur actif mensuel en utilisateur actif quotidien.  Les notifications push Web ne sont pas une nouveauté technologique isolée.
D’ailleurs, es systèmes d’exploitations Microsoft Windows, MacOS, Linux; ainsi que les navigateurs de Google Chrome, Mozilla Firefox, Opera et Samsung Browser sont déjà compatibles.


Bonnes pratiques des push web: Créer une expérience positive.

notifications push web

Ensuite, lorsque vous planifiez vos notifications push web, demandez-vous si elles sont suffisamment importantes pour justifier une interruption ? En cas de doute, autorisez l’utilisateur à accepter des types spécifiques de notifications dans votre application avec leurs propres paramètres de notification.
Par ailleurs, rappelons que les utilisateurs veulent des notifications qui : 

  • contiennent des informations opportunes.
  • offrent suffisamment d’informations pour éviter de visiter l’application.
  • sont personnelles ou contextuelles 
  • changent de jour.

Utilisez les notifications push web principalement pour les événements urgents ! Surtout si ces événements synchronisés impliquent d’autres personnes. 

Quelques exemples de notifications Push web

la cloche représente une notification

Par exemple, un message Chat entrant est une forme de communication en temps réel et synchronisée. Un autre utilisateur attend activement une réponse. S’il s’agit d’une notification de chat, dites-leur de qui il s’agit directement.

Certes, les événements du calendrier sont un autre bon exemple d’utilisation d’une notification. L’événement est imminent et les événements du calendrier impliquent souvent d’autres personnes. 

Vous voulez éviter de notifier à l’utilisateur des informations qui ne lui sont pas spécifiquement destinées, ou des informations qui ne sont pas vraiment sensibles au facteur temps. 

Pour prendre un autre exemple, les notifications ne sont pas des e-mails. Le but d’une notification est de taquiner l’utilisateur afin qu’il ouvre votre application ou de le laisser terminer une tâche sans avoir à ouvrir l’application. N’interrompez pas l’utilisateur pour des opérations techniques de bas niveau ! Tout comme la sauvegarde ou la synchronisation d’informations. Ou bien encore sur la mise à jour d’une application si l’application ou le système peut résoudre le problème sans impliquer l’utilisateur. 

CREEZ DES NOTIFICATIONS PUSH WEB PERSONNELLES

Ne créez pas de notifications si les nouvelles informations pertinentes sont actuellement affichées à l’écran. Au lieu de cela, utilisez l’interface utilisateur de l’application elle-même. Idéal pour informer l’utilisateur des nouvelles informations directement dans le contexte. Par exemple, une application de Chat ne doit pas créer de notification système si la fenêtre de chat est déjà ouverte et que je peux la voir.

Mise en œuvre des notifications Push Web

43%*

d’utilisateurs ayant accepté de recevoir les notifications Push Web

*Taux d’opt-in moyen

La mise en œuvre de Push Web et des notifications comporte trois étapes clés: 

1- L’ajout de la logique côté client pour abonner l’utilisateur, 
2- Votre back-end pour gérer qui est abonné et déclencher l’envoi du message, 
3- Le service worker qui reçoit l’événement push et affiche la notification à l’utilisateur. 

Bien demandez l’autorisation aux utilisateurs

Pour le client, nous devons fournir un moyen facile pour l’utilisateur de s’abonner ou de se désabonner de nos notifications.

Et avant même qu’ils puissent s’abonner, nous devons obtenir leur permission. Une fois que nous avons leur autorisation, nous pouvons utiliser l’API Push pour créer un abonnement et obtenir l’objet d’abonnement push. Vous pouvez le considérer comme un identifiant pour l’appareil de cet utilisateur.

Le fait d’inviter l’utilisateur et de demander l’autorisation d’envoyer et d’afficher des notifications est vraiment important.

réaction des utilisateurs

La réaction des utilisateurs

Si l’utilisateur voit l’invite d’autorisation sans aucun contexte, il est presque assuré de cliquer sur “Bloquer”. Et si cela se produit, votre application Web ne pourra plus demander l’autorisation à l’utilisateur. Ils devront débloquer manuellement votre application en modifiant son état d’autorisation, qui est cachée dans le panneau Paramètres. 

Réfléchissez donc bien à la manière et au moment où vous demandez l’autorisation aux utilisateurs, car s’ils cliquent sur Bloquer, il n’y a pas de moyen facile de revenir sur cette décision. 

La bonne nouvelle est que la plupart des utilisateurs sont heureux de donner leur permission tant qu’ils savent pourquoi l’autorisation est demandée.

Dans certains cas, il est important de demander la permission tôt. Par exemple, des applications de messagerie instantanée ou un client de messagerie. Dans ce cas, considérez le modèle de double autorisation. Tout d’abord, affichez une fausse invite d’autorisation que votre site Web contrôle, composée de boutons permettant d’autoriser ou d’ignorer la demande d’autorisation. 

Si l’utilisateur clique sur Autoriser, déclenchez la demande d’autorisation en invitant l’utilisateur avec la boîte de dialogue d’autorisation du navigateur réel.
Avec cette approche, vous pouvez afficher une invite d’autorisation personnalisée. C’est dans votre application Web qui demande à l’utilisateur d’activer les notifications. En faisant cela, l’utilisateur peut choisir d’activer ou de désactiver les notifications sans risquer d’être bloqué définitivement.

activation des notifications

Comment envoyer un message push ?

En théorie, l’utilisation du protocole Web Push est simple (mais pas tant que cela) .
Les étapes consistent à :

  • Créez votre message sur votre serveur.
  • Cryptez-le à l’aide de la clé publique de l’utilisateur et de votre clé de cryptage privée.
  • Puis utilisez les clés pour le signer avec la clé de sécurité de votre application privée. 
  • Ensuite, définissez le bon ensemble d’en-têtes HTTP 
  • Et effectuez une demande de publication HTTP pour l’envoyer au service qui le remettra ensuite à l’appareil. 

C’est pourquoi, au lieu de gérer cette partie vous-même, nous vous recommandons vivement d’utiliser une librairie Web Push. Ou sinon, de passer par un service comme [Notchi] qui gèrent automatiquement ces étapes pour vous.

Notification Push Web NOTCHI
Notification Push Web NOTCHI

Comment se passe la gestion d’un message ?

Lorsque le service worker reçoit le push il doit en récupérer le contenu et demander l’affichage d’une nouvelle notification contenant au moins un titre et un texte. En plus d’ajouter un corps de texte, vous pouvez également ajouter d’autres propriétés à la notification.

  • Le corps est exactement tel qu’il sonne et peut définir le texte sous le titre.
  • L’icône est une petite image affichée à côté du titre et du corps du texte. Vous pouvez ajouter une image. Ce qui est particulièrement utile pour fournir un aperçu d’image à l’utilisateur. 
  • Et pour Chrome sur Android, vous pouvez spécifier un badge, une petite icône monochrome utilisée dans la barre de notification. Ainsi vous présentez un peu plus d’informations à l’utilisateur sur l’origine de la notification.

Autres propriétés intéressantes

  • Vibreur vous permet de définir un modèle de vibration qui s’exécutera lorsque la notification sera affichée. 
  • Tag vous permet de regrouper les notifications. Si une notification avec cette même balise existe déjà, la nouvelle notification remplacera la précédente. 
  • Renotify : Sans renotify, la notification de remplacement ne vibre pas et ne joue aucun son lorsqu’elle est mise à jour. 

En fait, lorsqu’un utilisateur clique sur une notification, rien ne se passe par défaut.
Pour gérer les clics des utilisateurs, nous devons ajouter un gestionnaire d’événements de clic de notification au service worker. Dans ce cas, nous fermons simplement la notification. Mais nous voulons probablement faire un peu plus que cela. De plus, les actions vous permettent de fournir un autre niveau d’interactions à vos utilisateurs en fournissant des boutons supplémentaires sur lesquels l’utilisateur peut cliquer. 
Par exemple, un utilisateur peut partager ou aimer un message, confirmer une réservation pour un dîner ou passer une commande, le choix vous appartient. 

Envie d’utiliser les notifications push dans vos projets ?

Si jamais, vous avez un site wordpress et souhaitez informer directement vos abonnées quand un nouvel article est publié ? Ou bien vous avez plutôt un site ecommerce et souhaitez envoyez vos promotions sans passer par des emails ?

Découvrez comment notre solution NOTCHI peut vous aider à utiliser les notifications push web pour propulser votre communication digitale au niveau supérieur.

Donc, n’hésitez pas à nous contacter pour que nous regardions ensemble les possibilités qui s’offrent à vous.

Retrouvez nos autres articles sur les PWA :

A propos de l'auteur

Notification

Activez le bouton ci-dessous pour autoriser le site à vous envoyer des notifications.