REX Push Web PWA

Depuis la sortie des Progressives Web Applications en 2015, les fonctionnalités ne cessent de s’étendre. L’équipe innovation a testé les features de push web, qui permettent aux PWA’s de marcher encore un peu plus sur les plates-bandes des apps natives.

Norme push web

• La norme officielle W3C date de December 2017
• Elle est implémentée depuis Chrome 63, Firefox 61, Edge 17 et sur Android
• Elle utilise des serveurs de push dédiés par Organisation (Google, Mozilla, Microsoft, Apple)
• Certaines règles de push sont en cours de finalisation (pas de silent push, focus, ..)

Rappel des principes d’une PWA

• C’est un site Web avec un service worker qui permet de faire tourner du code en tâche de fond
• C’est installable sur mobile
• Des experts estiment que 80% des apps seront des PWAs 2020
• Responsive oblige
• Gestion d’un mode offline et de mise en cache des fichiers

Fonctionnement des pushs dans une PWA

• Il faut demander une autorisation de notifier
• Il faut s’abonner à un serveur de push avec un système de clés privé publique signées
• Écoute d’un évènement push
• Traitement de la notification, qui peut contenir un objet
• Possibilité d’afficher l’application au clic sur la notification
• HTTPS obligatoire

Fonctionnement du serveur push

• Gérer les abonnements et désabonnements
• Gérer les topics et les User ID’s
• Stockage des clés et des endpoints
• Historique des push

Architecture server

Système de signatures par clés

Echanges de clés et signature pour l’abonnement

Echanges de clés et signature pour la notification

Echanges de clés et signature pour la notification

Open sourced

Nous avons open sourcé le code du server ici : https://github.com/voyages-sncf-technologies/web-push-server

Conclusion

Malgré le fait que la norme de push ne soit pas encore disponible sur tous les devices (mobile IOS), il est indéniable que l’arrivée des pushs web sont un pas de plus pour les PWAs. Il est extrêmement simple de mettre en place ce type de server. Si elles sont correctement exploitées, ce type de notification apporte à l’utilisateur une vrai expérience sur son site web favoris.