Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Construire une PWA connectée à WordPress

205 views

Published on

Support des ateliers donnés à l'occasion du WordCamp Paris 2018 et du WPTech Lyon 2018.

Description de l'atelier : Depuis deux ans, un nouvel acteur du monde mobile est arrivé : les progressive web apps (PWA). Ces applications mettent à profit les dernières évolutions des navigateurs internet (local storage, service workers, notifications web, JavaScript avancé…) pour proposer une expérience utilisateur qui se rapproche des applications mobiles (rapidité, mode hors ligne, animations, notifications…). Durant cet atelier, nous vous proposons d’explorer comment créer une PWA qui a WordPress comme back office. L’atelier s’appuiera sur une PWA réelle et des démonstrations de code. Ça sera l’occasion de peser le pour et le contre des PWA et d’échanger sur des cas d’utilisation. L’atelier est plutôt destiné aux développeurs ayant une bonne connaissance de WordPress et de JavaScript.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Construire une PWA connectée à WordPress

  1. 1. 1 Construire une PWA connectée à WordPress WP-Tech 28 avril 2018
  2. 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/
  3. 3. 3 Progressive Web Apps ?
  4. 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. 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. 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. 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. 8
  9. 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. 10 Démo (cambouis et boulons) >> PWA de démo WP-Tech >> Points clés du code de la PWA
  11. 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. 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. 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. 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. 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. 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. 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. 18. 18 Intérêts et limites des PWA
  19. 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. 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.

×