Imaginez une app qui prendrait très peu de place sur un téléphone, où le frein du téléchargement serait éliminé et développée avec des technos web à coûts moins élevés. Une app qui serait évolutive, sans soumission aux stores, corrigeable dans l’instant en cas de bug bloquant et qui bénéficierait des mêmes leviers d’acquisition gratuits que le web (dont le SEO). Ca semble inatteignable ? C’est pourtant ce que promettent les Progressive Web Apps (PWA). Découvrez lors de cette conférence ce qui pourrait bien révolutionner la manière dont on envisage les applications mobiles dans les années à venir. ---------------------- Conférence donnée au YOODx #VEM9 le 14 février 2018 Evènement organisé par YOODA.com

1. Les Progressive
Web Apps #PWA
Virginie Clève
Digital Strategist @largow

2. @largow

3. @largow
Android dépasse Windows en tant qu'OS le plus utilisé pour se connecter à Internet

4. #MobileMomentFR
Selon Google, les recherches sur
téléphone portable en France ont
dépassé les requêtes sur ordinateur en
août 2017

5. #MobileMomentFR
Etre présent sur mobile OK,
mais quel mobile ?

6. @largow
Site mobile
ou
responsive
App iOS
et/ou
Android
Google AMP

7. @largow
Le responsive est parfois souvent un cauchemar pour la webperf

8. @largow
Parce qu’il y a trop de choses à charger, et à chaque visite
http://requestmap.webperf.tools/

9. @largow
19 secondes
Temps moyen d’affichage d’une
page web mobile via 3G
Source : Google – ChromeDevSummit, Octobre 2017

10. @largow
53%
Utilisateurs abandonnant un site qui
met + de 3 sec à charger
Source : Google – ChromeDevSummit, Octobre 2017

11. Pour répondre à cette
problématique,
Google a lancé AMP

12. #BlendWebMix @largow
AMP résout les problèmes de
Webperf

13. @largow
Le pré rendering, cœur de l’intérêt d’AMP

14. @largow

15. AMP aujourd’hui,
c’est 4 milliards de pages
et 25 millions de sites

16. AMP, c’est pour les sites de contenu
et c’est là pour durer

17. @largow
Titre

18. @largow
… et qui ne cesse de croitre

19. AMP, c’est pour l’ecommerce
et c’est là pour durer

20. @largow
Téléphone portable Banque Amazon

21. @largow
On peut créer avec AMP des fiches produit rapides avec de l’interaction sans rechargement

22. @largow
Le problème de l’e-commerce mobile

23. @largow
Use case Alibaba PWA - Source : Google

24. Et pour les apps, le constat est
meilleur ?

25. @largow
Objectif du redesign de l’AppStore : éditorialisation
Apple veut transformer l'App Store en un lieu
que tout le monde veut visiter chaque jour

26. @largow
Objectif du redesign de l’AppStore : éditorialisation
Une étude ComScore aux USA montre que 49% des utilisateurs
n'ont installé aucune application au cours des 3 derniers mois

27. @largow
La majorité du temps passé sur mobile ce sont les apps, mais…

28. @largow
Les couts d’acquisition sont toujours plus élevés
Source : Chartboost, iOS – décembre 2017)

29. @largow
Google a enterré l’App Indexing
« Users searching from mobile devices
will be directed to the relevant AMP
pages even if an equivalent app page
exists. »
Google

30. @largow
Leviers gratuits : ASO < SEO – Peu de SEO pour les apps

31. Et quand on a dit ça,
on fait quoi ?

32. Et si #PWAMP
était la solution ?

33. PWA
=
Progressive Web Apps

34. #PWAMP
=
AMP + PWA

35. @largow
Mode offline
Push Notification
Ajout écran d’accueil
Gestion des coupures réseau
Rapide sur connexions faibles
Accès Camera (photo et vidéo)
Accès GPS & accéléromètre
Reconnaissance audio
Accès au bluetooth (beacons)
Affichage plein écran
Synchro en arrière plan
Site
mobile
PWA

36. @largow
Retour d’expérience Pinterest
https://pinterest.com/

37. @largow
L’ancien site : 23 secondes pour un chargement plein

38. @largow
PWA : 5,6 secondes pour un chargement plein

39. @largow
Expérience unifiée pour toutes les plateformes

40. @largow
Retour d’expérience Pinterest

41. @largow
PWA : très peu de place prise sur le téléphone

42. @largow
Le use case Pinterest à lire sur Medium
https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

43. @largow
Quelques autres PWA à tester
FlipKart Washington Post Telegram
Ali Express Flipboard Trivago

44. @largow
Une grande sélection de PWA
https://pwa.rocks/

45. @largow
Autres avantages de PWA par rapport aux Apps

46. @largow
SEO et PWA

47. @largow
Sauf que…

48. @largow
Sauf que…
Avec AMP vos contenus sont placés
tout en haut des pages de résultat
dans un carrousel dédié

49. @largow
Sauf que…

50. @largow
Des sites majeurs sont à présent #PWA

51. @largow
Source : Google – ChromeDevSummit, Octobre 2017

52. @largow
L’équipe, 1er média à avoir lancé sa PWA
http://bit.ly/2DD0hFJ

53. @largow
Courier International a lancé sa PWA début janvier 2018
https://reveil.courrierinternational.com

54. @largow
Limitation : PWA et iOS

55. @largow
Les PWA bientôt sur iOS

56. @largow
Mais encore des limites avec iOS 11.3
§ Push notifications pas encore disponibles
§ Web App Banner pas encore supportées
§ Pas encore de synchronisation en arrière plan

57. @largow
Techniquement comment ça marche ?
Source : Good Barber

58. @largow
AppShell : le « squelette » de la PWA

59. @largow
Service Worker ≃ Server Proxy
Source : Good Barber

60. @largow
Service Worker
Source : Good Barber

61. @largow
Manifest : un fichier json qui fournit les meta données de la PWA

62. @largow
Moyens humains : use case Wired
Pour la mise au point d’un produit fini et assez
complexe :
§ 2 développeurs plein temps
§ 4 ressources « part time » produit/projet
§ Pendant 3 mois
https://pwa.wired.com/

63. @largow
Lighthouse, un outil pour la mise en œuvre
https://developers.google.com/web/tools/lighthouse/

64. @largow
La checklist PWA
https://developers.google.com/web/progressive-web-apps/checklist

65. @largow

66. @largow

67. @largow

68. @largow

69. @largow
Internet en 2020 : 70% mobile ?

70. @largow
Internet mobile en 2020 : 80% #PWAMP ?

71. Contact :
virginie@largow.com
Mobile : 06 27 26 67 08
Virginie Clève
Digital Strategist
www.largow.com
#GrowthMarketing
#SocialMedia #Product
#SEO #Mobile #ASO
#PWAMP #Medias

72. LES CONFERENCES
#1 - Le parcours client du voyageur, tendances & opportunités
Romain Mouchet (Directeur Département Tourisme & Transport – Google France)
#2 - Mobile First ?
Vincent Pillet (Directeur Associé - UserADgents) & Asma Moumni (Responsable UX – UserADgents)
#3 - Les Progressives Web Apps
Virginie Clève (Experte en Stratégie Numérique – Largow)
#4 - Recherche vocale et expérience utilisateur
Olivier Andrieu (Consultant SEO – Abondance)
#5 - La recommandation personnalisée, nouveau levier de croissance ?
François Ziserman (CEO – Target2Sell)
#6 - Chatbots, révolution ou arnaque ?
Thomas Gouritin (Consultant en Communication Digitale – Tomg Conseils)
#7 - Comment la Blockchain pourrait redéfinir l'industrie du voyage ?
Une journée organisée par