add manifest.json, sw.js with pwa icons

nwaughachukwuma · Dec 3, 2024 · 08094c4 · 08094c4
1 parent 88b08d2
commit 08094c4
Show file tree

Hide file tree

Showing 13 changed files with 124 additions and 0 deletions.
diff --git a/app/src/app.html b/app/src/app.html
@@ -7,11 +7,22 @@
 <head>
 	<meta charset="utf-8" />
 	<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+	<link rel="manifest" href="/manifest.json" />
 	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no" />
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="theme-color" content="#000000" />
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+	<!-- Add PWA icon links -->
+	<link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png">
+	<link rel="apple-touch-icon" sizes="128x128" href="/icons/icon-128x128.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png">
+	<link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png">
+	<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png">
 
 	<title>Audiora</title>
 	<meta name="description" content="Listen to anything, anytime, leveraging AI" />
@@ -43,6 +54,14 @@
 
 <body class="h-full w-full overflow-hidden dark" data-sveltekit-preload-data="hover">
 	<div style="display: contents" class="w-full h-full">%sveltekit.body%</div>
+
+	<script>
+		if ('serviceWorker' in navigator) {
+			window.addEventListener('load', () => {
+				navigator.serviceWorker.register('/sw.js');
+			});
+		}
+	</script>
 </body>
 
 </html>
diff --git a/app/static/icons/icon-128x128.png b/app/static/icons/icon-128x128.png
diff --git a/app/static/icons/icon-144x144.png b/app/static/icons/icon-144x144.png
diff --git a/app/static/icons/icon-152x152.png b/app/static/icons/icon-152x152.png
diff --git a/app/static/icons/icon-192x192.png b/app/static/icons/icon-192x192.png
diff --git a/app/static/icons/icon-256x256.png b/app/static/icons/icon-256x256.png
diff --git a/app/static/icons/icon-384x384.png b/app/static/icons/icon-384x384.png
diff --git a/app/static/icons/icon-48x48.png b/app/static/icons/icon-48x48.png
diff --git a/app/static/icons/icon-512x512.png b/app/static/icons/icon-512x512.png
diff --git a/app/static/icons/icon-72x72.png b/app/static/icons/icon-72x72.png
diff --git a/app/static/icons/icon-96x96.png b/app/static/icons/icon-96x96.png
diff --git a/app/static/manifest.json b/app/static/manifest.json
@@ -0,0 +1,52 @@
+{
+  "name": "Audiora",
+  "short_name": "Audiora",
+  "description": "Listen to anything, anytime, leveraging AI",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/app/static/sw.js b/app/static/sw.js
@@ -0,0 +1,53 @@
+const CACHE_NAME = 'audiora-v1';
+const urlsToCache = [
+  '/',
+  '/manifest.json',
+  '/icons/icon-72x72.png',
+  '/icons/icon-96x96.png',
+  '/icons/icon-128x128.png',
+  '/icons/icon-144x144.png',
+  '/icons/icon-152x152.png',
+  '/icons/icon-192x192.png',
+  '/icons/icon-384x384.png',
+  '/icons/icon-512x512.png'
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(urlsToCache))
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      if (response) {
+        return response;
+      }
+      return fetch(event.request).then((response) => {
+        if (!response || response.status !== 200 || response.type !== 'basic') {
+          return response;
+        }
+        const responseToCache = response.clone();
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+        return response;
+      });
+    })
+  );
+});