Ajout d'une PWA app

osm-fr · Feb 23, 2025 · fb5a9b5 · fb5a9b5
1 parent f5f55d4
commit fb5a9b5
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 1 deletion.
diff --git a/2025/gulpfile.mjs b/2025/gulpfile.mjs
@@ -61,6 +61,11 @@ function font() {
         .pipe(dest('dist/fonts'));
 }
 
+function manifest() {
+    return src('src/**/*.json')
+        .pipe(dest('dist/'));
+}
+
 // Static Server
 function serve() {
     series(clean, html, image, font, css, javascript, jsVendor);
@@ -82,6 +87,6 @@ function watchFiles() {
     watch('src/img/**/*.+(png|jpg|jpeg|svg)', series(image, browserSyncReload));
 }
 
-const _build = series(clean, html, image, font, css, javascript, jsVendor);
+const _build = series(clean, html, image, font, css, javascript, jsVendor, manifest);
 task('serve', parallel(_build, watchFiles, serve))
 task('build', _build)
diff --git a/2025/src/html/layouts/layout.html b/2025/src/html/layouts/layout.html
@@ -6,6 +6,7 @@
 
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="language" content="fr">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>{{ site_name }} - {{ page_name }}</title>
@@ -16,9 +17,18 @@
   <meta name="og:description" content="{{ SEO_description }}">
   <meta property="og:image" content="" />
 
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="msapplication-starturl" content="/index.html">
+  <meta name="application-name" content="SOTM-FR 2025">
+  <meta name="apple-mobile-web-app-title" content="SOTM-FR 2025">
+  <meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">
+
   <link rel="stylesheet" href="css/bootstrap.css" />
   <link rel="stylesheet" href="css/style.css" />
   <link rel="stylesheet" href="css/main.css" />
+  <link rel="manifest" href="/manifest.json">
 </head>
 
 <body class="page-top">

diff --git a/2025/src/js/main.js b/2025/src/js/main.js
@@ -25,4 +25,14 @@ $(function () {
     // Démarrer les tooltips pour les sponsors
     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
     [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/js/service-worker.js')
+          .then((registration) => {
+            console.log('Service Worker registered with scope:', registration.scope);
+          })
+          .catch((error) => {
+            console.error('Service Worker registration failed:', error);
+          });
+      }
 });
diff --git a/2025/src/js/service-worker.js b/2025/src/js/service-worker.js
@@ -0,0 +1,41 @@
+const CACHE_NAME = 'sotm-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/css/main.css',
+  '/js/main.js'
+];
+
+// Install event
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+// Fetch event
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    })
+  );
+});
+
+// Activate event
+self.addEventListener('activate', (event) => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (!cacheWhitelist.includes(cacheName)) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
diff --git a/2025/src/manifest.json b/2025/src/manifest.json
@@ -0,0 +1,19 @@
+{
+    "short_name": "SOTM-FR 2025",
+    "name": "SOTM-FR 2025",
+    "description":"Site web du State of The Map France 2025",
+    "lang": "fr",
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "fullscreen",
+    "Scope": "/",
+    "orientation": "portrait",
+    "serviceworker": "/",
+    "icons": [
+     {
+      "src": "/img/osm.svg",
+      "type": "image/svg",
+      "sizes": "256x256"
+     } ],
+    "start_url": "/index.html"
+}