Post on 22-Aug-2020
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);
}));
});