Les Progressive Web Apps (PWAs) sont optimisées pour l'expérience utilisateur avec une rapidité et une fiabilité accrues, réduisant ainsi le taux d'abandon des visiteurs. Elles intègrent des technologies comme les service workers pour des performances améliorées même en l'absence de connexion réseau. Le document souligne également les défis liés à leur adoption, tels que les coûts marketing et les barrières au téléchargement.

1. Progressive Web Apps

2. Audience Mobile
* Source : Flurry Analytics, December 2016 ; comScore Mobile Metrix (Custom), US, Age 18+, June 2017

3. Audience Mobile

4. Quelles ont-été les key features à
l’origine de ce bouleversement ?

5. C’est l’UX des apps qui est plébiscitée

6. Expérience, Rapidité, Fluidité
47 % 53 %53%
des visiteurs abandonnent
un site s’il prend plus de
3 secondes à charger
93 %
7 %
7%
de reduction en conversions
pour chaque délai d’1 seconde
en temps de chargement
* Source : Doubleclick

7. Intégration à l’OS
SpringboardFullscreen

8. Sentiment de fiabilité

9. Mais le Web Mobile fait de la
résistance …

10. Audience Mobile

11. Audience Mobile

12. Ce qui freine les apps …

13. Barrière au download

14. Nature du trafic
Social
25 %
Organic
30 %
Referral
15 %
Direct
30 %
Other
10 %
Direct
90 %
Sources de trafic d’un site web Sources de trafic d’une app
3x

15. Coût marketing
$3
CPI
moyen
$1
CPC
moyen

16. Apps ?
UX, Rapidité, Fluidité
Integration des apps à l’OS
Sentiment de fiabilité
Barrière au download
Nature du trafic
Coût marketing

17. Progressive Web Apps
UX, Rapidité, Fluidité
Integration des apps à l’OS
Sentiment de fiabilité
Barrière au download
Nature du trafic
Coût marketing

18. Progressive Web Apps
RapidesFiables Intégrées

19. PWAs Checklist
Site is served over HTTPS
Pages are responsive on tablets & mobile devices
All app URLs load while offline
Metadata provided for Add to Home screen
First load fast even on 3G
Site works cross-browser
Page transitions don’t feel like they block on network
Each page has a URL
Resources should be served over HTTP/2

20. Progressive Web Apps
Fiables

21. Des apps fiables avec les Service Workers
Web Server

22. Web Server
Des apps fiables avec les Service Workers

23. Service Worker : proxy JS client
Web Server
Cache
Service Worker

24. Service Worker comme base pour le Push
ServiceWorker.js
onpush = function(event) {
var data = event.data.json();
self.registration.
showNotification(data.title, data.options);
};
example.com
Push Subscription
Endpoint

27. Resultats
Broadband Slow 3G Offline
Sans Service Worker 438 ms 2230 ms n/a
Avec Service Worker 420 ms 327 ms 449 ms
Gain de Performance ~ egal 7x meilleur ∞ meilleur

29. Progressive Web Apps
Rapides

30. Performance au premier contact
Comment être rapide même au premier appel ?
Les Service Workers permettent :
- fiabilité (l’app fonctionne même sans réseau)
- performance pour les utilisateurs récurrents (stratégies de cache runtime)
First load fast even on 3G

31. App Shell vs. SSR
Client Server
App Shell
JS
Dynamic content
Assets
Asynchronous pre-cache from Service Worker
First meaningful
paint
App Shell sans Pre-Rendering
Client Server
Pre-rendered HTML
Asynchronous pre-cache from Service Worker
First meaningful
paint
App Shell avec Pre-Rendering

32. Server Side Rendering
Premier appel, sans Server Side Rendering Premier appel, avec Server Side Rendering
First meaningful paint : 1100 ms
Page fully rendered : 1340 ms
First meaningful paint : 417 ms
Page fully rendered : 1210 ms
* un « detail » : Google n’indexera pas une page qui n’est pas ou qui est mal pré-générée !

34. Resultats
Broadband Slow 3G Offline
Sans Service Worker 438 ms 2230 ms n/a
Avec Service Worker 420 ms 327 ms 449 ms
Avec pre-rendering &
Service Worker
86 ms 111 ms 114 ms
Gain de Performance 5x meilleur 20x meilleur ∞ meilleur

35. Cache côté serveur
Client
Server
LOAD BALANCER
CACHE
PROXY
CACHE
PROXY
CACHE
PROXY
SSR
WORKERS
STATIC
ASSETS
CACHE
GoodBarber stack
• Load Balancer : haproxy
• Cache Proxy : python (asyncio) app + uwsgi
• Cache : Redis
• SSR Workers : js (express) app + node
• Static Assets : nginx (openresty)

36. Progressive Web Apps
Intégrées

37. Web App Manifest

39. Capacités des navigateurs

40. Capacités des navigateurs

41. Capacités des navigateurs

42. Capacités des navigateurs

43. Capacités des navigateurs

44. PWAs sur le Microsoft Store

45. PWAMP
AMP up
AMP page
PWA

47. Progressive Web Apps
RapidesFiables Intégrées

48. Merci !