PWA enabled

swaraj-das · Oct 19, 2024 · 9ed625f · 9ed625f
1 parent c4a891b
commit 9ed625f
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 1 deletion.
diff --git a/images/logo-192x192.png b/images/logo-192x192.png
diff --git a/images/logo-512x512.png b/images/logo-512x512.png
diff --git a/index.html b/index.html
@@ -26,6 +26,9 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
     <link rel="stylesheet" href="./popup/popup.css" />
 
+    <!-- Manifest file for PWA -->
+    <link rel="manifest" href="/manifest.json">
+
 </head>
 
 <body>

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,21 @@
+{
+    "name": "Collect your GamingTools",
+    "short_name": "Collect your GamingTools",
+    "description": "A responsive and dynamic website to showcase the best gaming accessories for every gamer!",
+    "start_url": "/index.html",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#000000",
+    "icons": [
+      {
+        "src": "/images/logo-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/images/logo-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+  }
diff --git a/script.js b/script.js
@@ -204,4 +204,17 @@ function testimonialJs() {
 
 });
 }
-testimonialJs();
+testimonialJs();
+
+// Service Worker code for PWA
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/service-worker.js')
+      .then((registration) => {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+      })
+      .catch((error) => {
+        console.log('ServiceWorker registration failed: ', error);
+      });
+  });
+}
diff --git a/service-worker.js b/service-worker.js
@@ -0,0 +1,43 @@
+const CACHE_NAME = 'my-pwa-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/styles.css',
+  '/script.js',
+  '/manifest.json',
+  '/images/logo-192x192.png',
+  '/images/logo-512x512.png'
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request)
+      .then((response) => {
+        return response || fetch(event.request);
+      })
+  );
+});
+
+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);
+          }
+        })
+      );
+    })
+  );
+});