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