Les Papis du Web #2 - Les Progressive Web Apps (PWA)

Dans Les Papis du Web Épisode #2, retrouvez notre web série sur l’actualité du web à 360° analysée par nos Papis du Web. Actualité et veille techno sur les sujets digitaux qui vous concernent, vues par nos experts… Le tout, en toute indépendance.

Avec un dossier sur les Progressive Web Apps (PWA) :

Les PWA sont un sujet très tendance sur le web aujourd’hui et nombre d’entreprises ont mis le pied à l’étrier. Après le lancement du premier IPhone en 2007 correspondant à l’avènement de la mobilité et du responsive design, les PWA ont pris une autre dimension. Elles présentent de nombreux avantages : adaptation aux petits écrans, performance, fonctionnement off-line, interfaces plein écran, notifications push, référencement dans les stores, …

Transcript

1. 1 Les Progressive Web Apps Progressive Web Apps
2. 2 Les Progressive Web Apps There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. 11 juin 2007
3. 3 Les Progressive Web Apps Let me just say it: We want native third party applications on the iPhone, and we plan to have an SDK in developers’ hands in February. 17 octobre 2007
4. 4 Les Progressive Web Apps Les applications ont de multiples avantages • Parfaitement adaptées aux petits écrans • Performantes • Fonctionnement offline possible • Immersives, interfaces plein écran • Notifications push • Référencement dans les stores • Etc.
5. 5 Les Progressive Web Apps Le Responsive Web Design a déjà 8 ans !
6. 6 Les Progressive Web Apps Les applications ont de multiples avantages • Parfaitement adaptées aux petits écrans • Performantes • Fonctionnement offline possible • Immersives, interfaces plein écran • Notifications push • Référencement dans les stores • Etc.
7. 7 Les Progressive Web Apps Ils sont mal conçus et/ou réalisés Les bonnes pratiques WebPerf connues depuis plus de 10 ans ne sont toujours pas appliquées sur de nombreux sites. Certains pensent encore que le Responsive Web Design alourdit les pages…
8. 8 Les Progressive Web Apps Le Service Worker et l’API Cache Les Service Workers et l’API Cache permettent de maîtriser complètement un cache applicatif. Source : https://jakearchibald.com/2014/offline-cookbook/
9. 9 Les Progressive Web Apps Le Service Worker et l’API Cache La disponibilité des ressources dans le cache peut assurer d’excellentes performances. Source : https://jakearchibald.com/2014/offline-cookbook/
10. 10 Les Progressive Web Apps Les applications ont de multiples avantages • Parfaitement adaptées aux petits écrans • Performantes • Fonctionnement offline possible • Immersives, interfaces plein écran • Notifications push • Référencement dans les stores • Etc.
11. 11 Les Progressive Web Apps Fonctionner en offline Les Service Workers et l’API Cache permettent notamment de faire fonctionner l’app en offline ! Source : https://jakearchibald.com/2014/offline-cookbook/
12. 12 Les Progressive Web Apps Fonctionner en offline Une stratégie Offline First permet d’être encore plus rapide même en cas de connexion disponible. Source : https://jakearchibald.com/2014/offline-cookbook/
13. 13 Les Progressive Web Apps Les applications ont de multiples avantages • Parfaitement adaptées aux petits écrans • Performantes • Fonctionnement offline possible • Immersives, interfaces plein écran • Notifications push • Référencement dans les stores • Etc.
14. 14 Les Progressive Web Apps Pour ressembler encore plus aux app natives, les WebApps doivent pouvoir : • Disposer d’un raccourci de lancement sur le bureau • S’exécuter en plein écran, hors du navigateur • Imposer (ou non) le fonctionnement en orientation portrait ou paysage Le Web App Manifest permet tout cela. « Installer » un site ?
15. 15 Les Progressive Web Apps
16. 16 Les Progressive Web Apps Les applications ont de multiples avantages • Parfaitement adaptées aux petits écrans • Performantes • Fonctionnement offline possible • Immersives, interfaces plein écran • Notifications push • Référencement dans les stores • Etc.
17. 17 Les Progressive Web Apps Push API et notifications L’API Push permet au serveur d’envoyer un message au Service Worker dans le navigateur. Sert de base aux notifications, qui ne sont qu’une des formes possibles de messages Push.
18. 18 Les Progressive Web Apps Les applications ont de multiples avantages • Parfaitement adaptées aux petits écrans • Performantes • Fonctionnement offline possible • Immersives, interfaces plein écran • Notifications push • Référencement dans les stores • Etc.
19. 19 Les Progressive Web Apps
20. 20 Les Progressive Web Apps Les applications n’ont plus tant d’avantages • Parfaitement adaptées aux petits écrans • Performantes • Fonctionnement offline possible • Immersives, interfaces plein écran • Notifications push • Référencement dans les stores • Etc.
21. 21 Les Progressive Web Apps Alex Russel & Frances Berriman juin 2015 Les Progressive Web Apps sont • Responsive • Connectivity independent • App-like-interactions • Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable
22. 22 Les Progressive Web Apps These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins. Alex Russell
23. 23 Les Progressive Web Apps Des apps pour enrichir l’expérience sur mobiles ISO Web App ISO Web App Web App App Android App iOS Fonctions supplémentaires Fonctionnalités Fonctions supplémentaires ROI
24. 24 Les Progressive Web Apps Les PWA réduisent ce ROI ISO Web App ISO Web App Web App App Android App iOS Fonctions supplémentaires Fonctionnalités Fonctions supplémentaires PWA ISO PWA sur Android ~ ISO PWA sur iOS ROI
25. 25 Les Progressive Web Apps Et les PWA sont aussi effectives sur desktop ISO Web App ISO Web App Web App App Android App iOS Fonctions supplémentaires Fonctionnalités Fonctions supplémentaires PWA ISO PWA sur Android ~ ISO PWA sur iOS
26. 26 Les Progressive Web Apps
27. 27 Les Progressive Web Apps Utiliser les technologies PWA ne servira à rien si l’UX est déplorable. Beaucoup de belles références PWA étaient simultanément des refontes UX.