SlideShare une entreprise Scribd logo
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
● HTML5
● Nouvelle technologie
● Rapprocher le Web du monde natif
● Nouvelles possibilités
Voir plus loin
● Synchronisation en arrière plan
nAcademy Le 21 octobre 2015 Neuros -
Promesses
● Du vrai hors-ligne pour nous (développeurs)
● Meilleures performances pour nos utilisateurs
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, smartphones
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 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
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é
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
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/firekey
nAcademy Le 21 octobre 2015 Neuros -
Utilisation Service Workers
nAcademy Le 21 octobre 2015 Neuros -
https://
● Prévoir
https://sousdomaine.domaine:port
● Obligatoire
navigator.serviceWorker.controller.scriptURL
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
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
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!'));
});
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)
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)
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
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
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();
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'})
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));
}
});
nAcademy Le 21 octobre 2015 Neuros -
Les Navigateurs compatibles
© https://jakearchibald.github.io/isserviceworkerready/index.html
Débug
Promesses
Implémentation
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
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

Contenu connexe

En vedette

Contrôler votre matériel par les apps - JDLL
Contrôler votre matériel par les apps - JDLLContrôler votre matériel par les apps - JDLL
Contrôler votre matériel par les apps - JDLL
Christophe Villeneuve
 
MariaDB à l'assaut des developpeurs
MariaDB à l'assaut des developpeursMariaDB à l'assaut des developpeurs
MariaDB à l'assaut des developpeurs
Christophe Villeneuve
 
RGAA3 et votre projet drupal - drupalfr
RGAA3 et votre projet drupal - drupalfrRGAA3 et votre projet drupal - drupalfr
RGAA3 et votre projet drupal - drupalfr
Christophe Villeneuve
 
Mariadb pour les developpeurs - OSDC
Mariadb pour les developpeurs - OSDCMariadb pour les developpeurs - OSDC
Mariadb pour les developpeurs - OSDC
Christophe Villeneuve
 
Les fonctions MariaDB - LeMug.fr
Les fonctions MariaDB - LeMug.frLes fonctions MariaDB - LeMug.fr
Les fonctions MariaDB - LeMug.fr
Christophe Villeneuve
 
La sécurité à tous les niveaux - JDLL
La sécurité à tous les niveaux - JDLLLa sécurité à tous les niveaux - JDLL
La sécurité à tous les niveaux - JDLL
Christophe Villeneuve
 
Chiffrer et sécuriser MariaDB
Chiffrer et sécuriser MariaDBChiffrer et sécuriser MariaDB
Chiffrer et sécuriser MariaDB
Christophe Villeneuve
 
Firefox OS - Api battery status
Firefox OS - Api battery statusFirefox OS - Api battery status
Firefox OS - Api battery status
Christophe Villeneuve
 
Web Worker +α - HTML5/JavaScript and Service Worker API
Web Worker +α - HTML5/JavaScript and Service Worker APIWeb Worker +α - HTML5/JavaScript and Service Worker API
Web Worker +α - HTML5/JavaScript and Service Worker API
Ken William
 
Le service workers
Le service workersLe service workers
Le service workers
neuros
 
Actu Eco 21/11/14
Actu Eco 21/11/14Actu Eco 21/11/14
PAMPAT_newsletter mai_2015
PAMPAT_newsletter mai_2015PAMPAT_newsletter mai_2015
PAMPAT_newsletter mai_2015
marouen chikhaoui
 
Cap Chine 22 Janvier 2007 Rf Acfci V Linkedin 2009 Sans Financements
Cap Chine 22 Janvier 2007 Rf Acfci V Linkedin 2009 Sans FinancementsCap Chine 22 Janvier 2007 Rf Acfci V Linkedin 2009 Sans Financements
Cap Chine 22 Janvier 2007 Rf Acfci V Linkedin 2009 Sans Financements
Renaud Favier
 
Reglement interieur ca 2009
Reglement interieur ca 2009Reglement interieur ca 2009
Reglement interieur ca 2009
Lycée Condorcet
 
Chiffres Daffaire Bnp
Chiffres Daffaire BnpChiffres Daffaire Bnp
Chiffres Daffaire BnpStan
 
C:\Documents And Settings\Administrador\Escritorio\Ejemplos De AlmacéN
C:\Documents And Settings\Administrador\Escritorio\Ejemplos De AlmacéNC:\Documents And Settings\Administrador\Escritorio\Ejemplos De AlmacéN
C:\Documents And Settings\Administrador\Escritorio\Ejemplos De AlmacéN
guest921e95
 
Design Museum - London
Design Museum - LondonDesign Museum - London
Design Museum - LondonEscrimeLiban
 
Etude FCD, ESSEC et PwC sur la distribution responsable (août 2015)
Etude FCD, ESSEC et PwC sur la distribution responsable (août 2015)Etude FCD, ESSEC et PwC sur la distribution responsable (août 2015)
Etude FCD, ESSEC et PwC sur la distribution responsable (août 2015)
PwC France
 
Ejemplo de fraccionarios
Ejemplo de fraccionariosEjemplo de fraccionarios
Ejemplo de fraccionarios
Edwin Jose Aguas Carcamo
 
crème "étoilée"
crème "étoilée"crème "étoilée"
crème "étoilée"
sanleonardoies
 

En vedette (20)

Contrôler votre matériel par les apps - JDLL
Contrôler votre matériel par les apps - JDLLContrôler votre matériel par les apps - JDLL
Contrôler votre matériel par les apps - JDLL
 
MariaDB à l'assaut des developpeurs
MariaDB à l'assaut des developpeursMariaDB à l'assaut des developpeurs
MariaDB à l'assaut des developpeurs
 
RGAA3 et votre projet drupal - drupalfr
RGAA3 et votre projet drupal - drupalfrRGAA3 et votre projet drupal - drupalfr
RGAA3 et votre projet drupal - drupalfr
 
Mariadb pour les developpeurs - OSDC
Mariadb pour les developpeurs - OSDCMariadb pour les developpeurs - OSDC
Mariadb pour les developpeurs - OSDC
 
Les fonctions MariaDB - LeMug.fr
Les fonctions MariaDB - LeMug.frLes fonctions MariaDB - LeMug.fr
Les fonctions MariaDB - LeMug.fr
 
La sécurité à tous les niveaux - JDLL
La sécurité à tous les niveaux - JDLLLa sécurité à tous les niveaux - JDLL
La sécurité à tous les niveaux - JDLL
 
Chiffrer et sécuriser MariaDB
Chiffrer et sécuriser MariaDBChiffrer et sécuriser MariaDB
Chiffrer et sécuriser MariaDB
 
Firefox OS - Api battery status
Firefox OS - Api battery statusFirefox OS - Api battery status
Firefox OS - Api battery status
 
Web Worker +α - HTML5/JavaScript and Service Worker API
Web Worker +α - HTML5/JavaScript and Service Worker APIWeb Worker +α - HTML5/JavaScript and Service Worker API
Web Worker +α - HTML5/JavaScript and Service Worker API
 
Le service workers
Le service workersLe service workers
Le service workers
 
Actu Eco 21/11/14
Actu Eco 21/11/14Actu Eco 21/11/14
Actu Eco 21/11/14
 
PAMPAT_newsletter mai_2015
PAMPAT_newsletter mai_2015PAMPAT_newsletter mai_2015
PAMPAT_newsletter mai_2015
 
Cap Chine 22 Janvier 2007 Rf Acfci V Linkedin 2009 Sans Financements
Cap Chine 22 Janvier 2007 Rf Acfci V Linkedin 2009 Sans FinancementsCap Chine 22 Janvier 2007 Rf Acfci V Linkedin 2009 Sans Financements
Cap Chine 22 Janvier 2007 Rf Acfci V Linkedin 2009 Sans Financements
 
Reglement interieur ca 2009
Reglement interieur ca 2009Reglement interieur ca 2009
Reglement interieur ca 2009
 
Chiffres Daffaire Bnp
Chiffres Daffaire BnpChiffres Daffaire Bnp
Chiffres Daffaire Bnp
 
C:\Documents And Settings\Administrador\Escritorio\Ejemplos De AlmacéN
C:\Documents And Settings\Administrador\Escritorio\Ejemplos De AlmacéNC:\Documents And Settings\Administrador\Escritorio\Ejemplos De AlmacéN
C:\Documents And Settings\Administrador\Escritorio\Ejemplos De AlmacéN
 
Design Museum - London
Design Museum - LondonDesign Museum - London
Design Museum - London
 
Etude FCD, ESSEC et PwC sur la distribution responsable (août 2015)
Etude FCD, ESSEC et PwC sur la distribution responsable (août 2015)Etude FCD, ESSEC et PwC sur la distribution responsable (août 2015)
Etude FCD, ESSEC et PwC sur la distribution responsable (août 2015)
 
Ejemplo de fraccionarios
Ejemplo de fraccionariosEjemplo de fraccionarios
Ejemplo de fraccionarios
 
crème "étoilée"
crème "étoilée"crème "étoilée"
crème "étoilée"
 

Similaire à Le service workers

ASP.NET MVC 6
ASP.NET MVC 6ASP.NET MVC 6
ASP.NET MVC 6
Microsoft
 
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
vincent aniort
 
Angular 4 - installation d'Angular -- Français
Angular 4  - installation  d'Angular -- FrançaisAngular 4  - installation  d'Angular -- Français
Angular 4 - installation d'Angular -- Français
VERTIKA
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
Francois ANDRE
 
Ce qu'il faut retenir de la FrenchKit iOS
Ce qu'il faut retenir de la FrenchKit iOSCe qu'il faut retenir de la FrenchKit iOS
Ce qu'il faut retenir de la FrenchKit iOS
Niji
 
Angular retro
Angular retroAngular retro
Angular retro
Deyine Jiddou
 
Firefox OS dans le web - Journée du libre 2015 Lille
Firefox OS dans le web - Journée du libre 2015  LilleFirefox OS dans le web - Journée du libre 2015  Lille
Firefox OS dans le web - Journée du libre 2015 Lille
Christophe Villeneuve
 
Integrons en mode continu
Integrons en mode continuIntegrons en mode continu
Integrons en mode continu
neuros
 
[Webinar] Techniques avancées de création de workflow - FR
[Webinar] Techniques avancées de création de workflow - FR[Webinar] Techniques avancées de création de workflow - FR
[Webinar] Techniques avancées de création de workflow - FR
Nuxeo
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSOAT
 
ASP.NET Web API & Azure API Management
ASP.NET Web API & Azure API ManagementASP.NET Web API & Azure API Management
ASP.NET Web API & Azure API Management
Microsoft
 
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
XavierPestel
 
Utilisation d'une api web avec asp
Utilisation d'une api web avec aspUtilisation d'une api web avec asp
Utilisation d'une api web avec aspNovencia Groupe
 
Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3
Luc Juggery
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
TelecomValley
 
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
MSDEVMTL
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
imenhamada17
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.js
OLBATI
 
Geek Time December 2016 : Swagger II
Geek Time December 2016 : Swagger IIGeek Time December 2016 : Swagger II
Geek Time December 2016 : Swagger II
OLBATI
 

Similaire à Le service workers (20)

ASP.NET MVC 6
ASP.NET MVC 6ASP.NET MVC 6
ASP.NET MVC 6
 
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
 
Angular 4 - installation d'Angular -- Français
Angular 4  - installation  d'Angular -- FrançaisAngular 4  - installation  d'Angular -- Français
Angular 4 - installation d'Angular -- Français
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
 
Ce qu'il faut retenir de la FrenchKit iOS
Ce qu'il faut retenir de la FrenchKit iOSCe qu'il faut retenir de la FrenchKit iOS
Ce qu'il faut retenir de la FrenchKit iOS
 
Angular retro
Angular retroAngular retro
Angular retro
 
Firefox OS dans le web - Journée du libre 2015 Lille
Firefox OS dans le web - Journée du libre 2015  LilleFirefox OS dans le web - Journée du libre 2015  Lille
Firefox OS dans le web - Journée du libre 2015 Lille
 
Integrons en mode continu
Integrons en mode continuIntegrons en mode continu
Integrons en mode continu
 
[Webinar] Techniques avancées de création de workflow - FR
[Webinar] Techniques avancées de création de workflow - FR[Webinar] Techniques avancées de création de workflow - FR
[Webinar] Techniques avancées de création de workflow - FR
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVC
 
ASP.NET Web API & Azure API Management
ASP.NET Web API & Azure API ManagementASP.NET Web API & Azure API Management
ASP.NET Web API & Azure API Management
 
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Utilisation d'une api web avec asp
Utilisation d'une api web avec aspUtilisation d'une api web avec asp
Utilisation d'une api web avec asp
 
Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.js
 
Geek Time December 2016 : Swagger II
Geek Time December 2016 : Swagger IIGeek Time December 2016 : Swagger II
Geek Time December 2016 : Swagger II
 

Plus de Christophe Villeneuve

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
Christophe Villeneuve
 
La boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxLa boîte à outils de développements dans Firefox
La boîte à outils de développements dans Firefox
Christophe Villeneuve
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
Christophe Villeneuve
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
Christophe Villeneuve
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
Christophe Villeneuve
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
Christophe Villeneuve
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
Christophe Villeneuve
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
Christophe Villeneuve
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
Christophe Villeneuve
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
Christophe Villeneuve
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
Christophe Villeneuve
 
Foxfooding
FoxfoodingFoxfooding
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
Christophe Villeneuve
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
Christophe Villeneuve
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
Christophe Villeneuve
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
Christophe Villeneuve
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
Christophe Villeneuve
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
Christophe Villeneuve
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
Christophe Villeneuve
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
Christophe Villeneuve
 

Plus de Christophe Villeneuve (20)

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
 
La boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxLa boîte à outils de développements dans Firefox
La boîte à outils de développements dans Firefox
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
 
Foxfooding
FoxfoodingFoxfooding
Foxfooding
 
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
 

Le service workers

  • 1. nAcademy Le 21 octobre 2015 Neuros - Le Service Workers Christophe Villeneuve
  • 2. nAcademy Le 21 octobre 2015 Neuros - Aujourd'hui... ● API !!! ● La réalité ● Vous avez dit comment... ● Utilisation
  • 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. nAcademy Le 21 octobre 2015 Neuros - Promesses ● Du vrai hors-ligne pour nous (développeurs) ● Meilleures performances pour nos utilisateurs
  • 6. nAcademy Le 21 octobre 2015 Neuros - Je dis… J'ai consulté dans le métro sur du papier
  • 7. nAcademy Le 21 octobre 2015 Neuros - Aujourd'hui, je dis… J'ai consulté dans le métro Horaire projection sur tablettes, smartphones
  • 8. nAcademy Le 21 octobre 2015 Neuros - Protocole HTTP Page Web Réseau / Serveur
  • 9. nAcademy Le 21 octobre 2015 Neuros - Oui mais… ● Wifi ● Mode avion ● Dans un lieu● 3G / 4G Ascenseur Métro
  • 10. nAcademy Le 21 octobre 2015 Neuros - Résultat
  • 11. nAcademy Le 21 octobre 2015 Neuros - Autres problèmes possibles
  • 12. Vous avez dit comment Le service workers
  • 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. 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. 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. nAcademy Le 21 octobre 2015 Neuros - Fonctionnement (1/2) © Hubert Sablonnière NAVIGATEUR Réseau
  • 17. nAcademy Le 21 octobre 2015 Neuros - Fonctionnement (2/2) © Hubert Sablonnière NAVIGATEUR Réseau Service Worker Cache
  • 19. nAcademy Le 21 octobre 2015 Neuros - Firekey.org ● Générateur Token (= Google Authenticator) ● https://github.com/fwenzel/firekey
  • 20. nAcademy Le 21 octobre 2015 Neuros - Utilisation Service Workers
  • 21. nAcademy Le 21 octobre 2015 Neuros - https:// ● Prévoir https://sousdomaine.domaine:port ● Obligatoire navigator.serviceWorker.controller.scriptURL
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  • 33. nAcademy Le 21 octobre 2015 Neuros - Les Navigateurs compatibles © https://jakearchibald.github.io/isserviceworkerready/index.html Débug Promesses Implémentation
  • 34. 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
  • 35. 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