Bonjour à tous,

Je travail bénévolement pour une association afin de mettre en place un site internet pour diffuser notre annuaire téléphonique. Nous souhaitons que cette web application sont accessible hors ligne. Dans un 1er temps nous avons utilisé la mise en cache via l'AppCache. Mais nous souhaitons passer sur les services workers.

Je suis développeur, mais en C++ pour la "vie courante". Je me suis mis au HTML/CCS/Java pour ce projet, j'ai donc pas mal regardé les tutos et exemples nombreux sur internet:


Après analyse, je pense qu'il faut utiliser le shéma Cache then network. Notre annuaire (fichier XML) est mis à jour toutes les nuits.

Résultat après plusieurs jours de travail: ça ne marche pas! Je pense que j'ai un problème dans l'ordonnancement du code et appels.

Voici à quoi ressemble mes fichiers

index.html (synthèse)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<html manifest="cache_Appli_SSF.manifest">
<head>
 
<!-- __________________________COMMON CONFIGURATION__________________________ -->
	 <!-- Configure IOS webapp -->
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	...
 
	<!-- Configure Android webapp -->
    <meta name="mobile-web-app-capable" content="yes">
    ...
 
	<!-- General Config -->
	<title>...............</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="msapplication-tap-highlight" content="no">  <!-- pas de surlignage des liens -->
	<meta charset="utf-8">
 
	<!-- Set Icons -->
	<link rel="icon" sizes="192x192" type="image/png"  href="icons_192.png">
	<link rel="shortcut icon" href="ssf_icons_192.png">
 
	<script src="common.js"></script>
	<script src="cache.js"></script>
 
<!-- __________________________COMMON CONFIGURATION__________________________ -->
 
    <link rel="stylesheet" href="styles_main_page.css">
	<script src="classes/jquery_3.3.1.js"></script>
	<script> setUserLang(); </script>
 
	<!-- __________________________SERVICE WORKER__________________________ -->
	<script>
	if (navigator.serviceWorker.controller) {
		console.log('DEBUG: serviceWorker.controller est équivalent à true');
	} else {
		console.log('DEBUG: serviceWorker.controller est équivalent à false'); // On enregistre le ServiceWorker
		navigator.serviceWorker.register('service-worker.js', { scope: './'}).then(function(reg) {
			console.log(reg.scope, 'register');
		});
	}
	</script>
</head>
 
<body id="body"> <!-- body will be the .nav-button target -->
	<div class="wrapper">  <!-- CSS source code https://codepen.io/raphaelgoetter/pen/JGOgJj?editors=110 -->
		<a href="#body" class="nav-button-open" aria-label="open navigation"></a>
		<a href="#" class="nav-button-close" aria-label="close navigation"></a>
		<div class = "bobyEle">
			<ul>
				<li class="logo_other"> <img src="images/logo.png" alt="texte ..."/></li>
				...
			</ul>
		</div>
	</div> 
</body>
 </html>

service_worker.js (inspiré voir pompé ici)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
/*********************************************************************************/
/**                                                     FILES TO CACHE                                                                          **/
/*********************************************************************************/
// var CACHE_NAME  is declared in sw_cachename.js
 
// Liste des fichiers nécessaires pour que l'application fonctionne hors connexion
 var REQUIRED_FILES = [
  //# External Lib 
	'/classes/emy/emy.css',
	'/classes/jquery_3.3.1.js',
	'/images/dial.png',
	'/images/dial_green.png',
	'/images/backgroung_ordi.jpg',
	'/images/backgroung_Smart.jpg',
	'/styles_main_page.css',
	'/cache.js',
	'/common.js',
	'/geolocalisation.js',
	'/procedure_alerte.js',
	'/sw_cachename.js',
	'/service_worker.js',
	'/declenchement_secours.html',
	'/geolocalisation.html',
	'/index.html',
	'/procedure_alerte.html',
	'/icons_192.png',
	'/annuaire.xml',
	'/lang.xml',
	'/']; // URL distincte de index.html !
 
 
 
/*********************************************************************************/
/**                                                                     SV CODE                                                                         **/
/*********************************************************************************/
self.addEventListener('install', function(event) {
  // Étape d'installation : chargement de chaque fichier listé dans le cache
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        // Ajoute toutes les dépendances hors connexion au cache
        return cache.addAll(REQUIRED_FILES);
      })
      .then(function() {
        //A partir d'ici tout est dans le cache
        return self.skipWaiting();
      })
  );
});
 
/*********************************************************************************/
// L’événement fetch du service worker est déclenché à chaque requête de la page.
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Trouvé dans le cache - renvoie la réponse depuis le cache
        if (response) {
          return response;
        }
 
        // Absent du cache - renvoie la réponse depuis le serveur 'fetch' est surtout une solution de repli
        return fetch(event.request);
      }
    )
  );
});
 
/*********************************************************************************/  
self.addEventListener('activate', function(event) {
  event.waitUntil(self.clients.claim());
});
 
/*********************************************************************************/
// Surveillance d'un claim sur le service worker
if ('serviceWorker' in navigator) {
	navigator.serviceWorker.addEventListener('controllerchange', function(event) {
	  navigator.serviceWorker.controller.addEventListener('statechange', function() {
		if (this.state === 'activated') {
		  // Affichage de la notification => " vous pouvez utiliser l'application hors connexion"
		   console.log('vous pouvez utiliser l application hors connexion');
		}
	  });
	});
}
sw_cachename.js.js (fichier généré, tout les soirs, par un script après la mise jour de l'annuaire)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
var CACHE_NAME;
CACHE_NAME='annuaire_26_03_2018_23_59';
Merci pour votre aide.