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
240

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
150
Conception numérique responsable
supertanuki
0
190
Impact environnemental du numérique
supertanuki
0
91
Impact environnemental du numérique - Module Énergie & Environnement à l'ESME Sudria
supertanuki
0
100
Impact environnemental du numérique
supertanuki
0
130
Meetup Sobriété Numérique #4 - Intro
supertanuki
0
68
Impact environnemental du numérique - Challenge Sobriété Numérique
supertanuki
0
150
Retour d’expérience conception numérique responsable
supertanuki
0
210
Coder pour quel futur ? (Pas Sage en Seine 2019)
supertanuki
0
170

Other Decks in Technology

See All in Technology
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
410
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
440
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
110
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
39
13k
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
140
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
480
SDN の Hype Cycle を 一通り経験してみて思うこと / Going through the Hype Cycle of SDN
mshindo
2
230
A Tour of Anti-patterns for Functional Programming
guvalif
0
210
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
230
"とにかくやってみる"で始めるAWS Security Hub
maimyyym
2
110

Featured

See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing for Performance
lara
604
68k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
380
Building Your Own Lightsaber
phodgson
103
6.1k
Facilitating Awesome Meetings
lara
50
6.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
It's Worth the Effort
3n
183
27k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k

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