Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Richard Hanna
December 04, 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.

Richard Hanna

December 04, 2018
Tweet

More Decks by Richard Hanna

Other Decks in Technology

Transcript

  1. 2008

    Ouverture de l’App Store

    avec 500 apps
    2018

    3 millions d’apps

    View full-size slide

  2. 2018

    2,6 millions d’apps sur Google Play Store

    View full-size slide

  3. App Web app
    Le poids

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

  7. Le navigateur web pour
    remplacer les apps natives ?

    View full-size slide

  8. Les progressive web apps

    View full-size slide

  9. Pourquoi “progressive web apps” ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Message de notification

    View full-size slide

  14. {
    "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 full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide