Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Web Push notifications
Semelhante a Web Push notifications (20)
Último
Último (20)
Web Push notifications
- 1. Louis Lagrange @Minishlink April 25th, 2017 Web Push notifications Increase user engagement with standard, free, and privacy-friendly push notifications
- 2. 2 • Standards • Push API • https://www.w3.org/TR/push-api • WebPush Protocol • https://tools.ietf.org/html/rfc8030 • WebPush Encryption • https://tools.ietf.org/html/draft-ietf-webpush-encryption • WebPush VAPID • https://tools.ietf.org/html/draft-ietf-webpush-vapid Web Push? Client Your server Push service
- 3. 3 Browser support Chrome Chrome for Android Firefox Firefox for Android Opera Samsung Mobile Edge (in development) April 25th, 2017
- 4. 4 Demo
- 6. 6 Do’s ✅No overload ✅Good timing ✅Make your users happy - personnalize
- 7. 7 Cool parameters TTL (Time-to-live) Trigger notifications up to set period of time Urgency Don’t suck your user’s battery Topic Show up-to-date content
- 8. 8 Architecture PWA User browser Push service Browser vendor App Server Subscribe Receive subscription Store subscription Some task that’d benefit from notification Encrypt & send Send & decrypt Push API Push API Your app/server logic WebPush protocol WebPush encryption VAPID Push API Your app/server logic
- 9. 10 • Server libraries available for most languages • GitHub org « Web Push Libs » • https://github.com/web-push-libs • Javascript • PHP • Python • C# • Java • C In practice
- 11. 12 Does it scale? 80 000 endpoints 110ms/notification How to improve performance ? Now : 1. MultiCurl for concurrency 2. Use PHP7.1 3. Install php-crypto extension 4. Trade security for performance In the future: 1. Batch sending in the Web Push procotol? 2. Native PHP encryption
- 12. 14 • Title • Body • Icon • Badge • Actions • Sound • Vibration • Date And on the client?
- 13. 15 • web-push-php-example • https://github.com/Minishlink/web-push-php-example • Matthew Gaunt’s Web Push Book • https://web-push-book.gauntface.com • Mozilla’s ServiceWorkers Cookbook • https://serviceworke.rs/push-payload_index_doc.html • Google’s Web Push Notifications Codelab • https://developers.google.com/web/fundamentals/getting- started/codelabs/push-notifications/ Examples
Notas do Editor
- Bonjour à tous ! Aujourd’hui je vais essayer de vous donner toutes les clés qui vont vous permettre d’intégrer des push notifications dans votre PWA On parle bien de notification pushs, et non locales, ce qui veut dire que depuis votre serveur, vous pouvez envoyer un message à n’importe quel utilisateur qui a souscrit à ces notifications
- Ici, on va parler de l’ensemble de standards Web Push Fait par W3C (World Wide Web Consortium et l’IETF Internet Engineering Task Force Push API c’est l’API Javascript cliente, donc pour le navigateur de l’utilisateur Le protocole Web Push concerne à la fois le Push service et votre serveur, mais majoritairement le service Push. Et l’encryption et l’identification concernent votre serveur Si on s’intéresse aux contributions faites sur ces standards (dont le travail est open source !), on voit tout de suite que les meneurs sont Mozilla et Google
- Le support des navigateurs est classique pour une fonctionnalité de Progressive Web App On retrouve les meneurs Chrome et Firefox Edge un peu à la traîne mais c’est en train de changer Et Safari inconnu au bataillon
- C’est un process opt-in que je vous encourage à aborder. Ne spammez pas l’utilisateur d’une demande de permission dès qu’ils arrivent sur votre PWA, c’est horrible comme expérience Là mon bouton est tout aussi horrible, mais vous pouvez trouver des façons innovantes de donner envie à votre utilisateur de souscrire à ces notifications Vous pouvez même le rassurer en affichant un bouton de réglage directement à côté, de façon à ce qu’il puisse moduler les notifications à recevoir ou non Et en terme de contenu, quelles sont les bonnes pratiques ?
- Après tout, on peut très bien faire des applis sans notifications D’ailleurs, les notifications, ça devient vite ennuyant lorsqu’on en a beaucoup L’autre jour, j’ai reçu une notification de WhatsApp qui me disait que j’avais « peut-être » reçu un nouveau message N’envoyez pas de notifications à des moments inopportuns, là on a un utilisateur qui reçoit une notif pour un nouveau restaurant au milieu de la nuit, c’est rageant De même n’envoyez pas de contenu qui n’a rien à voir avec votre appli
- Bonne nouvelle avec Web Push, vous avez tout un tas de paramètres qui vous permettent d’éviter ces écueils Par exemple, prenons un utilisateur A qui appelle B, si B n’est pas connecté à Internet, il ne recevra aucune notification (ni d’appel) avant qu’il ait de nouveau Internet. Et bien pour éviter qu’il reçoit une notification « A vous appelle » lorsqu’il a de nouveau Internet, vous pouvez dire que la notification a une certaine durée de vie (ici on la mettra à quelques secondes) D’autre part, vous ne voulez pas que vos PWA utilisent trop de batterie. Du coup, vous avez un paramètre qui s’appelle « Urgency », urgence. Selon le degré d’urgence de votre contenu, la notification ne sera affichée chez l’utilisateur seulement s’il est connecté en Wifi et branché… Enfin, si jamais vous voulez modifier le contenu d’une notification, pour par exemple corriger une info éronnée, vous le pouvez en spécifiant un identifiant unique appelé un topic (sujet) Si vous envoyez une nouvelle notification avec le même sujet, l’utilisateur recevra le nouveau contenu s’il n’a pas encore reçu la notif
- C’est simplifié ici mais on peut déjà identifier trois acteurs : Votre PWA et le navigateur de l’utilisateur, Le service push, qui est géré par l’éditeur du navigateur Votre serveur sur lequel vous allez stocker tous vos abonnements
- Vous avez vu
- C’est un peu compliqué tout ça, du coup à l’époque j’ai fait une bibliothèque en PHP pour simplifier Aujourd’hui on a rassemblé toutes ces bibliothèques sous une organisation donc c’est beaucoup plus facile pour les développeurs C’est super simple à utiliser, faites juste attention aux pré-requis
- Par exemple, en PHP ça donne ça L’authentification, vous la générez une fois pour votre serveur La souscription, vous l’avez stockée sur votre serveur La bibliothèque vous fait tout le boulot de chiffrement et d’envoi au service de push
- One user in Vietnam has 80 000 endpoints It takes him 2 hours and a half so that means 110 ms / notification (assuming they’re sent one by one) Multiple ways to optimize for performance : Trade privacy for performance by disabling or limiting padding length Future optimizations
- On peut personnaliser chaque notification avec notamment des icones et des actions Une bonne pratique pour le titre est de ne pas afficher le nom de votre site, car le logo est fait pour ça, et la notification affiche l’URL Le badge c’est l’icone qui s’affiche dans la barre de notification
- Pas facile en 10 minutes de faire le tour des Web Push Donc voici quelques ressources qui vont permettront d’approfondir le sujet
- J’espère que vous avez maintenant toutes les clés pour explorer les Web Push notifications Je n’ai volontairement pas mis de statistiques mirobolantes sur l’impact que peuvent avoir les push notifications sur la rétention d’utilisateurs En effet, les push notifications ne constituent pas la panacée magique qui va révolutionner le marketing de votre app Ce n’est qu’un outil parmi pleins d’autres, et surtout, c’est votre prestation de service, votre habilité à délivrer votre valeur qui est importante pour les utilisateurs Vous pourrez beau avoir des super notifications push comme celle-ci, faites kiffer vos utilisateurs sur tous les fronts, pas comme United Airlines et ses expulsions de passagers :D Pour finir, si vous aussi les web push vous intéressent mais votre serveur est écrit dans un langage pour lequel il n’y a pas encore de bibliothèque, n’hésitez pas à nous envoyer un mail si vous souhaitez contribuer et créer un repo !