Merge pull request #1749 from Subhajit-2023-44/2

Add PWA (Progressive Web App) done !

index.html

@@ -9,6 +9,8 @@
     <!--favicon-->
     <link rel="shortcut icon" type="image/x-icon" href="/images/favi.webp" />
 
+    <link rel="manifest" href="/manifest.json">
+
     <!--font awesome-->
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></noscript>
@@ -394,8 +396,10 @@ <h2>WordWise</h2>
                 <div class="dropdown">
                     <!-- Profile Icon -->
 
-                    <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
-                        <i class="fas fa-user-circle"></i>
+
+                    <a href="javascript:void(0);" class="profile-link" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+                        <img id="dropdownProfileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
+
                     </a>
 
 
@@ -436,10 +440,12 @@ <h2>WordWise</h2>
                         }
                     });
                 </script>
-
+
+
 
 
-
+
+
                 <!-- Login Form -->
                 <div class="form-popup" id="loginForm">
                     <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
@@ -1785,6 +1791,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
         });
       </script>
 
+<script src="scripts.js"></script> <!-- Link to your service worker registration script -->
 
 </body>
 

manifest.json

@@ -0,0 +1,22 @@
+{
+    "name": "WordWise",
+    "short_name": "WordWise",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#000000",
+    "icons": [
+      {
+        "src": "/icon-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/icon-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+
+  }
+

scripts.js

@@ -0,0 +1,14 @@
+// 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);
+            });
+    });
+
+
+}

sw.js

@@ -0,0 +1,46 @@
+const CACHE_NAME = 'my-pwa-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/styles.css',
+  '/scripts.js',
+  '/manifest.json',
+  '/icon-192x192.png',
+  '/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);
+          }
+        })
+      );
+    })
+  );
+});