Progressive Webapps

Transcript

1. Progressive WebApps étape par étape...
2. “PWAs are the missing technology link to bring the best features of the web to solve the issues of native apps and closed marketplaces.” Chris Heilmann
3. Emmanuel DEMEY @EmmanuelDemey CTO Zenika Lille GDG Lille - DevFest Lille Google Developer Expert
4. Alibaba (e-commerce / China) • 76% de conversions en plus entre navigateurs; • 14% en plus d'utilisateurs actifs/mois sous iOS; 30% en plus sous Android; • 4X plus de taux d’interaction à partir de "Add to Homescreen".
5. Flipkart (e-commerce / India) • 76% Temps passé sur Flipkart lite vs. expériences mobile précédentes: • 3x plus de temps passé sur le site; • 40% en plus de taux d'engagement • 70% en plus de taux de conversion entre ceux arrivant via "Add to Homescreen"; • 3x mois d'usage de données.
7. Caractéristiques Connectivity independent Installable Linkable Re-engageable Fresh Discoverable App-Like
8. Les prérequis
9. Vous avez dit Progressive?
10. Vous avez dit Progressive?
11. Par où commencer?
12. Par où commencer? Les fonctionnalités présentées font parties d'un toolkit.
13. Auditer son application
14. LightHouse • Outil permettant d’auditer une application Web • Integré à Chrome Devtools ou via un module NPM • Retourne un score indiquant le taux de conformité • Règles pour la sécurité, a11y, RWD, SEO, ...
15. LightHouse
16. LightHouse
17. Le Manifest • Fichier JSON contenant de métadonnée de votre application • Utilisé par le navigateur pour détecter comment il doit gérer votre site • Active la fonctionnalité de “Add to Home Screen”
18. Le Manifest - le style
19. Le Manifest - display
20. Le Manifest
21. Le Manifest - qui supporte ?
22. Add to Home Screen • Fonctionnalité activée si le Manifest est valide, et si le site est servi en HTTPS • Invitation affichée en fonction du nombre de visites de l’utilisateur
23. Add to Home Screen
24. Add to Home Screen
25. Le Service Worker GET /style.css
26. Le Service Worker • Proxy entre votre application et votre serveur • Toujours actif même si l'application est fermée • Nécessite HTTPS • Accès au DOM et à XHR • Événement d’un SW: install, activate, fetch, push ou sync
27. Le Service Worker
28. Le Service Worker
29. Le Service Worker
30. Le Service Worker - Fetch API
31. Le Service Worker
32. Le Service Worker - qui supporte ?
33. Le Service Worker - mais pourquoi ?
34. AppShell
35. AppShell • Rendre le layout principal accessible offline • Optimisation du temps de chargement • Utilisation de la Cache API
36. AppShell - Cache API
37. AppShell - Cache API
38. AppShell - Cache API
39. AppShell - Cache API
40. Offline - UX
41. Offline - UX
42. IndexedDB • API permettant de stocker des données côté client • API assez complexe • Basée sur des callbacks • Utilisation de librairies externes pour simplifier l’utilisation
44. IndexedDB - via LocalForage • Librairie plus simple à utiliser • Fallback vers WebSQL et localStorage • Support des callbacks et promises • API similaire à localStorage
45. Fresh Data - UX
46. IndexedDB - qui supporte ?
48. BackgroundSync • Ajout d’un événement Sync aux Services Workers • Assure l’envoie d’une requête lorsque l’utilisateur est online • Traitement exécuté tant que la promise est rejetée
49. Background Sync - qui supporte ?
50. Pour aller plus loin...
51. Autres APIs
52. Emmanuel DEMEY @EmmanuelDemey CTO Zenika Lille GDG Lille - DevFest Lille Google Developer Expert Merci !!!!!