La revanche du web sur les apps natives (maj 2018)

La revanche du web sur les apps natives (maj 2018)

Les Progressives Web Apps ont pour objectif de rivaliser avec les apps natives. Voyons comment cela fonctionne et le gain que cela apporte à vos utilisateurs.

C872075a10c9575978184134d091baec?s=128

Richard Hanna

December 04, 2018
Tweet

Transcript

  1. None
  2. 2 0 0 7

  3. 2008
 Ouverture de l’App Store
 avec 500 apps 2018
 3

    millions d’apps
  4. 2018
 2,6 millions d’apps sur Google Play Store

  5. None
  6. Q

  7. None
  8. App Web app Le poids

  9. Audience des apps dominée par quelques géants. C'est quasi impossible

    d'y trouver sa place.
  10. World Wide Web ou plutôt World Wide App stores ?

  11. Audience d’Apps dominée par quelques géants Web, iOS, Android… Être

    présent partout coûte très cher en développement.
  12. None
  13. None
  14. None
  15. Le navigateur web pour remplacer les apps natives ?

  16. None
  17. None
  18. Les progressive web apps

  19. Pourquoi “progressive web apps” ?

  20. Mise en cache du layout de la page (html, js,

    css) Mise en cache des contenus https obligatoire
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. Stockage dans le navigateur LocalStorage CacheStorage Texte Ressources 2,5 Mo

    ou + 50 Mo ou +
  31. Mise en cache des contenus Mise en cache du layout

    de la page (html, js, css) Notifications Push
  32. None
  33. None
  34. Message de notification

  35. None
  36. None
  37. None
  38. { "short_name": "ChalkEdu", "name": "Chalkboard Education", "orientation": "portrait", "start_url": "/?utm_source=homescreen",

    "display": "standalone", "theme_color": "#fc3691", "background_color": "#ffffff" "icons": [ { "src": "icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, ... ], } <html> <head> <link rel="manifest" href="/manifest.json"> ... W E B A P P M A N I F E S T tracker
  39. None
  40. Push Notifications Add to Home Screen SOON Service Worker Offline

    browsing
  41. None
  42. O U T I L S

  43. None
  44. None
  45. None
  46. None
  47. None
  48. R E T O U R S U R I

    N V E S T I S S E M E N T
  49. None
  50. None
  51. None
  52. None
  53. None
  54. E T A P R È S ? Déjà en

    bêta sur Chrome : • Credential Management API : faciliter l’authentification de l’utilisateur • Payment Request API : sauvegarder les moyens de paiement dans le navigateur • BackgroundSync : synchronisation de données en tâche de fond dès lors que la connectivité est retrouvée
  55. None
  56. Pourquoi vous N'AVEZ PAS besoin de “progressive web apps”

  57. Source : http://tonsky.me/blog/pwa/ Si votre landing page fait 170 requêtes

    et charge 3 Mo d'image pour afficher un formulaire contenant 4 champs, il y a clairement un problème. C'est encore plus incompréhensible quand vous vous appelez Airbnb et que 900 développeurs y travaillent !
  58. Source : http://tonsky.me/blog/pwa/ Prenez exemple sur Wikipedia, qui est léger

    et qui ne comporte pas de framework et des tas de libs js chargées. Il y a simplement une optimisation du rendu des pages.
  59. Sobriété Vos utilisateurs s'en fichent d'avoir une belle animation et

    des images en HD. Ils veulent juste rapidement accéder à un contenu, une information. Ils n'ont pas besoin non plus de souscrire à des notifications quand c'est la 1ère fois qu'ils visitent un site. Optez donc pour la sobriété numérique. C'est bon pour vos utilisateurs et pour la planète.
  60. Une Progressive Web App c’est : Rapide Responsive Sécurisée (https)

    Pas de téléchargement et d’installation via un store Installable sur l’écran d’accueil Utilisable en Offline Notifications
 Push