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

Slide 1

Slide 1 text

1 Les Progressive Web Apps Progressive Web Apps

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

5 Les Progressive Web Apps Le Responsive Web Design a déjà 8 ans !

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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…

Slide 8

Slide 8 text

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/

Slide 9

Slide 9 text

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/

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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/

Slide 12

Slide 12 text

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/

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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 ?

Slide 15

Slide 15 text

15 Les Progressive Web Apps

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

19 Les Progressive Web Apps

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26 Les Progressive Web Apps

Slide 27

Slide 27 text

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.