Service Worker en PratiqueRéalisé par : Mohamed Seifeddine Azzabi

Classe : LFSI2

Matière : Programmation Mobile

Plan

1. Rappel PWA2. Présentation Service Worker3. Cycle de vie d’un Service Worker4. Développement d’un Service Worker

2Mohamed Seifeddine Azzabi

3

Rappel PWA

Mohamed Seifeddine Azzabi

Rappel PWA

4

PWA, Progressive Web Application ou Application Web Progressive est un site web avec une expérience utilisateur (UX) plus avancée: Installable (disponible via le menu des applications –Mobile- ou sur bureau –Desktop-) Offline (peut être utilisé en absence de connexion) Sécurisé (Grace à la technologie HTTPS) Progressive (Le site web fonctionne même sur un ancien navigateur ou téléphone et offre plus d’options sur un

navigateur ou smartphone moderne) Découvrable (Grâce aux moteurs de recherche et son URL) Réengagement (Grâce aux push notifications) Cross-platform –sans outils tierce- (HTML5 est reconnu par Android, iOS et Microsoft. Mobile et Desktop)

Mohamed Seifeddine Azzabi

Rappel PWA- En pratique?

4

PWA= Site Web + Service Worker + Manifest

Mohamed Seifeddine Azzabi

6

Service Worker

Mohamed Seifeddine Azzabi

Service Worker – présentation

7

• Service qui se lance en arrière plan (toujours en marche)• Joue le rôle d’un proxy entre le navigateur et un site web bien définit• Gère le Cache Storage• Permet l’implémentation des Push-Notifications

Mohamed Seifeddine Azzabi

Service Worker - En pratique?

8Mohamed Seifeddine Azzabi

Service Worker

?Fichier JavaScript Spéciale qui fonctionne avec le principed’évènement et qui gère toute un cycle de vie.

9

Cycle de Vie d’unService Worker

Mohamed Seifeddine Azzabi

Cycle de vie d’un Service Worker

10

• Le cycle de vie d’un Service Worker est constitué principalement de 3 phases :

Mohamed Seifeddine Azzabi

Registration Install Fetch

Cycle de vie d’un Service Worker

11

1-Registration

Mohamed Seifeddine Azzabi

• Lors de la première visite d’un utilisateur à un site web (exemple: http://lfsi.tn), il n’y a pas encore un service worker, voilà ce qui se passe:• Le navigateur charge la 1ère page ou index.html :

▪ Le navigateur commence à interpréter le code HTML et compiler le code JavaScript▪ Si (Code JavaScript == Code Registration du Service Worker) Alors

▪ Charger le fichier du service worker (exemple: sw.js)▪ Enregistrer ce fichier comme proxy du site http://lfsi.tn

▪ FinSi• Le navigateur charge le site web une 2ème ou Nème fois :

▪ Le navigateur indique que le Service Worker est déjà Enregistrer (Registrationalready Done)

Cycle de vie d’un Service Worker

12

2-Install

Mohamed Seifeddine Azzabi

• Juste après l’étape Registration du Service Worker, le navigateur parcours le script sw.js et cherche les instructions à faire pour l’installation (Install).

• Durant l’étape d’installation le Service Worker charge l’ensemble des ressources à sauvegarder dans le Cache Storage du navigateur, afin, de pourvoir faire fonctionner le site web en mode offline.▪ Si (Etat du ServiceWorker == Already Registred) Alors

▪ Si (Etat du ServiceWorker != Installed) Alors▪ Chercher dans le fichier sw.js le code d’installation▪ Exécuter le code d’installation▪ Changer Etat du ServiceWorker à Installed

▪ FinSi▪ FinSi

Cycle de vie d’un Service Worker

13

3-Fetch

Mohamed Seifeddine Azzabi

▪ Si (Etat du ServiceWorker == Registred && Installed) Alors▪ Chercher dans le fichier sw.js le code de la partie Fetch▪ Exécuter le code du Fetch

▪ FinSi• Cette opération se déclenche à chaque fois que l’utilisateur visite un site web.• Le ServiceWorker intercepte la requête avant de passer par le réseau• Cherche si la ressource web demandé existe dans le cache • Si c’est le cas alors récupérer la ressource depuis le Cache Storage• Si ce n’est pas la cas alors faire circuler la requête au réseau

14

Développement d’un Service Worker

Mohamed Seifeddine Azzabi

Développement d’un ServiceWorker (1/2)

15Mohamed Seifeddine Azzabi

Etape Emplacement du code Code de l’étape

RegisterDans le code JavaScript de l’application (Première entrée du programme)

navigator.serviceWorker.register('/sw.js')

Install

Dans le fichier sw.js self.addEventListener('install', function (e) {e.waitUntil(

caches.open(cacheName).then(function (cache) {return cache.addAll(filesToCache);

}));

});

Développement d’un ServiceWorker (2/2)

16Mohamed Seifeddine Azzabi

Etape Emplacement du code Code de l’étape

Fetch Dans le fichier sw.js

self.addEventListener('fetch', function (e) {console.log('[ServiceWorker] Fetch', e.request.url);e.respondWith(

caches.match(e.request).then(function (response) {return response || fetch(e.request);

}));

});