le service workers
TRANSCRIPT
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
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 -
Oui mais… ● Wifi ● Mode avion
● Dans un lieu● 3G / 4G
Ascenseur
Métro
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 (2/2)
© Hubert Sablonnière
NAVIGATEUR
Réseau
Service Worker
Cache
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 -
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éponsesw.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ê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'})
nAcademy Le 21 octobre 2015 Neuros -
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));
}
});
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