feat: implement PWA for desktop installation with college logo

Author: html-proof

public/icon-192.png

@@ -0,0 +1,41 @@
+{
+    "name": "College of Engineering Poonjar - E-Learning Platform",
+    "short_name": "CEP Notes",
+    "description": "Access study materials, notes, and resources for College of Engineering Poonjar students",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#2563eb",
+    "orientation": "portrait-primary",
+    "icons": [
+        {
+            "src": "/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any maskable"
+        },
+        {
+            "src": "/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any maskable"
+        }
+    ],
+    "categories": [
+        "education",
+        "productivity"
+    ],
+    "screenshots": [],
+    "shortcuts": [
+        {
+            "name": "Browse Notes",
+            "url": "/#browse",
+            "description": "Browse available study materials"
+        },
+        {
+            "name": "My Uploads",
+            "url": "/dashboard",
+            "description": "View your uploaded files"
+        }
+    ]
+}

public/icon-512.png

@@ -0,0 +1,51 @@
+// Service Worker for PWA
+const CACHE_NAME = 'cep-notes-v1';
+const urlsToCache = [
+    '/',
+    '/dashboard',
+    '/logo.png'
+];
+
+// Install event - cache essential files
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then((cache) => cache.addAll(urlsToCache))
+            .then(() => self.skipWaiting())
+    );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        }).then(() => self.clients.claim())
+    );
+});
+
+// Fetch event - network first, fallback to cache
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        fetch(event.request)
+            .then((response) => {
+                // Clone the response
+                const responseToCache = response.clone();
+
+                caches.open(CACHE_NAME).then((cache) => {
+                    cache.put(event.request, responseToCache);
+                });
+
+                return response;
+            })
+            .catch(() => {
+                return caches.match(event.request);
+            })
+    );
+});

public/manifest.json

@@ -12,19 +12,23 @@ export const metadata: Metadata = {
     icons: {
         icon: "/logo.png",
     },
+    manifest: "/manifest.json",
+    themeColor: "#2563eb",
+    appleWebApp: {
+        capable: true,
+        statusBarStyle: "default",
+        title: "CEP Notes",
+    },
     other: {
         "google-adsense-account": "ca-pub-6253589071371136",
     },
 };
 
-import DisableDevTools from "@/components/common/DisableDevTools";
 import { UndoProvider } from "@/context/UndoContext";
 import { ThemeProvider } from "@/context/ThemeContext";
-
-
 import { ToastProvider } from "@/context/ToastContext";
-
-// ...
+import InstallPrompt from "@/components/common/InstallPrompt";
+import Script from "next/script";
 
 export default function RootLayout({
     children,
@@ -59,6 +63,7 @@ export default function RootLayout({
                         <ToastProvider>
                             <Navbar />
                             <main style={{ padding: "2rem 0" }}>{children}</main>
+                            <InstallPrompt />
                             {/* 
                                 AdSense disabled due to incompatibility with Next.js SSR
                                 See: https://github.com/vercel/next.js/discussions/38256
@@ -67,6 +72,19 @@ export default function RootLayout({
                         </ToastProvider>
                     </UndoProvider>
                 </ThemeProvider>
+
+                {/* Register Service Worker */}
+                <Script id="register-sw" strategy="afterInteractive">
+                    {`
+                        if ('serviceWorker' in navigator) {
+                            window.addEventListener('load', () => {
+                                navigator.serviceWorker.register('/sw.js')
+                                    .then(reg => console.log('SW registered'))
+                                    .catch(err => console.log('SW registration failed'));
+                            });
+                        }
+                    `}
+                </Script>
             </body>
         </html>
     );

public/sw.js

@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Download, X } from "lucide-react";
+
+export default function InstallPrompt() {
+    const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
+    const [showInstall, setShowInstall] = useState(false);
+
+    useEffect(() => {
+        const handler = (e: Event) => {
+            e.preventDefault();
+            setDeferredPrompt(e);
+            setShowInstall(true);
+        };
+
+        window.addEventListener('beforeinstallprompt', handler);
+
+        // Check if already installed
+        if (window.matchMedia('(display-mode: standalone)').matches) {
+            setShowInstall(false);
+        }
+
+        return () => window.removeEventListener('beforeinstallprompt', handler);
+    }, []);
+
+    const handleInstall = async () => {
+        if (!deferredPrompt) return;
+
+        deferredPrompt.prompt();
+        const { outcome } = await deferredPrompt.userChoice;
+
+        if (outcome === 'accepted') {
+            setShowInstall(false);
+        }
+
+        setDeferredPrompt(null);
+    };
+
+    if (!showInstall) return null;
+
+    return (
+        <div style={{
+            position: 'fixed',
+            bottom: '20px',
+            right: '20px',
+            background: 'var(--primary)',
+            color: 'white',
+            padding: '1rem 1.5rem',
+            borderRadius: '12px',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem',
+            zIndex: 1000,
+            maxWidth: '350px',
+            animation: 'slideIn 0.3s ease'
+        }}>
+            <Download size={24} />
+            <div style={{ flex: 1 }}>
+                <p style={{ fontWeight: 600, marginBottom: '0.25rem' }}>Install CEP Notes</p>
+                <p style={{ fontSize: '0.875rem', opacity: 0.9 }}>Get quick access from your desktop</p>
+            </div>
+            <button
+                onClick={handleInstall}
+                style={{
+                    background: 'white',
+                    color: 'var(--primary)',
+                    border: 'none',
+                    padding: '0.5rem 1rem',
+                    borderRadius: '6px',
+                    fontWeight: 600,
+                    cursor: 'pointer'
+                }}
+            >
+                Install
+            </button>
+            <button
+                onClick={() => setShowInstall(false)}
+                style={{
+                    background: 'transparent',
+                    border: 'none',
+                    color: 'white',
+                    cursor: 'pointer',
+                    padding: '0.5rem'
+                }}
+            >
+                <X size={20} />
+            </button>
+
+            <style jsx>{`
+                @keyframes slideIn {
+                    from {
+                        transform: translateY(100px);
+                        opacity: 0;
+                    }
+                    to {
+                        transform: translateY(0);
+                        opacity: 1;
+                    }
+                }
+            `}</style>
+        </div>
+    );
+}