SlideShare une entreprise Scribd logo
1
Construire une PWA
connectée à WordPress
WP-Tech
28 avril 2018
2
Les intervenants
Mathieu Le Roi
Développeur indépendant
@mat_lr
Benjamin Lupu
Directeur digital du groupe Jeune Afrique
@benjaminlupu
Membres du collectif Uncategorized Creations
(coucou Lionel !)
https://uncategorized-creations.com/
3
Progressive Web Apps ?
4
Un terme inventé en 2015 par la designer France
Berriman et un des ingénieurs de Google Chrome,
Alex Russell.
Une idée simple : tirer avantage des nouvelles
technologies web pour améliorer les web apps et les
rapprocher des applications natives.
5
Une application
Un exécutable téléchargé et installé localement
Tire toute une partie de ses données du web grâce à
un web service (ex. WordPress REST API)
Accès à l’OS et au matériel (appareil photo, centre de
partage, GPS)
6
Type
d’application
Technologie Installée
localement
Connectée au
web
Accès à l’OS
et au matériel
Native Objective C,
Swift, Java
Oui Oui Oui (grâce aux
API natives)
Hybride HTML, CSS,
JavaScript,
Cordova
Oui (grâce à la
coque fournie
par Cordova)
Oui Oui (grâce aux
API et plugins
Cordova)
Web HTML, CSS,
JavaScript
Non Oui Oui (limité par le
support du
navigateur)
React Native, Native Script… ?
Cas à part : développées en JavaScript puis converties en
technologies natives.
7
L’accès à l’OS et au matériel
Limité aux API du navigateur :
Quelques exemples : geolocation, network
information, battery status, web share
Progrès même si pas de parité avec le monde natif.
A ne pas sous-estimer. Ex. ar.js
https://www.youtube.com/watch?v=0MtvjFg7tik
8
9
WP-AppKit
Extension libre
https://wordpress.org/plugins/wp-appkit/
Depuis 2014
Pour réaliser des applications hybrides (Cordova)
connectées à WordPress
API REST dédiée
Micro-framework JS pour l’interface de l’appli
Depuis la version la dernière version : support des
PWA
10
Démo
(cambouis et boulons)
>> PWA de démo WP-Tech
>> Points clés du code de la PWA
11
Les technologies
La checklist technique :
https://developers.google.com/web/progressive-web-a
pps/checklist
1. Manifest
2. Offline
3. Liens profonds
12
1 - Le manifeste
https://developer.mozilla.org/en-US/docs/Web/Manifest
Permet l’ajout de l’app à l’écran d’accueil.
Un fichier JSON pour définir : le nom de l’appli, son
URL de départ, son icône, splashscreen...
>> Dans le code :
- manifest.json
- Inclusion dans index.html
13
2 - Gestion du offline
● Sources de l’app accessibles offline
> Service Worker
● Principaux contenus préchargés
> API - Web Service de synchronisation
> Local Storage
14
2 - Offline / Service worker
Permet de faire tourner des tâches en arrière plan dans
le navigateur, en parallèle du rendu de la page web.
Principales utilisations :
• Le “shell” applicatif : proxy entre le navigateur et le
réseau pour avoir l’ensemble des sources
disponibles offline.
• Les notifications web
>> Dans le code : service_worker.js
15
2 - Offline / Contenus préchargés
• API - Web Service
Pré-chargement des principaux contenus de l’app pour
permettre la navigation offline.
>> Dans le code : Le web service de synchronisation
• Local Storage
Stockage des contenus de l’app en cache navigateur.
>> Dans le code : Module Backbone et Local Storage
dans Dev Tools du navigateur.
16
3 - Liens profonds
Toutes les urls de l’app doivent être accessibles
directement dans le navigateur.
• Pushstate
Agir en JS sur l’historique et les urls du navigateur.
>> Dans le code : Backbone.history.start
• Config serveur
Redirection de toutes les urls vers l’index.html.
>> Dans le code : .htaccess
• Routage
Le routeur fait correspondre l’url à un écran de l’app
>> Dans le code : router.js
17
Lighthouse
Extension Chrome permettant de tester le respect
des critères techniques des PWA.
https://developers.google.com/web/tools/lighthouse/
>> Parcours d’un rapport Lighthouse
18
Intérêts et limites des PWA
19
Les PWA s’attaquent aux problèmes qu’on peut
rencontrer avec des applications natives.
• Ex. Technologies multiples et non web
• Ex. Distribution dans les app stores
Elles tentent de faire des applis web des citoyennes à
part entière.
Elles s’appuient sur la plateforme du navigateur et les
standards web.
20
Un choix à faire :
• Enrichir son site
• Développer une application
Fort investissement dans le Javascript.
Support encore en développement (notamment sur
iOS).
Des problèmes parfois complexes : ex. mise à jour
des ressources en cache.
Attention aux mythes de la réduction des coûts et de
la conversion de son site.

Contenu connexe

Tendances

Faire mieux avec Joomla! 3.5
Faire mieux avec Joomla! 3.5Faire mieux avec Joomla! 3.5
Faire mieux avec Joomla! 3.5
Thierry Broussegoutte
 
Tuto Phonegap
Tuto PhonegapTuto Phonegap
Tuto Phonegap
SUN
 
PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS AppceleratorTiyab K.
 
Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1
Creazzly
 
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKitConstruire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
uncatcrea
 
Presentation cms
Presentation cmsPresentation cms
Presentation cms
Mahamadou Traore
 

Tendances (6)

Faire mieux avec Joomla! 3.5
Faire mieux avec Joomla! 3.5Faire mieux avec Joomla! 3.5
Faire mieux avec Joomla! 3.5
 
Tuto Phonegap
Tuto PhonegapTuto Phonegap
Tuto Phonegap
 
PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS Appcelerator
 
Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1Cours Licence Pro (Système de gestion de contenu) Partie 1
Cours Licence Pro (Système de gestion de contenu) Partie 1
 
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKitConstruire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
 
Presentation cms
Presentation cmsPresentation cms
Presentation cms
 

Similaire à Construire une PWA connectée à WordPress

WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introduction
Jean Michel
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
yassinesouli2
 
Progressive Web App : Pourquoi et comment se passer des stores ?
Progressive Web App : Pourquoi et comment se passer des stores ?Progressive Web App : Pourquoi et comment se passer des stores ?
Progressive Web App : Pourquoi et comment se passer des stores ?
Sébastien Ollivier
 
Investir sur son API web (in French)
Investir sur son API web (in French)Investir sur son API web (in French)
Investir sur son API web (in French)
Restlet
 
Comment tester une Progressive Web App
Comment tester une Progressive Web AppComment tester une Progressive Web App
Comment tester une Progressive Web App
Testing Digital
 
Applications Android - cours 13 : Connectivité et services Web
Applications Android - cours 13 : Connectivité et services WebApplications Android - cours 13 : Connectivité et services Web
Applications Android - cours 13 : Connectivité et services Web
Ahmed-Chawki Chaouche
 
Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
Jean David Olekhnovitch
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
Jérémy Buget
 
Microsoft Power Platform en Action
Microsoft Power Platform en Action Microsoft Power Platform en Action
Microsoft Power Platform en Action
Denys Chamberland
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
Francois ANDRE
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
Lotfi Dridi
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
Abdoulaye Dieng
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
pprem
 
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
DEFO KUATE Landry
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Android introvf
Android introvfAndroid introvf
Android introvf
Anne-Marie Pinna-Dery
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web components
Francois ANDRE
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
wyggio
 

Similaire à Construire une PWA connectée à WordPress (20)

WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introduction
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 
Progressive Web App : Pourquoi et comment se passer des stores ?
Progressive Web App : Pourquoi et comment se passer des stores ?Progressive Web App : Pourquoi et comment se passer des stores ?
Progressive Web App : Pourquoi et comment se passer des stores ?
 
Investir sur son API web (in French)
Investir sur son API web (in French)Investir sur son API web (in French)
Investir sur son API web (in French)
 
Comment tester une Progressive Web App
Comment tester une Progressive Web AppComment tester une Progressive Web App
Comment tester une Progressive Web App
 
Applications Android - cours 13 : Connectivité et services Web
Applications Android - cours 13 : Connectivité et services WebApplications Android - cours 13 : Connectivité et services Web
Applications Android - cours 13 : Connectivité et services Web
 
Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
Microsoft Power Platform en Action
Microsoft Power Platform en Action Microsoft Power Platform en Action
Microsoft Power Platform en Action
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
 
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Android introvf
Android introvfAndroid introvf
Android introvf
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web components
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 

Plus de Benjamin LUPU

Devenir un utilisateur actif de Google Analytics
Devenir un utilisateur actif de Google AnalyticsDevenir un utilisateur actif de Google Analytics
Devenir un utilisateur actif de Google Analytics
Benjamin LUPU
 
Building a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKitBuilding a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKit
Benjamin LUPU
 
Architecture de l'information pour WordPress
Architecture de l'information pour WordPressArchitecture de l'information pour WordPress
Architecture de l'information pour WordPress
Benjamin LUPU
 
WordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobilesWordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobiles
Benjamin LUPU
 
Wordpress as a Back Office for Mobile Applications
Wordpress as a Back Office for Mobile ApplicationsWordpress as a Back Office for Mobile Applications
Wordpress as a Back Office for Mobile Applications
Benjamin LUPU
 
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Benjamin LUPU
 
L'analytics au service de vos contenus ?
L'analytics au service de vos contenus ?L'analytics au service de vos contenus ?
L'analytics au service de vos contenus ?
Benjamin LUPU
 
Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?
Benjamin LUPU
 

Plus de Benjamin LUPU (8)

Devenir un utilisateur actif de Google Analytics
Devenir un utilisateur actif de Google AnalyticsDevenir un utilisateur actif de Google Analytics
Devenir un utilisateur actif de Google Analytics
 
Building a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKitBuilding a mobile app connected to WordPress with WP-AppKit
Building a mobile app connected to WordPress with WP-AppKit
 
Architecture de l'information pour WordPress
Architecture de l'information pour WordPressArchitecture de l'information pour WordPress
Architecture de l'information pour WordPress
 
WordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobilesWordPress comme back office d'applications mobiles
WordPress comme back office d'applications mobiles
 
Wordpress as a Back Office for Mobile Applications
Wordpress as a Back Office for Mobile ApplicationsWordpress as a Back Office for Mobile Applications
Wordpress as a Back Office for Mobile Applications
 
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGap
 
L'analytics au service de vos contenus ?
L'analytics au service de vos contenus ?L'analytics au service de vos contenus ?
L'analytics au service de vos contenus ?
 
Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?
 

Construire une PWA connectée à WordPress

  • 1. 1 Construire une PWA connectée à WordPress WP-Tech 28 avril 2018
  • 2. 2 Les intervenants Mathieu Le Roi Développeur indépendant @mat_lr Benjamin Lupu Directeur digital du groupe Jeune Afrique @benjaminlupu Membres du collectif Uncategorized Creations (coucou Lionel !) https://uncategorized-creations.com/
  • 4. 4 Un terme inventé en 2015 par la designer France Berriman et un des ingénieurs de Google Chrome, Alex Russell. Une idée simple : tirer avantage des nouvelles technologies web pour améliorer les web apps et les rapprocher des applications natives.
  • 5. 5 Une application Un exécutable téléchargé et installé localement Tire toute une partie de ses données du web grâce à un web service (ex. WordPress REST API) Accès à l’OS et au matériel (appareil photo, centre de partage, GPS)
  • 6. 6 Type d’application Technologie Installée localement Connectée au web Accès à l’OS et au matériel Native Objective C, Swift, Java Oui Oui Oui (grâce aux API natives) Hybride HTML, CSS, JavaScript, Cordova Oui (grâce à la coque fournie par Cordova) Oui Oui (grâce aux API et plugins Cordova) Web HTML, CSS, JavaScript Non Oui Oui (limité par le support du navigateur) React Native, Native Script… ? Cas à part : développées en JavaScript puis converties en technologies natives.
  • 7. 7 L’accès à l’OS et au matériel Limité aux API du navigateur : Quelques exemples : geolocation, network information, battery status, web share Progrès même si pas de parité avec le monde natif. A ne pas sous-estimer. Ex. ar.js https://www.youtube.com/watch?v=0MtvjFg7tik
  • 8. 8
  • 9. 9 WP-AppKit Extension libre https://wordpress.org/plugins/wp-appkit/ Depuis 2014 Pour réaliser des applications hybrides (Cordova) connectées à WordPress API REST dédiée Micro-framework JS pour l’interface de l’appli Depuis la version la dernière version : support des PWA
  • 10. 10 Démo (cambouis et boulons) >> PWA de démo WP-Tech >> Points clés du code de la PWA
  • 11. 11 Les technologies La checklist technique : https://developers.google.com/web/progressive-web-a pps/checklist 1. Manifest 2. Offline 3. Liens profonds
  • 12. 12 1 - Le manifeste https://developer.mozilla.org/en-US/docs/Web/Manifest Permet l’ajout de l’app à l’écran d’accueil. Un fichier JSON pour définir : le nom de l’appli, son URL de départ, son icône, splashscreen... >> Dans le code : - manifest.json - Inclusion dans index.html
  • 13. 13 2 - Gestion du offline ● Sources de l’app accessibles offline > Service Worker ● Principaux contenus préchargés > API - Web Service de synchronisation > Local Storage
  • 14. 14 2 - Offline / Service worker Permet de faire tourner des tâches en arrière plan dans le navigateur, en parallèle du rendu de la page web. Principales utilisations : • Le “shell” applicatif : proxy entre le navigateur et le réseau pour avoir l’ensemble des sources disponibles offline. • Les notifications web >> Dans le code : service_worker.js
  • 15. 15 2 - Offline / Contenus préchargés • API - Web Service Pré-chargement des principaux contenus de l’app pour permettre la navigation offline. >> Dans le code : Le web service de synchronisation • Local Storage Stockage des contenus de l’app en cache navigateur. >> Dans le code : Module Backbone et Local Storage dans Dev Tools du navigateur.
  • 16. 16 3 - Liens profonds Toutes les urls de l’app doivent être accessibles directement dans le navigateur. • Pushstate Agir en JS sur l’historique et les urls du navigateur. >> Dans le code : Backbone.history.start • Config serveur Redirection de toutes les urls vers l’index.html. >> Dans le code : .htaccess • Routage Le routeur fait correspondre l’url à un écran de l’app >> Dans le code : router.js
  • 17. 17 Lighthouse Extension Chrome permettant de tester le respect des critères techniques des PWA. https://developers.google.com/web/tools/lighthouse/ >> Parcours d’un rapport Lighthouse
  • 19. 19 Les PWA s’attaquent aux problèmes qu’on peut rencontrer avec des applications natives. • Ex. Technologies multiples et non web • Ex. Distribution dans les app stores Elles tentent de faire des applis web des citoyennes à part entière. Elles s’appuient sur la plateforme du navigateur et les standards web.
  • 20. 20 Un choix à faire : • Enrichir son site • Développer une application Fort investissement dans le Javascript. Support encore en développement (notamment sur iOS). Des problèmes parfois complexes : ex. mise à jour des ressources en cache. Attention aux mythes de la réduction des coûts et de la conversion de son site.