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
Technology
0
210

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

See All by Richard Hanna
Webinaire Data 4 Good - Retour d’expérience conception numérique responsable
supertanuki
0
140
Conception numérique responsable
supertanuki
0
180
Impact environnemental du numérique
supertanuki
0
83
Impact environnemental du numérique - Module Énergie & Environnement à l'ESME Sudria
supertanuki
0
96
Impact environnemental du numérique
supertanuki
0
110
Meetup Sobriété Numérique #4 - Intro
supertanuki
0
64
Impact environnemental du numérique - Challenge Sobriété Numérique
supertanuki
0
140
Retour d’expérience conception numérique responsable
supertanuki
0
170
Coder pour quel futur ? (Pas Sage en Seine 2019)
supertanuki
0
160

Other Decks in Technology

See All in Technology
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
120
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
460
認知症フレンドリーテックとスタックチャン
naokiuc
0
380
Building Dashboards as a Hobby
egmc
0
430
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.4k
ルーターでプレゼンする
puhitaku
1
3.4k
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
370
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
0
120
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1k
Cloud Service Mesh に触れ合う
phaya72
1
310
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
370
Grafana x PagerDuty Better Together
jacopen
1
340

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
A better future with KSS
kneath
231
16k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
How STYLIGHT went responsive
nonsquared
92
4.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k

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