-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
175 lines (152 loc) · 7.39 KB
/
index.html
File metadata and controls
175 lines (152 loc) · 7.39 KB
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Carte des antennes mobiles ANFR – Mises à jour hebdomadaires</title>
<!-- Description générale -->
<meta name="description" content="Visualisez les modifications hebdomadaires, mensuelles et trimestrielles des antennes mobiles (2G à 5G) en France sur une carte interactive, à partir des données ouvertes de l’ANFR.">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Carte des antennes mobiles ANFR – Mises à jour hebdomadaires">
<meta property="og:description" content="Visualisez les modifications hebdomadaires, mensuelles et trimestrielles des antennes mobiles (2G à 5G) en France sur une carte interactive, à partir des données ouvertes de l’ANFR.">
<meta property="og:url" content="https://fraetech.github.io/">
<meta property="og:site_name" content="Carte des antennes mobiles ANFR">
<meta property="og:image" content="https://fraetech.github.io/og-logo.png">
<meta property="og:image:alt" content="Logo MAJ-Hebdo ANFR">
<meta property="og:locale" content="fr_FR">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Carte des antennes mobiles ANFR – Mises à jour hebdomadaires">
<meta name="twitter:description" content="Visualisez les modifications hebdomadaires, mensuelles et trimestrielles des antennes mobiles (2G à 5G) en France sur une carte interactive, à partir des données ouvertes de l’ANFR.">
<meta name="twitter:image" content="https://fraetech.github.io/og-logo.png">
<meta name="twitter:image:alt" content="Logo MAJ-Hebdo ANFR">
<!-- Préconnect & DNS -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://unpkg.com" crossorigin>
<link rel="preconnect" href="https://a.tile.openstreetmap.org" crossorigin>
<link rel="preconnect" href="https://b.tile.openstreetmap.org" crossorigin>
<link rel="preconnect" href="https://c.tile.openstreetmap.org" crossorigin>
<link rel="dns-prefetch" href="https://nominatim.openstreetmap.org">
<!-- Google Font non-blocking -->
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" as="style" onload="this.rel='stylesheet'">
<noscript>
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</noscript>
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1976d2">
<!-- Styles principaux (externalisés pour cache) -->
<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="https://unpkg.com/leaflet/dist/leaflet.css" as="style">
<link rel="stylesheet" href="css/styles.css">
<!-- Favicon et icônes diverses tailles -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Meta pour robots/cache -->
<meta name="robots" content="index,follow">
<!-- Couleurs adaptatives -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#7ed0ec">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#2c3e50">
</head>
<body>
<div id="message" aria-live="polite">
<button id="closeButton" aria-label="Fermer">×</button>
<h4><strong id="message-status">Chargement… (peut prendre du temps sur les grosses MAJs)</strong></h4>
<p>
Vous pouvez filtrer les supports à afficher à l'aide du bouton "Filtres" (en haut à droite).<br>
Questions, remarques et suggestions :<br>
<a href="https://github.com/fraetech/fraetech.github.io" target="_blank" rel="noopener">GitHub</a><br>
L'historique (sur un an) des mises à jour : <br><a href="historique" target="_self">Historique des mises à jour</a><br>
<script src="/js/version.js"></script>
<b>Source :</b> <a href="https://data.anfr.fr/visualisation/information/?id=observatoire_2g_3g_4g" target="_blank" rel="noopener">OpenData ANFR</a> | <small id="app-version"></small> | <a href="mentions-legales" target="_self">Mentions légales</a>
<script>
document.getElementById("app-version").textContent = "v" + self.APP_VERSION;
</script>
</p>
</div>
<div id="map" role="region" aria-label="Carte des modifications ANFR"></div>
<!-- Application JS: module, lazy-load des dépendances et logique -->
<script type="module" src="js/app.js" defer></script>
<!-- Enregistrement du service worker PWA avec gestion des mises à jour -->
<script>
// Fonction pour afficher une notification de mise à jour et rafraîchir
window.showUpdateNotification = function() {
const notification = document.createElement('div');
notification.className = 'notification notification-success';
notification.textContent = 'Une nouvelle version est disponible, actualisation en cours...';
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #4CAF50;
color: white;
padding: 12px 20px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 10000;
font-family: inherit;
animation: slideIn 0.3s ease;
`;
document.body.appendChild(notification);
// Rafraîchit la page après 2 secondes (le SW aura le temps de s'activer)
setTimeout(() => {
window.location.reload(true);
}, 2000);
};
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
let updateAvailableResolve = null;
const updateAvailablePromise = new Promise(resolve => {
updateAvailableResolve = resolve;
});
window.updateAvailable = updateAvailablePromise;
navigator.serviceWorker.register('/service-worker.js', {scope: '/'}).then(function(registration) {
console.log('SW registered successfully');
// Écoute les mises à jour
registration.addEventListener('updatefound', () => {
const newWorker = registration.installing;
console.log('SW update found, installing new version...');
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
// Une nouvelle version est prête
console.log('SW update ready to activate');
// Envoie un message au SW pour qu'il passe en Network-First
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage({
type: 'UPDATE_DETECTED'
});
}
updateAvailableResolve({
registration: registration,
isUpdateAvailable: true
});
// Affiche une notification à l'utilisateur
if (window.showUpdateNotification) {
window.showUpdateNotification();
}
}
});
});
}, function(err) {
console.error('SW registration failed:', err);
});
// Écoute les changements de contrôleur SW
navigator.serviceWorker.addEventListener('controllerchange', () => {
console.log('SW controller changed - new version activated');
// Recharge la page pour utiliser la nouvelle version
window.location.reload(true);
});
});
}
</script>
<!-- Small inline script to show map container asap (no heavy JS) -->
<script>
// Minimal style hint before CSS loads: ensures map has height quickly
document.documentElement.style.background = '#fff';
</script>
</body>
</html>