Le service workers

595 vues

Publié le

Présentation à la nAcademy (Octobre 2015) de Neuros : Le service workers par Christophe Villeneuve

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
595
Sur SlideShare
0
Issues des intégrations
0
Intégrations
7
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le service workers

  1. 1. nAcademy Le 21 octobre 2015 Neuros - Le Service Workers Christophe Villeneuve
  2. 2. nAcademy Le 21 octobre 2015 Neuros - Aujourd'hui... ● API !!! ● La réalité ● Vous avez dit comment... ● Utilisation
  3. 3. nAcademy Le 21 octobre 2015 Neuros - API ● API de Web Workers – But de Web Workers ● Répondre aux limites du Javascript ● HTML5 ● Nouvelle technologie ● Rapprocher le Web du monde natif ● Nouvelles possibilités Voir plus loin ● Synchronisation en arrière plan
  4. 4. nAcademy Le 21 octobre 2015 Neuros - Promesses ● Du vrai hors-ligne pour nous (développeurs) ● Meilleures performances pour nos utilisateurs
  5. 5. La réalité
  6. 6. nAcademy Le 21 octobre 2015 Neuros - Je dis… J'ai consulté dans le métro sur du papier
  7. 7. nAcademy Le 21 octobre 2015 Neuros - Aujourd'hui, je dis… J'ai consulté dans le métro Horaire projection sur tablettes, smartphones
  8. 8. nAcademy Le 21 octobre 2015 Neuros - Protocole HTTP Page Web Réseau / Serveur
  9. 9. nAcademy Le 21 octobre 2015 Neuros - Oui mais… ● Wifi ● Mode avion ● Dans un lieu● 3G / 4G Ascenseur Métro
  10. 10. nAcademy Le 21 octobre 2015 Neuros - Résultat
  11. 11. nAcademy Le 21 octobre 2015 Neuros - Autres problèmes possibles
  12. 12. Vous avez dit comment Le service workers
  13. 13. nAcademy Le 21 octobre 2015 Neuros - Le Service Workers (1/2) ● Intérêt – Soulager la batterie du smartphone – Réduire le forfait les DATAs – Réduire vos serveurs ● Théorie / Réalité – Emmené le web dans le mobile – Connecté – Push et Notifications – Intégration avec l'OS – Gain Performances
  14. 14. nAcademy Le 21 octobre 2015 Neuros - Le Service Workers (2/2) ● Utilisation – Proxy programmable dans le navigateur – Script exécuté en Background – Communique avec les pages qu'elle contrôle – Pas besoin de pages spécifiques ou d'actions utilisateurs ● Arrêt du Service Workers – Si non utilisé
  15. 15. nAcademy Le 21 octobre 2015 Neuros - AppCache VS Service Workers ● AppCache – Nécessite une autre API – Faire du Hors Ligne – Inconvénient : nombres d'erreurs, les pièges, fichiers non indentifiés ● Service Workers – Voir slides précédents – Eviter les problèmes de AppCache – Embarque son propre cache
  16. 16. nAcademy Le 21 octobre 2015 Neuros - Fonctionnement (1/2) © Hubert Sablonnière NAVIGATEUR Réseau
  17. 17. nAcademy Le 21 octobre 2015 Neuros - Fonctionnement (2/2) © Hubert Sablonnière NAVIGATEUR Réseau Service Worker Cache
  18. 18. Firekey.org
  19. 19. nAcademy Le 21 octobre 2015 Neuros - Firekey.org ● Générateur Token (= Google Authenticator) ● https://github.com/fwenzel/firekey
  20. 20. nAcademy Le 21 octobre 2015 Neuros - Utilisation Service Workers
  21. 21. nAcademy Le 21 octobre 2015 Neuros - https:// ● Prévoir https://sousdomaine.domaine:port ● Obligatoire navigator.serviceWorker.controller.scriptURL
  22. 22. nAcademy Le 21 octobre 2015 Neuros - Détection if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/apineuros/sw.js', {scope: '/apineuros/'}) .then(function(reg) { console.log('ok', registration.scope); }) .catch(function(err) { console.log('No compatible', err); }); } Chemin d'accès au script Restrictions Source : W3C exemple.js
  23. 23. nAcademy Le 21 octobre 2015 Neuros - Lors de la 1ere visite ● Installer Service Workers <html><head> <script> var sw = navigator.serviceWorker.register('/apineuros/sw.js', {scope: "./"}) </script> </head> <body> <a href="testlink.html">Test Link</a> </body></html> Index.html
  24. 24. nAcademy Le 21 octobre 2015 Neuros - Réponse sw.js self.addEventListener('fetch', function (event) { console.log ('request', event.request.url); event.respondWith (new response ('Welcome hello world!')); });
  25. 25. nAcademy Le 21 octobre 2015 Neuros - L'utilisateur revient sur le site ● Comparaison Worker courant VS nouvelle Réf this.onfetch = function(event) { var url = decodeURIComponent(event.request.url), urlToMatch ='http://localhost/swexample/testlink.html', responseText = 'request caught by service worker'; if(url===urlToMatch){ event.respondWith(new Response(responseText)); } }; (1) Elément déclencheur (JS / CSS / IMG / URL) (1)
  26. 26. nAcademy Le 21 octobre 2015 Neuros - Avec API cache ● Différent cache HTTP self.addEventListener('fetch', function (event) { if (event.request.url.match('/apineuros') { event.respondWith ( /* Interroge le serveur */ ); } else{ event.respondWith (caches.match (event.request)); } }); Nouvelle API (9 Sept 2015) FETCH http://fetch.spec.whatwg.org ---------------------------------------- Fetch (event.request) Nouvelle API (9 Sept 2015) FETCH http://fetch.spec.whatwg.org ---------------------------------------- Fetch (event.request)
  27. 27. nAcademy Le 21 octobre 2015 Neuros - Avec du cache CACHE MANIFEST index.htm css/styles.css img/logo.png offline.appcache <html manifest="offline.appcache"> <head></head> ... Index.html
  28. 28. nAcademy Le 21 octobre 2015 Neuros - XmlHttpRequest (XHR) (1/2) ● Obtenir des données au format – XML / jSON / HTML / requête HTTP ● Nécessite Javascript ● Support Ajax
  29. 29. nAcademy Le 21 octobre 2015 Neuros - XmlHttpRequest (XHR) (2/2) var url = 'apineuros/demo'; var xhr = new XMLHttpRequest(); var async = false xhr.open ('GET', url, async); xhr.responsetype = 'json'; xhr.onload = function () { var demo = xhr.response; console.log ('demo',demo); } xhr.error = function () { console.log ('error'); }; xhr.send();
  30. 30. nAcademy Le 21 octobre 2015 Neuros - Fetch () : API requête var url = 'apineuros/demo'; fetch (url); .then (function (response) { return response.json(); }) .then (function (demo) { console.log('demos',demo); }) .catch(function (demo) { console.log('erreur',erreur); }) Possible : Fetch (url, {method :'POST'}) Possible : Fetch (url, {method :'POST'})
  31. 31. nAcademy Le 21 octobre 2015 Neuros - Fetch () : Réponse self.addEventListener('fetch', function (event) { if (event.request.url.match('/apineuros') { event.respondWith(fetch(event.request)); } else { event.respondWidth (caches.match(event.request)); } });
  32. 32. nAcademy Le 21 octobre 2015 Neuros - Les Navigateurs compatibles © https://jakearchibald.github.io/isserviceworkerready/index.html Débug Promesses Implémentation
  33. 33. nAcademy Le 21 octobre 2015 Neuros - Merci ● Plus loin – https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API – http://www.w3.org/TR/service-workers/ ● Sources – Hubert Sablonnière – Eric Daspet Questions @hellosct1 @neuro_paris
  34. 34. nAcademy Le 21 octobre 2015 Neuros - Qui... est Christophe Villeneuve ? << afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis –La voix du LAT – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros - elephpant

×