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

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
● 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éponse
sw.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
{
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)

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ê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'})

Fetch () : Réponse
{
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

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Le service workers

Similaire à Le service workers (20)

Plus de Christophe Villeneuve

Plus de Christophe Villeneuve (20)

Le service workers