Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Les Progressive Web Apps - Virginie Clève - YOODx 2018

450 views

Published on

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

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Les Progressive Web Apps - Virginie Clève - YOODx 2018

  1. 1. Les Progressive Web Apps #PWA Virginie Clève Digital Strategist @largow
  2. 2. @largow
  3. 3. @largow Android dépasse Windows en tant qu'OS le plus utilisé pour se connecter à Internet
  4. 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. 5. #MobileMomentFR Etre présent sur mobile OK, mais quel mobile ?
  6. 6. @largow Site mobile ou responsive App iOS et/ou Android Google AMP
  7. 7. @largow Le responsive est parfois souvent un cauchemar pour la webperf
  8. 8. @largow Parce qu’il y a trop de choses à charger, et à chaque visite http://requestmap.webperf.tools/
  9. 9. @largow 19 secondes Temps moyen d’affichage d’une page web mobile via 3G Source : Google – ChromeDevSummit, Octobre 2017
  10. 10. @largow 53% Utilisateurs abandonnant un site qui met + de 3 sec à charger Source : Google – ChromeDevSummit, Octobre 2017
  11. 11. Pour répondre à cette problématique, Google a lancé AMP
  12. 12. #BlendWebMix @largow AMP résout les problèmes de Webperf
  13. 13. @largow Le pré rendering, cœur de l’intérêt d’AMP
  14. 14. @largow
  15. 15. AMP aujourd’hui, c’est 4 milliards de pages et 25 millions de sites
  16. 16. AMP, c’est pour les sites de contenu et c’est là pour durer
  17. 17. @largow Titre
  18. 18. @largow … et qui ne cesse de croitre
  19. 19. AMP, c’est pour l’ecommerce et c’est là pour durer
  20. 20. @largow Téléphone portable Banque Amazon
  21. 21. @largow On peut créer avec AMP des fiches produit rapides avec de l’interaction sans rechargement
  22. 22. @largow Le problème de l’e-commerce mobile
  23. 23. @largow Use case Alibaba PWA - Source : Google
  24. 24. Et pour les apps, le constat est meilleur ?
  25. 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. 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. 27. @largow La majorité du temps passé sur mobile ce sont les apps, mais…
  28. 28. @largow Les couts d’acquisition sont toujours plus élevés Source : Chartboost, iOS – décembre 2017)
  29. 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. 30. @largow Leviers gratuits : ASO < SEO – Peu de SEO pour les apps
  31. 31. Et quand on a dit ça, on fait quoi ?
  32. 32. Et si #PWAMP était la solution ?
  33. 33. PWA = Progressive Web Apps
  34. 34. #PWAMP = AMP + PWA
  35. 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. 36. @largow Retour d’expérience Pinterest https://pinterest.com/
  37. 37. @largow L’ancien site : 23 secondes pour un chargement plein
  38. 38. @largow PWA : 5,6 secondes pour un chargement plein
  39. 39. @largow Expérience unifiée pour toutes les plateformes
  40. 40. @largow Retour d’expérience Pinterest
  41. 41. @largow PWA : très peu de place prise sur le téléphone
  42. 42. @largow Le use case Pinterest à lire sur Medium https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
  43. 43. @largow Quelques autres PWA à tester FlipKart Washington Post Telegram Ali Express Flipboard Trivago
  44. 44. @largow Une grande sélection de PWA https://pwa.rocks/
  45. 45. @largow Autres avantages de PWA par rapport aux Apps
  46. 46. @largow SEO et PWA
  47. 47. @largow Sauf que…
  48. 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. 49. @largow Sauf que…
  50. 50. @largow Des sites majeurs sont à présent #PWA
  51. 51. @largow Source : Google – ChromeDevSummit, Octobre 2017
  52. 52. @largow L’équipe, 1er média à avoir lancé sa PWA http://bit.ly/2DD0hFJ
  53. 53. @largow Courier International a lancé sa PWA début janvier 2018 https://reveil.courrierinternational.com
  54. 54. @largow Limitation : PWA et iOS
  55. 55. @largow Les PWA bientôt sur iOS
  56. 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. 57. @largow Techniquement comment ça marche ? Source : Good Barber
  58. 58. @largow AppShell : le « squelette » de la PWA
  59. 59. @largow Service Worker ≃ Server Proxy Source : Good Barber
  60. 60. @largow Service Worker Source : Good Barber
  61. 61. @largow Manifest : un fichier json qui fournit les meta données de la PWA
  62. 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. 63. @largow Lighthouse, un outil pour la mise en œuvre https://developers.google.com/web/tools/lighthouse/
  64. 64. @largow La checklist PWA https://developers.google.com/web/progressive-web-apps/checklist
  65. 65. @largow
  66. 66. @largow
  67. 67. @largow
  68. 68. @largow
  69. 69. @largow Internet en 2020 : 70% mobile ?
  70. 70. @largow Internet mobile en 2020 : 80% #PWAMP ?
  71. 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. 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

×