Progressive Web Apps, au-delà du buzzword

Le concept de Progressive Web App a pour ambition de permettre aux applications web de rivaliser, dans une certaine mesure, avec les applications natives. En s’appuyant sur quelques bonnes pratiques et certaines technologies, l'expérience utilisateur est considérablement améliorée en corrigeant par exemple les soucis de connectivité sur mobile ou en permettant l'utilisation de notifications.

Transcript

1. PWA, au-delà du buzzword
2. Antoine Le Taxin Développeur / Craftsman @ModuloM Paul-Guillaume Déjardin Développeur / Craftsman @pgdejardin
4. Un cas (pas) pratique
8. 1. Qu’est-ce que c’est ? 2. Les usages 3. Les prérequis 4. Les caractéristiques
9. 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
10. 1. Qu’est-ce que c’est ? 2. Les usages 3. Les prérequis 4. Les caractéristiques
11. • 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
12. Pour installer une PWA...
13. 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 ?
14. 1. Qu’est-ce que c’est ? 2. Les usages 3. Les prérequis 4. Les caractéristiques
15. Progressive
17. Responsive
19. Safe
20. HTTPS only Le service worker intercepte TOUS les appels émis depuis le client…
21. 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
22. 1. Qu’est-ce que c’est ? 2. Les usages 3. Les prérequis 4. Les caractéristiques
23. Connectivity independent
24. Le service worker C’est un proxy réseau programmable en Javascript avec du cache
25. Le SW s’installe entre le navigateur et le réseau
26. if ('serviceWorker' in navigator) { // Register service worker navigator.serviceWorker.register('/sw.js').then((registration) => { // :-) }).catch((err) => { // :-( }); } Enregistrement (app.js)
27. 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
29. 'install' 'activate' 'fetch' 'push' // notification ... Quelques events de l’API SW
30. 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)) ); });
31. 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()) ); });
32. Différentes stratégies possibles
33. Exemple : network fallback
34. 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/
35. Bien calibrer son cache...
36. Compatibilité
37. Fresh
38. Temps moyen de validation des app mobiles
39. Discoverable
40. • Les moteurs de recherche reconnaissent certaines caractéristiques des PWA (manifest, Service Worker) • SEO classique • Ajout dans les stores (Microsoft, ...) Retrouver une PWA
41. Linkable
42. • Chaque page doit être accessible directement via un lien... • … que l’on peut partager facilement Tout partager grâce à… l’hypertexte
43. Installable & App-like
44. Installable
45. 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" }, … ] }
46. App-like
47. Re-engageable
48. 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
49. Comment ça marche côté client ?
50. 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); }); }
51. 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; }); }
52. Un exemple de souscription { "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/", "keys": { "p256dh": "dreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7", "auth": "tBHItJI5svbpez7KI4CCXg==" } }
53. Et ensuite ?
54. 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');
55. ...Pour finir
56. 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)); });
57. Notifications
58. 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')); });
59. Conclusion
60. Tooling • sw-toolbox • sw-precache • serviceworker-webpack-plugin • offline-plugin • Lighthouse
63. Merci ! Des questions ?