PWA, Au delà du buzzword

Présentation PWA à la Branche Numérique de La Poste

Transcript

1. PWA, au-delà du buzzword
2. Antoine Le Taxin Développeur / Craftsman @ModuloM Paul-Guillaume Déjardin Développeur / Craftsman @pgdejardin
3. Un cas (pas) pratique
7. 1. Qu’est-ce que c’est ? 2. Les usages 3. Les prérequis 4. Les caractéristiques
8. Progressive Web App, un terme marketing • PWA : web application moderne toutes options • Spec W3C (Google, Mozilla, etc.) • Pas si nouveau que ça, on entend parler de PWA depuis 2015
9. 1. Qu’est-ce que c’est ? 2. Les usages 3. Les prérequis 4. Les caractéristiques
10. • 25% des applications sont abandonnées après la première utilisation • 42% du temps est passé sur l’app la plus utilisée • 65% des utilisateurs n’installent aucune app chaque mois Il existe une application pour tout
11. Pour installer une PWA...
12. Les standards du web évoluent • Le web peut faire mieux que ce que vous pensez ! https://whatwebcando.today • Pourquoi faire une application si le web peut le faire ?
13. 1. Qu’est-ce que c’est ? 2. Les usages 3. Les prérequis 4. Les caractéristiques
14. Progressive
16. Responsive
18. Safe
19. HTTPS only Le service worker intercepte TOUS les appels émis depuis le client…
20. Plus aucune excuse • Certificats classiques • Let’s Encrypt • https://certbot.eff.org/ (exemple sous Debian) $ wget https://dl.eff.org/certbot-auto $ chmod a+x certbot-auto $ ./path/to/certbot-auto certonly --standalone -d example.com -d www.example.com $ ./path/to/certbot-auto renew --no-self-upgrade
21. 1. Qu’est-ce que c’est ? 2. Les usages 3. Les prérequis 4. Les caractéristiques
22. Connectivity independent
23. Le service worker C’est un proxy réseau programmable en Javascript avec du cache
24. Le SW s’installe entre le navigateur et le réseau
25. if ('serviceWorker' in navigator) { // Register service worker navigator.serviceWorker.register('/sw.js').then((registration) => { // :-) }).catch((err) => { // :-( }); } Enregistrement (app.js)
26. Une forme de vie extérieure • S’exécute sur un thread différent que le code Javascript principal => pas d’accès à window, document, le DOM • Peut être réveillé même quand le navigateur n’est pas actif • Toutes les requêtes sont asynchrones • Pas de contrôle du développeur sur son cycle de vie
28. 'install' 'activate' 'fetch' 'push' // notification ... Quelques events de l’API SW
29. Installation (sw.js) const CACHE = `MiXit-cache::${Date.now()}`; const assets = [ '/styles/app.css', '/script/app.js, /* (...) */ ]; self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE) .then((cache) => cache.addAll(assets)) ); });
30. Activation (sw.js) self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((keylist) => Promise.all( keylist .filter((key) => key !== CACHE) .map((key) => caches.delete(key)) )) .then(() => self.clients.claim()) ); });
31. Différentes stratégies possibles
32. Exemple : network fallback
33. Appel (sw.js) self.addEventListener('fetch', (event) =>{ event.respondWith( caches.match(event.request) .then((response) => { return response || fetch(event.request); }) ); }); https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
34. Bien calibrer son cache...
35. Compatibilité
36. Fresh
37. Temps moyen de validation des app mobiles
38. Discoverable & Linkable
39. • Les moteurs de recherche reconnaissent certaines caractéristiques des PWA (manifest, Service Worker) • SEO classique • Ajout dans les stores (Microsoft, ...) Retrouver une PWA
40. • Chaque page doit être accessible directement via un lien... • … que l’on peut partager facilement Tout partager grâce à… l’hypertexte
41. Installable & App-like
42. Installable Popup d'ajout sur homescreen On peut renommer l'application Elle apparaît comme une app native
43. Manifest { "name": "developer.laposte.fr", "short_name": "dev.laposte", "theme_color": "#ffc928", "background_color": "#eeeeee", "display": "standalone", "orientation": "portrait", "splash_pages": null, ... ... "icons": [ { "src": "icon-72x72.png", "sizes": "72x72", "type": "image/png" }, … ] }
44. App-like Ecran de chargement d'une app Page d'accueil de developer.laposte.fr Une autre page de developer.laposte.fr
45. Re-engageable
46. Notifications • Une API comprise dans le Service Worker (Push API) • Firebase Cloud Messaging • Un système d'autorisation via le browser • Activations / Désactivation par l'UX
47. Comment ça marche côté client ?
48. Un peu de code function getNotificationPermissionState() { if (navigator.permissions) { return navigator.permissions.query({ name: 'notifications' }) .then(permission => { return permission.state; }); } return new Promise(resolve => { resolve(Notification.permission); }); }
49. Souscrire un utilisateur function subscribeUserToPush() { return getSWRegistration() .then(registration => { const subscribeOptions = { applicationServerKey: urlBase64ToUint8Array('MyApplicationKey') }; return registration.pushManager.subscribe(subscribeOptions); }) .then(pushSubscription => { console.log('Received PushSubscription: ', JSON.stringify(pushSubscription)); return pushSubscription; }); }
50. Un exemple de souscription { "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/", "keys": { "p256dh": "dreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7", "auth": "tBHItJI5svbpez7KI4CCXg==" } }
51. Et ensuite ?
52. Envoyer une notification const webpush = require('web-push'); // This is the same output of calling JSON.stringify on a PushSubscription const pushSubscription = { endpoint: '.....', keys: { auth: '.....', p256dh: '.....' } }; webpush.sendNotification(pushSubscription, 'Your Push Payload Text');
53. ...Pour finir
54. Recevoir une notification self.addEventListener('push', event => { logger.log('[Service Worker] Push Received.'); const data = event.data.json(); const title = data.title; const options = { body: data.body, icon: 'images/icon.png', badge: 'images/badge.png', }; event.waitUntil(self.registration.showNotification(title, options)); });
55. Notifications
56. Interagir avec une notification self.addEventListener('notificationclick', event => { logger.log('[Service Worker] Notification click Received.'); event.notification.close(); event.waitUntil(clients.openWindow('https://developer.laposte.fr')); });
57. Conclusion
58. Tooling • sw-toolbox • sw-precache • serviceworker-webpack-plugin • offline-plugin • Lighthouse
61. Merci ! Des questions ?