feat: PWA support for the website

Signetd-off-by: Farhaan Bukhsh <[email protected]>

Author: farhaanbukhsh

src/_includes/footer.njk

@@ -53,3 +53,11 @@
         <img src="{{ env.baseUrl }}img/logo.png" alt="PYCON 2025" class="w-[150px] sm:w-[350px] lg:w-[500px] pb-64 lg:pb-16 xl:pb-16 md:mr-30 xl:mr-50 transition-transform duration-100" style="animation: floating-logo 2s ease-in-out infinite;"/>
     </div>
 </footer>
+
+<script>
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('{{ env.baseUrl }}js/service-worker.js')
+    .then(() => console.log('SW registered'))
+    .catch(console.error);
+}
+</script>

src/_includes/head.njk

@@ -5,6 +5,8 @@
 <link rel="icon" type="image/x-icon" href="{{ env.baseUrl }}img/logo.png">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Hanken+Grotesk&display=swap" rel="stylesheet">
+<link rel="manifest" href="{{ env.baseUrl }}manifest.webmanifest">
+<meta name="theme-color" content="#4E62F5">
 <!-- PRELOAD CDN SCRIPTS -->
 <link rel="preconnect" href="https://unpkg.com/popper.js@1" as="script">
 <link rel="preconnect" href="https://unpkg.com/tippy.js@4" as="script">

src/static/img/icons/icon-144-maskable.png

@@ -0,0 +1,26 @@
+
+const CACHE_NAME = 'inpycon2025-cache-v1';
+const assetsToCache = [
+  '/',
+  '/index.html',
+  // include other HTML pages, CSS, JS, icons
+  '/img/icon/icon_192.png',
+  '/img/icon/icon_512.png'
+];
+
+self.addEventListener('install', ev => {
+  ev.waitUntil(
+    caches.open(CACHE_NAME).then(cache => cache.addAll(assetsToCache))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', ev => {
+  ev.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', ev => {
+  ev.respondWith(
+    caches.match(ev.request).then(resp => resp || fetch(ev.request))
+  );
+});

src/static/img/icons/icon-144.png

@@ -0,0 +1,42 @@
+
+{
+  "name": "PyCon India 2025",
+  "short_name": "PyConIndia",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#4E62F5",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/img/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/img/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/img/icons/icon-144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/img/icons/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/img/icons/icon-144-maskable.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}