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.

Transcript

1. View Slide

2. 2 0 0 7
   

   View Slide

3. 2008

   Ouverture de l’App Store

   avec 500 apps
   2018

   3 millions d’apps
   

   View Slide

4. 2018

   2,6 millions d’apps sur Google Play Store
   

   View Slide

5. View Slide

6. Q
   

   View Slide

7. View Slide

8. App Web app
   Le poids
   

   View Slide

9. Audience des apps dominée par
   quelques géants. C'est quasi
   impossible d'y trouver sa place.
   

   View Slide

10. World Wide Web
    ou plutôt
    World Wide App stores ?
    

    View Slide

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.
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. Le navigateur web pour
    remplacer les apps natives ?
    

    View Slide

16. View Slide

17. View Slide

18. Les progressive web apps
    

    View Slide

19. Pourquoi “progressive web apps” ?
    

    View Slide

20. Mise en cache
    du layout
    de la page (html, js, css)
    Mise en cache
    des contenus
    https obligatoire
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. Stockage dans le navigateur
    LocalStorage
    CacheStorage
    Texte
    Ressources
    2,5 Mo ou +
    50 Mo ou +
    

    View Slide

31. Mise en cache
    des contenus
    Mise en cache
    du layout
    de la page (html, js, css)
    Notifications
    Push
    

    View Slide

32. View Slide

33. View Slide

34. Message de notification
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

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"
    },
    ...
    ],
    }
    
    
    
    ...
    W E B A P P M A N I F E S T
    tracker
    

    View Slide

39. View Slide

40. Push Notifications
    Add to Home Screen SOON
    Service Worker
    Offline browsing
    

    View Slide

41. View Slide

42. O U T I L S
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. R E T O U R S U R I N V E S T I S S E M E N T
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

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
    

    View Slide

55. View Slide

56. Pourquoi vous N'AVEZ PAS besoin de
    “progressive web apps”
    

    View Slide

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 !
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide