Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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, …

Nicolas Hoizey

December 13, 2018
Tweet

More Decks by Nicolas Hoizey

Other Decks in Programming

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.