REX Push Web PWA

Adrien Body
Sep 3, 2018 · 3 min read

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.

Blog inno OUI.sncf

Le blog du labΩ

    Adrien Body

    Written by

    I'm a software engineer, member of a innovation team. I love discovering new technologies, and doing it testing in depth. Tech is as important as his usage.

    Blog inno OUI.sncf

    Le blog du labΩ

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade