Makes it PWA compatible

3 years ago · 89fa36f1f2
29 changed files with 90 additions and 8 deletions
--- a/static/img/icon/android-icon-144x144.png
+++ b/static/img/icon/android-icon-144x144.png
--- a/static/img/icon/android-icon-192x192.png
+++ b/static/img/icon/android-icon-192x192.png
--- a/static/img/icon/android-icon-36x36.png
+++ b/static/img/icon/android-icon-36x36.png
--- a/static/img/icon/android-icon-48x48.png
+++ b/static/img/icon/android-icon-48x48.png
--- a/static/img/icon/android-icon-72x72.png
+++ b/static/img/icon/android-icon-72x72.png
--- a/static/img/icon/android-icon-96x96.png
+++ b/static/img/icon/android-icon-96x96.png
--- a/static/img/icon/apple-icon-114x114.png
+++ b/static/img/icon/apple-icon-114x114.png
--- a/static/img/icon/apple-icon-120x120.png
+++ b/static/img/icon/apple-icon-120x120.png
--- a/static/img/icon/apple-icon-144x144.png
+++ b/static/img/icon/apple-icon-144x144.png
--- a/static/img/icon/apple-icon-152x152.png
+++ b/static/img/icon/apple-icon-152x152.png
--- a/static/img/icon/apple-icon-180x180.png
+++ b/static/img/icon/apple-icon-180x180.png
--- a/static/img/icon/apple-icon-57x57.png
+++ b/static/img/icon/apple-icon-57x57.png
--- a/static/img/icon/apple-icon-60x60.png
+++ b/static/img/icon/apple-icon-60x60.png
--- a/static/img/icon/apple-icon-72x72.png
+++ b/static/img/icon/apple-icon-72x72.png
--- a/static/img/icon/apple-icon-76x76.png
+++ b/static/img/icon/apple-icon-76x76.png
--- a/static/img/icon/apple-icon-precomposed.png
+++ b/static/img/icon/apple-icon-precomposed.png
--- a/static/img/icon/apple-icon.png
+++ b/static/img/icon/apple-icon.png
--- a/static/img/icon/favicon-16x16.png
+++ b/static/img/icon/favicon-16x16.png
--- a/static/img/icon/favicon-32x32.png
+++ b/static/img/icon/favicon-32x32.png
--- a/static/img/icon/favicon-96x96.png
+++ b/static/img/icon/favicon-96x96.png
--- a/static/img/icon/favicon.ico
+++ b/static/img/icon/favicon.ico
--- a/static/img/icon/ms-icon-144x144.png
+++ b/static/img/icon/ms-icon-144x144.png
--- a/static/img/icon/ms-icon-150x150.png
+++ b/static/img/icon/ms-icon-150x150.png
--- a/static/img/icon/ms-icon-310x310.png
+++ b/static/img/icon/ms-icon-310x310.png
--- a/static/img/icon/ms-icon-70x70.png
+++ b/static/img/icon/ms-icon-70x70.png
--- a/static/index.html
+++ b/static/index.html
@ -5,15 +5,31 @@
        <meta charset="utf-8"/>

        <title>OSS 110'Metz</title>
-         
+
        <meta name="description" content="Le site web du BDE Metz pour 2025, fait avec beaucoup d'amour" />
        <meta name="author" content="VP geeks aka le REZO (cf rezo-rm.fr pour plus de détail)" />
        <meta name="keyword" content="caca" />

-        <link rel="icon" href="img/favicon.ico">
-
        <link rel="stylesheet" href="css/main.css" />
-    </head> 
+
+        <link rel="apple-touch-icon" sizes="57x57" href="img/icon/apple-icon-57x57.png">
+        <link rel="apple-touch-icon" sizes="60x60" href="img/icon/apple-icon-60x60.png">
+        <link rel="apple-touch-icon" sizes="72x72" href="img/icon/apple-icon-72x72.png">
+        <link rel="apple-touch-icon" sizes="76x76" href="img/icon/apple-icon-76x76.png">
+        <link rel="apple-touch-icon" sizes="114x114" href="img/icon/apple-icon-114x114.png">
+        <link rel="apple-touch-icon" sizes="120x120" href="img/icon/apple-icon-120x120.png">
+        <link rel="apple-touch-icon" sizes="144x144" href="img/icon/apple-icon-144x144.png">
+        <link rel="apple-touch-icon" sizes="152x152" href="img/icon/apple-icon-152x152.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="img/icon/apple-icon-180x180.png">
+        <link rel="icon" type="image/png" sizes="192x192"  href="img/icon/android-icon-192x192.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="img/icon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="96x96" href="img/icon/favicon-96x96.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="img/icon/favicon-16x16.png">
+        <link rel="manifest" href="/manifest.json">
+        <meta name="msapplication-TileColor" content="#ffffff">
+        <meta name="msapplication-TileImage" content="/img/iconms-icon-144x144.png">
+        <meta name="theme-color" content="#ffffff">
+    </head>
    <body>
        <div class="bg-full"></div>
        <div class="container">
@ -43,7 +59,7 @@
                        </div>
                        <p id="prank-desc">
                            OSS 110'Metz est une organisation rempli d'espions qualifiés pour remplir presque toutes vos demandes !
-                            Cliquez sur le bouton ci-dessus puis suivez les instructions. Attention, un compte <a href="https://re2o.rezo-rm.fr/users/new_user">Rezo</a> 
+                            Cliquez sur le bouton ci-dessus puis suivez les instructions. Attention, un compte <a href="https://re2o.rezo-rm.fr/users/new_user">Rezo</a>
                            est nécessaire afin de garantir l'identité des demandeurs !
                        </p>
                    </div>
@ -71,10 +87,10 @@
                </footer>
            </div>
        </div>
-        
+
        <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
        <script src="js/main.js" defer></script>
        <script src="js/anim.js" defer></script>
    </body>
-</html>
+</html>
--- a/static/js/main.js
+++ b/static/js/main.js
@ -1,5 +1,10 @@
 $(window).on("load", function() {

+    /* Register the Service Worker */
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('./js/sw.js');
+    }
+
    /* load timer */
    window.setInterval(function() {
        var time = $("#timer").text();
@ -24,4 +29,4 @@ $(window).on("load", function() {
            second: '2-digit'
        }));
    }, 1000);
-});
+});
--- a/static/manifest.json
+++ b/static/manifest.json
@ -0,0 +1,40 @@
+{
+    "name": "OSS110METZ",
+    "short_name": "O1M",
+    "icons": [{
+        "src": "img/icon/android-icon-36x36.png",
+        "sizes": "36x36",
+        "type": "image\/png",
+        "density": "0.75"
+    }, {
+        "src": "img/icon/android-icon-48x48.png",
+        "sizes": "48x48",
+        "type": "image\/png",
+        "density": "1.0"
+    }, {
+        "src": "img/icon/android-icon-72x72.png",
+        "sizes": "72x72",
+        "type": "image\/png",
+        "density": "1.5"
+    }, {
+        "src": "img/icon/android-icon-96x96.png",
+        "sizes": "96x96",
+        "type": "image\/png",
+        "density": "2.0"
+    }, {
+        "src": "img/icon/android-icon-144x144.png",
+        "sizes": "144x144",
+        "type": "image\/png",
+        "density": "3.0"
+    }, {
+        "src": "img/icon/android-icon-192x192.png",
+        "sizes": "192x192",
+        "type": "image\/png",
+        "density": "4.0"
+    }],
+    "lang": "fr-FR",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "black",
+    "theme_color": "black"
+}
--- a/static/sw.js
+++ b/static/sw.js
@ -0,0 +1,21 @@
+var cacheName = 'o1m';
+var filesToCache = [
+  '/',
+  '/index.html'
+];
+
+self.addEventListener('install', function(e) {
+  e.waitUntil(
+    caches.open(cacheName).then(function(cache) {
+      return cache.addAll(filesToCache);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(e) {
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});