nAcademy Le 21 octobre 2015 Neuros -
Le Service Workers
Christophe Villeneuve
nAcademy Le 21 octobre 2015 Neuros -
Aujourd'hui...
● API !!!
● La réalité
● Vous avez dit comment...
● Utilisation
nAcademy Le 21 octobre 2015 Neuros -
API
● API de Web Workers
– But de Web Workers
● Répondre aux limites du Javascript
● ...
nAcademy Le 21 octobre 2015 Neuros -
Promesses
● Du vrai hors-ligne pour nous (développeurs)
● Meilleures performances pou...
La réalité
nAcademy Le 21 octobre 2015 Neuros -
Je dis… J'ai consulté
dans le métro
sur du papier
nAcademy Le 21 octobre 2015 Neuros -
Aujourd'hui, je dis… J'ai consulté
dans le métro
Horaire projection
sur tablettes, sm...
nAcademy Le 21 octobre 2015 Neuros -
Protocole HTTP
Page Web
Réseau / Serveur
nAcademy Le 21 octobre 2015 Neuros -
Oui mais…
● Wifi ● Mode avion
● Dans un lieu● 3G / 4G
Ascenseur
Métro
nAcademy Le 21 octobre 2015 Neuros -
Résultat
nAcademy Le 21 octobre 2015 Neuros -
Autres problèmes possibles
Vous avez dit comment
Le service workers
nAcademy Le 21 octobre 2015 Neuros -
Le Service Workers (1/2)
● Intérêt
– Soulager la batterie du smartphone
– Réduire le ...
nAcademy Le 21 octobre 2015 Neuros -
Le Service Workers (2/2)
● Utilisation
– Proxy programmable dans le navigateur
– Scri...
nAcademy Le 21 octobre 2015 Neuros -
AppCache VS Service Workers
● AppCache
– Nécessite une autre API
– Faire du Hors Lign...
nAcademy Le 21 octobre 2015 Neuros -
Fonctionnement (1/2)
© Hubert Sablonnière
NAVIGATEUR
Réseau
nAcademy Le 21 octobre 2015 Neuros -
Fonctionnement (2/2)
© Hubert Sablonnière
NAVIGATEUR
Réseau
Service Worker
Cache
Firekey.org
nAcademy Le 21 octobre 2015 Neuros -
Firekey.org
● Générateur Token (= Google Authenticator)
● https://github.com/fwenzel/...
nAcademy Le 21 octobre 2015 Neuros -
Utilisation Service Workers
nAcademy Le 21 octobre 2015 Neuros -
https://
● Prévoir
https://sousdomaine.domaine:port
● Obligatoire
navigator.serviceWo...
nAcademy Le 21 octobre 2015 Neuros -
Détection
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/apin...
nAcademy Le 21 octobre 2015 Neuros -
Lors de la 1ere visite
● Installer Service Workers
<html><head>
<script>
var sw = nav...
nAcademy Le 21 octobre 2015 Neuros -
Réponse
sw.js
self.addEventListener('fetch', function (event)
{
console.log ('request...
nAcademy Le 21 octobre 2015 Neuros -
L'utilisateur revient sur le site
● Comparaison Worker courant VS nouvelle Réf
this.o...
nAcademy Le 21 octobre 2015 Neuros -
Avec API cache
● Différent cache HTTP
self.addEventListener('fetch', function (event)...
nAcademy Le 21 octobre 2015 Neuros -
Avec du cache
CACHE MANIFEST
index.htm
css/styles.css
img/logo.png
offline.appcache
<...
nAcademy Le 21 octobre 2015 Neuros -
XmlHttpRequest (XHR) (1/2)
● Obtenir des données au format
– XML / jSON / HTML / requ...
nAcademy Le 21 octobre 2015 Neuros -
XmlHttpRequest (XHR) (2/2)
var url = 'apineuros/demo';
var xhr = new XMLHttpRequest()...
nAcademy Le 21 octobre 2015 Neuros -
Fetch () : API requête
var url = 'apineuros/demo';
fetch (url);
.then (function (resp...
nAcademy Le 21 octobre 2015 Neuros -
Fetch () : Réponse
self.addEventListener('fetch', function (event)
{
if (event.reques...
nAcademy Le 21 octobre 2015 Neuros -
Les Navigateurs compatibles
© https://jakearchibald.github.io/isserviceworkerready/in...
nAcademy Le 21 octobre 2015 Neuros -
Merci
● Plus loin
– https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_A...
Le service workers
Prochain SlideShare
Chargement dans…5
×

Le service workers

631 vues

Publié le

Présentation à la nAcademy (Octobre 2015) "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
631
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
5
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

×