Les Progressive Web Apps (PWA)
A presentation at Les Papis du Web (Clever Age) in in Paris, France by Nicolas Hoizey
Progressive Web Apps Les Progressive Web Apps 1
11 juin 2007 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. Les Progressive Web Apps 2
17 octobre 2007 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. Les Progressive Web Apps 3
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. Les Progressive Web Apps 4
Le Responsive Web Design a déjà 8 ans ! Les Progressive Web Apps 5
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. Les Progressive Web Apps 6
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… Les Progressive Web Apps 7
Le Service Worker et l’API Cache Les Service Workers et l’API Cache permettent de maîtriser complètement un cache applicatif. 8 Les Progressive Web Apps Source : https://jakearchibald.com/2014/offline-cookbook/
Le Service Worker et l’API Cache La disponibilité des ressources dans le cache peut assurer d’excellentes performances. 9 Les Progressive Web Apps Source : https://jakearchibald.com/2014/offline-cookbook/
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. Les Progressive Web Apps 10
Fonctionner en offline Les Service Workers et l’API Cache permettent notamment de faire fonctionner l’app en offline ! 11 Les Progressive Web Apps Source : https://jakearchibald.com/2014/offline-cookbook/
Fonctionner en offline Une stratégie Offline First permet d’être encore plus rapide même en cas de connexion disponible. 12 Les Progressive Web Apps Source : https://jakearchibald.com/2014/offline-cookbook/
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. Les Progressive Web Apps 13
« Installer » un site ? 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. Les Progressive Web Apps 14
Les Progressive Web Apps 15
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. Les Progressive Web Apps 16
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. Les Progressive Web Apps 17
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. Les Progressive Web Apps 18
Les Progressive Web Apps 19
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. Les Progressive Web Apps 20
Alex Russel & Frances Berriman juin 2015 Les Progressive Web Apps sont • Responsive • Connectivity independent • App-like-interactions • Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable Les Progressive Web Apps 21
These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins. Alex Russell Les Progressive Web Apps 22
Des apps pour enrichir l’expérience sur mobiles Fonctionnalités Fonctions supplémentaires Web App ROI Fonctions supplémentaires ISO Web App ISO Web App App Android App iOS Les Progressive Web Apps 23
Les PWA réduisent ce ROI Fonctionnalités Fonctions supplémentaires PWA Web App ISO PWA sur Android ROI Fonctions supplémentaires ~ ISO PWA sur iOS ISO Web App ISO Web App App Android App iOS Les Progressive Web Apps 24
Et les PWA sont aussi effectives sur desktop Fonctionnalités Fonctions supplémentaires PWA Web App ISO PWA sur Android Fonctions supplémentaires ~ ISO PWA sur iOS ISO Web App ISO Web App App Android App iOS Les Progressive Web Apps 25
Les Progressive Web Apps 26
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. Les Progressive Web Apps 27
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, …
