SlideShare une entreprise Scribd logo
1  sur  23
Version du
Progressive Web Apps
CRÉER DES APPLICATIONS WEB ET MOBILES MULTIPLATEFORMES
18/06/2018
1. Introduction
Progressive Web App (PWA) ≠ Responsive Web Design (RWD)
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 2
Le Responsive Web Design est un bon moyen
pour faire un premier pas en direction des terminaux mobiles.
Dans un contexte totalement « mobile », il a ses limites :
poids et chargement des pages, complexité du code,
et expérience utilisateur en situation de mobilité.
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 3
Responsive Web Design
« Bénéficier de la souplesse et la légèreté du Web,
avec la qualité et l’intégration au terminal mobile du Natif. »
« Une Progressive Web App se doit d’être
fiable, rapide et engageante. »
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 4
Philosophie des PWA
2. Forces & faiblesses
Une alternative fiable aux applications natives ?
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 5
Distribution hors des boutiques d’applications
Accès direct depuis une URL
Icône sur l’écran d’accueil du mobile
Mises à jour transparentes (et coût de maintenance moindre)
L’apparence et la sensation d’une application mobile « native »
Un code unique pour tous les supports (iOS/Android & Desktop)
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 6
Les avantages d’une PWA
« Un site internet, responsive, avec des transitions entre les pages »
Mobile-first (+ Google AMP)
SEO-Friendly (Métadonnées, données structurées, …)
Affichage plein écran (sans navigateur web)
Mode déconnecté (cache et stockage)
Protocole HTTPS
Exploitation des composants matériels et capteurs du terminal
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 7
Des technologies matures issues du web
Le format et sa compatibilité (mobile) avec les navigateurs
et systèmes d’exploitation sont en cours de développement.
Il manque un niveau suffisant de compatibilité avec les fonctions natives
des appareils mobiles : Contacts, Bluetooth/NFC, Audio et GPS.
… et ne figurent dans aucune boutique d’application ! 😉
(ou lire cet article : « I built a Progressive Web App and published it in 3 app stores. Here’s what I learned »)
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 8
Les freins à l’adoption des PWA
3. Eléments clés
Différencier le contenant et le contenu
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 9
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 10
Architecture d’une PWA 1/3
APP SHELL
HTML / CSS / JavaScript
Chargement rapide
Mise en cache
Affichage dynamique du contenu
SERVICE WORKER + PUSH API
Fichier JavaScript
Scripts en arrière-plan du navigateur (synchronisation silencieuse)
APIs spécifiques : Cache, Data fetching, Messaging, Push…
Les Services Workers bientôt supportés par tous les navigateurs mobiles ! 😲
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 11
Architecture d’une PWA 2/3
APP MANIFEST + APP BANNER
Fichier JSON
Ajout de l’application sur l’écran d’accueil (bannière)
Icône (favicon) + Splashscreen (ou aplat de couleur)
Mode d’affichage portrait ou paysage (…ou les deux !)
Option plein-écran (indépendante du navigateur web)
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 12
Architecture d’une PWA 3/3
4. Cas d'utilisation
Ils sont passés en Progressive Web App…
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 13
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 14
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 15
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 16
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 17
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 18
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 19
Twitter Lite
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 20
…et bien d’autres !
Starbucks Coffee
KFC
Google I/O
Telegram
Flipboard
Code.NASA.gov
4. Ressources
Documentation et informations
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 21
blog.twitter.com 06/04/2017
1and1.fr/digitalguide 06/04/2017
slideshare.net/fredcavazza 28/09/2017
slideshare.net/sebastieno 09/11/2017
fredcavazza.net 11/02/2018
slideshare.net/ovronaz 12/02/2018
visualapps.fr
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 22
Références
developers.google.com/checklist
developers.google.com/showcase
blog.goodbarber.com
medium.freecodecamp.org
progressive-web-apps.fr
pwa.rocks
outweb.io
mobizel.com
Aller plus loin
Version du
Merci
18/06/2018

Contenu connexe

Tendances

Les nouveaux enjeux de la distribution de contenu : Google AMP, Facebook Inst...
Les nouveaux enjeux de la distribution de contenu : Google AMP, Facebook Inst...Les nouveaux enjeux de la distribution de contenu : Google AMP, Facebook Inst...
Les nouveaux enjeux de la distribution de contenu : Google AMP, Facebook Inst...Virginie Clève - largow ☕️
 
Applications mobiles : réussir icône et visuels pour booster la conversion
Applications mobiles : réussir icône et visuels pour booster la conversionApplications mobiles : réussir icône et visuels pour booster la conversion
Applications mobiles : réussir icône et visuels pour booster la conversionVirginie Clève - largow ☕️
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile PagesPhilippe YONNET
 
Applis mobiles : éviter les erreurs majeures de conception
Applis mobiles : éviter les erreurs majeures de conceptionApplis mobiles : éviter les erreurs majeures de conception
Applis mobiles : éviter les erreurs majeures de conceptionVirginie Clève - largow ☕️
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesUSERADGENTS
 
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"One Clic Conseil
 
SEO: mobile friendly update Google big-bang du 21 avril 2015
SEO: mobile friendly update Google big-bang du 21 avril 2015SEO: mobile friendly update Google big-bang du 21 avril 2015
SEO: mobile friendly update Google big-bang du 21 avril 2015Peak Ace
 
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...Peak Ace
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Semrush France
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performantRefficience
 
App Store Optimization : boostez votre appli mobile sur les stores
App Store Optimization : boostez votre appli mobile sur les storesApp Store Optimization : boostez votre appli mobile sur les stores
App Store Optimization : boostez votre appli mobile sur les storesVirginie Clève - largow ☕️
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Le mobile first index - Petit déjeuner de Genève du 16 Mai
 Le mobile first index - Petit déjeuner de Genève du 16 Mai Le mobile first index - Petit déjeuner de Genève du 16 Mai
Le mobile first index - Petit déjeuner de Genève du 16 MaiPeak Ace
 
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...Peak Ace
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...Peak Ace
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 

Tendances (20)

Google AMP : le guide complet
Google AMP : le guide completGoogle AMP : le guide complet
Google AMP : le guide complet
 
Les nouveaux enjeux de la distribution de contenu : Google AMP, Facebook Inst...
Les nouveaux enjeux de la distribution de contenu : Google AMP, Facebook Inst...Les nouveaux enjeux de la distribution de contenu : Google AMP, Facebook Inst...
Les nouveaux enjeux de la distribution de contenu : Google AMP, Facebook Inst...
 
Applications mobiles : réussir icône et visuels pour booster la conversion
Applications mobiles : réussir icône et visuels pour booster la conversionApplications mobiles : réussir icône et visuels pour booster la conversion
Applications mobiles : réussir icône et visuels pour booster la conversion
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile Pages
 
Le site internet est-il (bientôt) mort ?
Le site internet est-il (bientôt) mort ?Le site internet est-il (bientôt) mort ?
Le site internet est-il (bientôt) mort ?
 
Applis mobiles : éviter les erreurs majeures de conception
Applis mobiles : éviter les erreurs majeures de conceptionApplis mobiles : éviter les erreurs majeures de conception
Applis mobiles : éviter les erreurs majeures de conception
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile Pages
 
SEO Dawa Day Progressive Web App 23 sept 2017
SEO Dawa Day Progressive Web App 23 sept 2017SEO Dawa Day Progressive Web App 23 sept 2017
SEO Dawa Day Progressive Web App 23 sept 2017
 
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
 
SEO: mobile friendly update Google big-bang du 21 avril 2015
SEO: mobile friendly update Google big-bang du 21 avril 2015SEO: mobile friendly update Google big-bang du 21 avril 2015
SEO: mobile friendly update Google big-bang du 21 avril 2015
 
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
 
App Store Optimization : boostez votre appli mobile sur les stores
App Store Optimization : boostez votre appli mobile sur les storesApp Store Optimization : boostez votre appli mobile sur les stores
App Store Optimization : boostez votre appli mobile sur les stores
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Le mobile first index - Petit déjeuner de Genève du 16 Mai
 Le mobile first index - Petit déjeuner de Genève du 16 Mai Le mobile first index - Petit déjeuner de Genève du 16 Mai
Le mobile first index - Petit déjeuner de Genève du 16 Mai
 
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...Actualité des moteurs de recherche et du référencement (SEO & SEA)  - Petit-d...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit-d...
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
La Tour Eiffel : SEO et stratégie marketing
La Tour Eiffel : SEO et stratégie marketingLa Tour Eiffel : SEO et stratégie marketing
La Tour Eiffel : SEO et stratégie marketing
 

Similaire à Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes

02_Chapitre_1_.pdf
02_Chapitre_1_.pdf02_Chapitre_1_.pdf
02_Chapitre_1_.pdfallagahamza
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)SCALA
 
Ergonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueErgonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueJulien Sicot
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...Salon e-tourisme #VeM
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutterJulien Saumande
 
Progressive Web App, la clé de votre écosystème mobile
Progressive Web App, la clé de votre écosystème mobileProgressive Web App, la clé de votre écosystème mobile
Progressive Web App, la clé de votre écosystème mobileFrederic CAVAZZA
 
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...Peak Ace
 
HTML 5, applications natives ou hybrides : comment choisir ?
HTML 5, applications natives ou hybrides :  comment choisir ?HTML 5, applications natives ou hybrides :  comment choisir ?
HTML 5, applications natives ou hybrides : comment choisir ?Philippe Dumont
 
Les secrets du développement d'une application mobile
Les secrets du développement d'une application mobileLes secrets du développement d'une application mobile
Les secrets du développement d'une application mobileEutech SSII
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPressBenjamin LUPU
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !Rossi Oddet
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
 
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
Conférence SEO mobile –  mobile first - 10 ans  CyberCité NantesConférence SEO mobile –  mobile first - 10 ans  CyberCité Nantes
Conférence SEO mobile – mobile first - 10 ans CyberCité NantesCyberCité
 
[Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 [Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 Niji
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...BEIJAFLORE
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform MobileGabriel DUPONT
 
RapportProjetLibre-CrossplateformeMobiledev (1)
RapportProjetLibre-CrossplateformeMobiledev (1)RapportProjetLibre-CrossplateformeMobiledev (1)
RapportProjetLibre-CrossplateformeMobiledev (1)Cyril Sabbagh
 

Similaire à Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes (20)

02_Chapitre_1_.pdf
02_Chapitre_1_.pdf02_Chapitre_1_.pdf
02_Chapitre_1_.pdf
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
 
Ergonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueErgonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèque
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutter
 
Progressive Web App, la clé de votre écosystème mobile
Progressive Web App, la clé de votre écosystème mobileProgressive Web App, la clé de votre écosystème mobile
Progressive Web App, la clé de votre écosystème mobile
 
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
 
HTML 5, applications natives ou hybrides : comment choisir ?
HTML 5, applications natives ou hybrides :  comment choisir ?HTML 5, applications natives ou hybrides :  comment choisir ?
HTML 5, applications natives ou hybrides : comment choisir ?
 
Les secrets du développement d'une application mobile
Les secrets du développement d'une application mobileLes secrets du développement d'une application mobile
Les secrets du développement d'une application mobile
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
Conférence SEO mobile –  mobile first - 10 ans  CyberCité NantesConférence SEO mobile –  mobile first - 10 ans  CyberCité Nantes
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
 
[Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 [Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform Mobile
 
Prez web mobile_01
Prez web mobile_01Prez web mobile_01
Prez web mobile_01
 
RapportProjetLibre-CrossplateformeMobiledev (1)
RapportProjetLibre-CrossplateformeMobiledev (1)RapportProjetLibre-CrossplateformeMobiledev (1)
RapportProjetLibre-CrossplateformeMobiledev (1)
 

Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes

  • 1. Version du Progressive Web Apps CRÉER DES APPLICATIONS WEB ET MOBILES MULTIPLATEFORMES 18/06/2018
  • 2. 1. Introduction Progressive Web App (PWA) ≠ Responsive Web Design (RWD) 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 2
  • 3. Le Responsive Web Design est un bon moyen pour faire un premier pas en direction des terminaux mobiles. Dans un contexte totalement « mobile », il a ses limites : poids et chargement des pages, complexité du code, et expérience utilisateur en situation de mobilité. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 3 Responsive Web Design
  • 4. « Bénéficier de la souplesse et la légèreté du Web, avec la qualité et l’intégration au terminal mobile du Natif. » « Une Progressive Web App se doit d’être fiable, rapide et engageante. » 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 4 Philosophie des PWA
  • 5. 2. Forces & faiblesses Une alternative fiable aux applications natives ? 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 5
  • 6. Distribution hors des boutiques d’applications Accès direct depuis une URL Icône sur l’écran d’accueil du mobile Mises à jour transparentes (et coût de maintenance moindre) L’apparence et la sensation d’une application mobile « native » Un code unique pour tous les supports (iOS/Android & Desktop) 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 6 Les avantages d’une PWA
  • 7. « Un site internet, responsive, avec des transitions entre les pages » Mobile-first (+ Google AMP) SEO-Friendly (Métadonnées, données structurées, …) Affichage plein écran (sans navigateur web) Mode déconnecté (cache et stockage) Protocole HTTPS Exploitation des composants matériels et capteurs du terminal 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 7 Des technologies matures issues du web
  • 8. Le format et sa compatibilité (mobile) avec les navigateurs et systèmes d’exploitation sont en cours de développement. Il manque un niveau suffisant de compatibilité avec les fonctions natives des appareils mobiles : Contacts, Bluetooth/NFC, Audio et GPS. … et ne figurent dans aucune boutique d’application ! 😉 (ou lire cet article : « I built a Progressive Web App and published it in 3 app stores. Here’s what I learned ») 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 8 Les freins à l’adoption des PWA
  • 9. 3. Eléments clés Différencier le contenant et le contenu 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 9
  • 10. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 10 Architecture d’une PWA 1/3 APP SHELL HTML / CSS / JavaScript Chargement rapide Mise en cache Affichage dynamique du contenu
  • 11. SERVICE WORKER + PUSH API Fichier JavaScript Scripts en arrière-plan du navigateur (synchronisation silencieuse) APIs spécifiques : Cache, Data fetching, Messaging, Push… Les Services Workers bientôt supportés par tous les navigateurs mobiles ! 😲 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 11 Architecture d’une PWA 2/3
  • 12. APP MANIFEST + APP BANNER Fichier JSON Ajout de l’application sur l’écran d’accueil (bannière) Icône (favicon) + Splashscreen (ou aplat de couleur) Mode d’affichage portrait ou paysage (…ou les deux !) Option plein-écran (indépendante du navigateur web) 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 12 Architecture d’une PWA 3/3
  • 13. 4. Cas d'utilisation Ils sont passés en Progressive Web App… 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 13
  • 14. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 14
  • 15. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 15
  • 16. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 16
  • 17. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 17
  • 18. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 18
  • 19. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 19 Twitter Lite
  • 20. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 20 …et bien d’autres ! Starbucks Coffee KFC Google I/O Telegram Flipboard Code.NASA.gov
  • 21. 4. Ressources Documentation et informations 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 21
  • 22. blog.twitter.com 06/04/2017 1and1.fr/digitalguide 06/04/2017 slideshare.net/fredcavazza 28/09/2017 slideshare.net/sebastieno 09/11/2017 fredcavazza.net 11/02/2018 slideshare.net/ovronaz 12/02/2018 visualapps.fr 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 22 Références developers.google.com/checklist developers.google.com/showcase blog.goodbarber.com medium.freecodecamp.org progressive-web-apps.fr pwa.rocks outweb.io mobizel.com Aller plus loin