✨[feature Request]: Enable PWA for the site (#704)

## Description
The website is now a Progressive Web Application where users can install
it as a desktop or mobile application and access it easily. Not only
that; it also provides offline access by pre-downloading assets
mentioned in `service-worker.js` for faster reloading.

## Related Issues

- Closes #656 

## Type of PR
- [X] (feature Request)

## Screenshots / videos (if applicable)

https://www.loom.com/share/635a2d108ff7426a9fb0eb06a61371cc?sid=c520bb83-74c0-4950-8749-5a80a04f3f37

## Checklist
- [X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X] I have updated my branch and synced it with project `main` branch
before making this PR
- [X] I have performed a self-review of my code
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.

## Additional context:
I have modified `index.html` with an inline comment to link
`manifest.json`. I have also added two other files named `manifest.json`
and `service-worker.js` for enabling PWA. I have also added a service
worker script in `index.html` at the bottom with an inline comment to
detect `service-worker.js` file in the root of the folder. I have also
resized favicons to 192x192 and 512x512 format for app icon in different
screen sizes.

index.html

@@ -44,6 +44,9 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="./style.css">
+        <!-- Link to manifest file for PWA -->
+        <link rel="manifest" href="/manifest.json">
+
     <style>
 
         .retro-heading {
@@ -1374,6 +1377,22 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
 
 <script>
     document.getElementById("copyright").textContent = new Date().getFullYear();
+</script>
+
+<!-- Script for Service Workers in PWA -->
+<script>
+    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);
+      });
+  });
+}
+</script>
 </script>  
 
 
@@ -1393,6 +1412,4 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
     <script src="./assets/css/visitors.css"></script>
 
       <script src="visi.js"></script>
-
-
 </html>

manifest.json

@@ -0,0 +1,22 @@
+{
+    "name": "Retro",
+    "short_name": "Retro",
+    "description": "An online platform providing items of vintage collections!",
+    "start_url": "/index.html",
+    "display": "standalone",
+    "background_color": "#F5EBE5",
+    "theme_color": "#000000",
+    "icons": [
+      {
+        "src": "/Favicon image/favicon-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/Favicon image/favicon-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+  }
+

service-worker.js

@@ -0,0 +1,42 @@
+const CACHE_NAME = 'my-pwa-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/style.css',
+  '/manifest.json',
+  '/Favicon image/favicon-192x192.png',
+  '/Favicon image/favicon-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);
+          }
+        })
+      );
+    })
+  );
+});