📱 Feature Request: PWA Enhancements (Install Button & Custom Offline UI)

[nitishchaubeyy]

📝 Description

I noticed that Weatherify already includes a manifest.json and a Service Worker (sw.js), making it a Progressive Web App (PWA). However, most users aren't aware they can install the app because there is no clear UI prompt. Additionally, when a user loses internet connection, the app gracefully degrades but could benefit from a dedicated, visually appealing "Offline Mode" rather than just a generic error text.

🎯 Expected Behavior

1. Install App Button: A polished "Install Weatherify" button should appear in the header/sidebar for supported browsers. Clicking it should trigger the native PWA install prompt.
2. Offline UI: If the device goes offline, a custom full-screen (or prominent) overlay should appear with a friendly message (e.g., "Oops! You're offline") and a "Retry" button, keeping the user immersed in the app's ecosystem.

🛠️ Proposed Implementation Plan

To implement and test this efficiently using a frontend-first approach:

1. Install Button Logic: I will add an event listener for the beforeinstallprompt event in script.js. The event will be intercepted, the default prompt prevented, and the custom UI button will be revealed.
2. Offline Mode Design: I will create an .offline-overlay container in index.html and style it in style.css to match the glassmorphic theme.
3. State Management: Listeners for window.addEventListener('offline') and ('online') will be added to toggle this overlay.
4. Mock Testing: No API keys or backend changes are needed! I will thoroughly test the logic by using Chrome DevTools (Application Tab for PWA install, and Network Tab -> Offline for the offline UI).

🙋‍♂️ Assign To Me

I have already outlined the necessary DOM elements and event listeners for this feature. I would love to build this out for NSoC! Please assign it to me.