Merge pull request #782 from amiya-cyber/pwa

pwa feature
manikumarreddyu · Nov 4, 2024 · 1fa3f6c · 1fa3f6c
2 parents 4ed46bc + a89c7bf
commit 1fa3f6c
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 1 deletion.
diff --git a/frontend/index.html b/frontend/index.html
@@ -6,14 +6,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AgroTech AI</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Manifest file for PWA -->
+    <link rel="manifest" href="/manifest.json">
   </head>
   <body>
     <!-- React root div -->
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
 
     <div class="circle-container"></div>
-    <script>
+    <script >
       document.addEventListener("DOMContentLoaded", function () {
           const coords = { x: 0, y: 0 };
           const circlesCount = 26; 
@@ -59,7 +61,11 @@
 
           animateCircles();
       });
+
+
     </script>
+
+     <script src="script.js"></script> <!-- Link to your service worker registration script -->
 
   </body>
 </html>
diff --git a/frontend/manifest.json b/frontend/manifest.json
@@ -0,0 +1,21 @@
+{
+    "name": "AgroTechAI",
+    "short_name": "AgroTechAI",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#000000",
+    "icons": [
+      {
+        "src": "/src/assets/icon-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/src/assets/icon-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+  }
+
diff --git a/frontend/script.js b/frontend/script.js
@@ -0,0 +1,12 @@
+// Register the service worker
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/sw.js') // Pointing to the sw.js file
+            .then(registration => {
+                console.log('ServiceWorker registration successful:', registration);
+            })
+            .catch(error => {
+                console.error('ServiceWorker registration failed:', error);
+            });
+    });
+}
diff --git a/frontend/src/assets/icon-192x192.png b/frontend/src/assets/icon-192x192.png
diff --git a/frontend/src/assets/icon-512x512.png b/frontend/src/assets/icon-512x512.png
diff --git a/frontend/sw.js b/frontend/sw.js
@@ -0,0 +1,43 @@
+const CACHE_NAME = 'my-pwa-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/styles.css',
+  '/script.js',
+  '/manifest.json',
+  '/src/assets/icon-192x192.png',
+  '/src/assets/icon-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);
+          }
+        })
+      );
+    })
+  );
+});