SlideShare une entreprise Scribd logo
1  sur  34
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)Laurent Duveau
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - ThéorieHoracio Gonzalez
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSPeak Ace
 
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...Chipway
 
Angularjs101-les_SPA:support de la video
Angularjs101-les_SPA:support de la videoAngularjs101-les_SPA:support de la video
Angularjs101-les_SPA:support de la videoeric German
 
Zend Framework 2.0 - Le gestionnaire de modules
Zend Framework 2.0 - Le gestionnaire de modulesZend Framework 2.0 - Le gestionnaire de modules
Zend Framework 2.0 - Le gestionnaire de modulesVincent Blanchon
 
Le gameday...un concept devopsludique
Le gameday...un concept devopsludiqueLe gameday...un concept devopsludique
Le gameday...un concept devopsludiqueEspritAgile
 
Gérer l'inconnu avec peu de moyens par le développement itératif - L'agili...
Gérer l'inconnu avec peu de moyens par le développement itératif - L'agili...Gérer l'inconnu avec peu de moyens par le développement itératif - L'agili...
Gérer l'inconnu avec peu de moyens par le développement itératif - L'agili...Benoit St-André
 
Introduction à Zend Framework
Introduction à Zend FrameworkIntroduction à Zend Framework
Introduction à Zend FrameworkGauthier Delamarre
 
Creation De Sites Internet
Creation De Sites InternetCreation De Sites Internet
Creation De Sites Internetzestef
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Laurent Duveau
 
2 jours pour se lancer dans la programmation web
2 jours pour se lancer dans la programmation web2 jours pour se lancer dans la programmation web
2 jours pour se lancer dans la programmation webThibault Vinchent
 
Comment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationComment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationBenoit Tostain
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartLa FeWeb
 
Adopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideAdopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideThomas Champion
 
Pourquoi choisir un CMS Open Source ?
Pourquoi choisir un CMS Open Source ?Pourquoi choisir un CMS Open Source ?
Pourquoi choisir un CMS Open Source ?OSInet
 

Tendances (20)

De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - Théorie
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JS
 
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
 
Angularjs101-les_SPA:support de la video
Angularjs101-les_SPA:support de la videoAngularjs101-les_SPA:support de la video
Angularjs101-les_SPA:support de la video
 
Zend Framework 2.0 - Le gestionnaire de modules
Zend Framework 2.0 - Le gestionnaire de modulesZend Framework 2.0 - Le gestionnaire de modules
Zend Framework 2.0 - Le gestionnaire de modules
 
Le gameday...un concept devopsludique
Le gameday...un concept devopsludiqueLe gameday...un concept devopsludique
Le gameday...un concept devopsludique
 
Angularjs101 p2
Angularjs101 p2Angularjs101 p2
Angularjs101 p2
 
Ionic
IonicIonic
Ionic
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Gérer l'inconnu avec peu de moyens par le développement itératif - L'agili...
Gérer l'inconnu avec peu de moyens par le développement itératif - L'agili...Gérer l'inconnu avec peu de moyens par le développement itératif - L'agili...
Gérer l'inconnu avec peu de moyens par le développement itératif - L'agili...
 
Introduction à Zend Framework
Introduction à Zend FrameworkIntroduction à Zend Framework
Introduction à Zend Framework
 
Creation De Sites Internet
Creation De Sites InternetCreation De Sites Internet
Creation De Sites Internet
 
PHP 7 - Think php7
PHP 7 - Think php7PHP 7 - Think php7
PHP 7 - Think php7
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
 
2 jours pour se lancer dans la programmation web
2 jours pour se lancer dans la programmation web2 jours pour se lancer dans la programmation web
2 jours pour se lancer dans la programmation web
 
Comment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationComment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formation
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
 
Adopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideAdopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front Side
 
Pourquoi choisir un CMS Open Source ?
Pourquoi choisir un CMS Open Source ?Pourquoi choisir un CMS Open Source ?
Pourquoi choisir un CMS Open Source ?
 

Similaire à Le service workers

ASP.NET MVC 6
ASP.NET MVC 6ASP.NET MVC 6
ASP.NET MVC 6Microsoft
 
Integrons en mode continu
Integrons en mode continuIntegrons en mode continu
Integrons en mode continuneuros
 
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
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web componentsFrancois ANDRE
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Luc 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.jsTelecomValley
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido SOAT
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007Eric D.
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: AngularHabib Ayad
 
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
 
[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 - FRNuxeo
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
Développer sereinement avec Node.js
Développer sereinement avec Node.jsDévelopper sereinement avec Node.js
Développer sereinement avec Node.jsJulien Giovaresco
 
React Native - Développez vos application native en JS
React Native - Développez vos application native en JSReact Native - Développez vos application native en JS
React Native - Développez vos application native en JSYann Duval
 

Similaire à Le service workers (20)

Le service workers
Le service workersLe service workers
Le service workers
 
ASP.NET MVC 6
ASP.NET MVC 6ASP.NET MVC 6
ASP.NET MVC 6
 
Integrons en mode continu
Integrons en mode continuIntegrons en mode continu
Integrons en mode continu
 
Angular retro
Angular retroAngular retro
Angular retro
 
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 !
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
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
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Firefox OS - Api battery status
Firefox OS - Api battery statusFirefox OS - Api battery status
Firefox OS - Api battery status
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
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
 
[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
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Développer sereinement avec Node.js
Développer sereinement avec Node.jsDévelopper sereinement avec Node.js
Développer sereinement avec Node.js
 
React Native - Développez vos application native en JS
React Native - Développez vos application native en JSReact Native - Développez vos application native en JS
React Native - Développez vos application native en JS
 

Plus de neuros

Solution pour un Réseau Social d'Entreprise (RSE)
Solution pour un Réseau Social d'Entreprise (RSE)Solution pour un Réseau Social d'Entreprise (RSE)
Solution pour un Réseau Social d'Entreprise (RSE)neuros
 
Proteger votre vie privee sur internet
Proteger votre vie privee sur internetProteger votre vie privee sur internet
Proteger votre vie privee sur internetneuros
 
Le pouvoir d'être Visible ou Invisible sur Internet
Le pouvoir d'être Visible ou Invisible  sur InternetLe pouvoir d'être Visible ou Invisible  sur Internet
Le pouvoir d'être Visible ou Invisible sur Internetneuros
 
Vos projets web sur les plateformes ouvertes
Vos projets web sur les plateformes ouvertesVos projets web sur les plateformes ouvertes
Vos projets web sur les plateformes ouvertesneuros
 
Http2 les impacts dans le web
Http2 les impacts dans le webHttp2 les impacts dans le web
Http2 les impacts dans le webneuros
 
Php 7 Think php7
Php 7 Think php7Php 7 Think php7
Php 7 Think php7neuros
 
RGAA 3 dans un Web Accessible
RGAA 3 dans un Web AccessibleRGAA 3 dans un Web Accessible
RGAA 3 dans un Web Accessibleneuros
 
Les effets de la loi Hamon
Les effets de la loi HamonLes effets de la loi Hamon
Les effets de la loi Hamonneuros
 
La sécurité et php
La sécurité et phpLa sécurité et php
La sécurité et phpneuros
 
Les protocoles temps réels
Les protocoles temps réelsLes protocoles temps réels
Les protocoles temps réelsneuros
 
Vectoriel et 3d en html5 - Animation newschool (partie 2)
Vectoriel et 3d en html5 - Animation newschool (partie 2)Vectoriel et 3d en html5 - Animation newschool (partie 2)
Vectoriel et 3d en html5 - Animation newschool (partie 2)neuros
 
Améliorer les performances SQL
Améliorer les performances SQLAméliorer les performances SQL
Améliorer les performances SQLneuros
 
Newschool partie1 methode HTML5
Newschool partie1 methode HTML5Newschool partie1 methode HTML5
Newschool partie1 methode HTML5neuros
 
Effectuer des tests modernes pour drupal
Effectuer des tests modernes pour drupalEffectuer des tests modernes pour drupal
Effectuer des tests modernes pour drupalneuros
 
Integration Drupal systemes d'informations
Integration Drupal systemes d'informationsIntegration Drupal systemes d'informations
Integration Drupal systemes d'informationsneuros
 
La maitrise des contenus hors internet
La maitrise des contenus hors internetLa maitrise des contenus hors internet
La maitrise des contenus hors internetneuros
 
La mémoire et PHP
La mémoire et PHPLa mémoire et PHP
La mémoire et PHPneuros
 
Pourquoi Firefox OS
Pourquoi Firefox OSPourquoi Firefox OS
Pourquoi Firefox OSneuros
 
Un CRM...sugarCRM
Un CRM...sugarCRMUn CRM...sugarCRM
Un CRM...sugarCRMneuros
 
Neuros Digital
Neuros DigitalNeuros Digital
Neuros Digitalneuros
 

Plus de neuros (20)

Solution pour un Réseau Social d'Entreprise (RSE)
Solution pour un Réseau Social d'Entreprise (RSE)Solution pour un Réseau Social d'Entreprise (RSE)
Solution pour un Réseau Social d'Entreprise (RSE)
 
Proteger votre vie privee sur internet
Proteger votre vie privee sur internetProteger votre vie privee sur internet
Proteger votre vie privee sur internet
 
Le pouvoir d'être Visible ou Invisible sur Internet
Le pouvoir d'être Visible ou Invisible  sur InternetLe pouvoir d'être Visible ou Invisible  sur Internet
Le pouvoir d'être Visible ou Invisible sur Internet
 
Vos projets web sur les plateformes ouvertes
Vos projets web sur les plateformes ouvertesVos projets web sur les plateformes ouvertes
Vos projets web sur les plateformes ouvertes
 
Http2 les impacts dans le web
Http2 les impacts dans le webHttp2 les impacts dans le web
Http2 les impacts dans le web
 
Php 7 Think php7
Php 7 Think php7Php 7 Think php7
Php 7 Think php7
 
RGAA 3 dans un Web Accessible
RGAA 3 dans un Web AccessibleRGAA 3 dans un Web Accessible
RGAA 3 dans un Web Accessible
 
Les effets de la loi Hamon
Les effets de la loi HamonLes effets de la loi Hamon
Les effets de la loi Hamon
 
La sécurité et php
La sécurité et phpLa sécurité et php
La sécurité et php
 
Les protocoles temps réels
Les protocoles temps réelsLes protocoles temps réels
Les protocoles temps réels
 
Vectoriel et 3d en html5 - Animation newschool (partie 2)
Vectoriel et 3d en html5 - Animation newschool (partie 2)Vectoriel et 3d en html5 - Animation newschool (partie 2)
Vectoriel et 3d en html5 - Animation newschool (partie 2)
 
Améliorer les performances SQL
Améliorer les performances SQLAméliorer les performances SQL
Améliorer les performances SQL
 
Newschool partie1 methode HTML5
Newschool partie1 methode HTML5Newschool partie1 methode HTML5
Newschool partie1 methode HTML5
 
Effectuer des tests modernes pour drupal
Effectuer des tests modernes pour drupalEffectuer des tests modernes pour drupal
Effectuer des tests modernes pour drupal
 
Integration Drupal systemes d'informations
Integration Drupal systemes d'informationsIntegration Drupal systemes d'informations
Integration Drupal systemes d'informations
 
La maitrise des contenus hors internet
La maitrise des contenus hors internetLa maitrise des contenus hors internet
La maitrise des contenus hors internet
 
La mémoire et PHP
La mémoire et PHPLa mémoire et PHP
La mémoire et PHP
 
Pourquoi Firefox OS
Pourquoi Firefox OSPourquoi Firefox OS
Pourquoi Firefox OS
 
Un CRM...sugarCRM
Un CRM...sugarCRMUn CRM...sugarCRM
Un CRM...sugarCRM
 
Neuros Digital
Neuros DigitalNeuros Digital
Neuros Digital
 

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