Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Progressive Web Apps PWA : quoi, comment, pour quels résultats ?

5 786 vues

Publié le

A la découverte des Progressive Web Apps PWA.
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 et à très couts moins élévé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 ce qui pourrait bien révolutionner la manière dont on envisage les applications mobiles dans les années à venir

Publié dans : Internet

Progressive Web Apps PWA : quoi, comment, pour quels résultats ?

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

×