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