le service workers

nAcademy Le 21 octobre 2015 Neuros -

Le Service Workers

Christophe Villeneuve


Aujourd'hui...● API !!!● La réalité● Vous avez dit comment...● Utilisation


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


Promesses● Du vrai hors-ligne pour nous (développeurs)● Meilleures performances pour nos utilisateurs

La réalité


Je dis… J'ai consulté

dans le métro

sur du papier


Aujourd'hui, je dis… J'ai consulté

dans le métro

Horaire projection

sur tablettes, smartphones


Protocole HTTP

Page Web

Réseau / Serveur


Oui mais… ● Wifi ● Mode avion

● Dans un lieu● 3G / 4G

Ascenseur

Métro


Résultat


Autres problèmes possibles

Vous avez dit comment

Le service workers


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


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é


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


Fonctionnement (1/2)

© Hubert Sablonnière

NAVIGATEUR

Réseau


Fonctionnement (2/2)

© Hubert Sablonnière

NAVIGATEUR

Réseau

Service Worker

Cache

Firekey.org


Firekey.org● Générateur Token (= Google Authenticator)● https://github.com/fwenzel/firekey


Utilisation Service Workers


https://● Prévoir

https://sousdomaine.domaine:port

● Obligatoire

navigator.serviceWorker.controller.scriptURL


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


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


Réponsesw.js

self.addEventListener('fetch', function (event)

{

console.log ('request', event.request.url);

event.respondWith (new response ('Welcome hello world!'));

});


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)


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)

http://fetch.spec.whatwg.org/

http://fetch.spec.whatwg.org/


Avec du cache

CACHE MANIFEST

index.htm

css/styles.css

img/logo.png

offline.appcache

<html manifest="offline.appcache">

<head></head>

...

Index.html


XmlHttpRequest (XHR) (1/2)● Obtenir des données au format

– XML / jSON / HTML / requête HTTP

● Nécessite Javascript● Support Ajax


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();


Fetch () : API requêtevar 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'})


Fetch () : Réponseself.addEventListener('fetch', function (event)

{

if (event.request.url.match('/apineuros')

{

event.respondWith(fetch(event.request));

}

else

{

event.respondWidth (caches.match(event.request));

}

});


Les Navigateurs compatibles

© https://jakearchibald.github.io/isserviceworkerready/index.html

Débug

Promesses

Implémentation


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

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API


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

le service workers

Internet