feat: Implement Progressive Web App (PWA) & Offline-First Resilience

[kashviporwal-byte]

Description of Changes

This pull request transitions ChaatBazaar from a network-dependent traditional web application into an installable, high-performance, Offline-First Progressive Web App (PWA).

It provides users on slow, unstable, or completely disconnected networks with reliable offline browsing, persistent shopping carts, queue-based checkouts, and automatic background synchronization.

1. Progressive Web App (PWA) Support

• manifest.json [NEW]: Standard W3C-compliant web application manifest allowing native desktop and mobile installation with custom splash screens, background styling (#fff8e1), standalone window capabilities, and terracotta theme branding (#bf360c).
• PWA Branding Icons [NEW]: Generated and integrated custom premium high-resolution circular app icons: img/icon-192.png and img/icon-512.png.
• Head Meta Elements [MODIFY]: Injected required manifest references, theme colors, and Apple mobile web capability meta-tags across all key pages:
  • index.html
  • menu.html
  • cart.html
  • orders.html

2. Service Worker & Pre-caching Cache Engine

• sw.js [NEW]: A comprehensive client-side intercept proxy worker implementing:
  • Core Pre-caching: Instantly stores all static pages (index.html, menu.html, cart.html, orders.html, offline.html), CSS styles, local database menu arrays (data/menu.json), local images, and external CDN stylesheets (Google Poppins Fonts and FontAwesome icons).
  • Dynamic Caching Strategies:
    • Network-First (Fallback to Cache): Applied to HTML pages and dynamic menu endpoints to ensure online users see live changes while guaranteeing offline users get full access.
    • Cache-First (Fallback to Default): Applied to images and assets to drastically speed up load times and save cellular bandwidth.
    • Stale-While-Revalidate: Applied to core scripts for instant launch performance.
• offline.html [NEW]: A visually stunning offline fallback page displaying warm illustrations, navigation links back to cached pages, and connection diagnostic buttons.

3. Dynamic Connection Badge & Toast Alerts

• js/pwa.js [NEW]: Unified module registering the Service Worker, monitoring browser connectivity states (online/offline), and managing the following visual assets:
  • Active Status Indicator: Inserts a pulsing, glassmorphic indicator badge in the header (Green "Online" / Amber "Offline") dynamically tracking connection state.
  • Toast Notifications: A modern, animated toast system generating visual alerts (Success, Warning, Error, Info) that slide out after 4.5 seconds.

4. Offline checkout Queuing & Auto-Sync

• js/main.js [MODIFY]:
  • Offline Checkout Queue: When checking out offline, delivery validation runs locally, and orders are appended to a local storage queue (chaatPendingOrders). Displays a clean Offline Order Queued! modal window.
  • Pending Orders Widget: Merges queued offline orders directly into the orders list dashboard showing a custom "⏳ Queued Offline" tracking badge.
  • Auto-Sync Engine: Restoring connectivity automatically syncs queued orders to the main orders dashboard, resets status tracking timelines, and pops up celebratory success toasts.

5. Additional Critical Bug Fixes Included

• ReferenceError Fix (index.html): Resolved a critical crash where the home page was missing a <script src="js/cart-manager.js"></script> import. The resulting ReferenceError halted all JS execution in main.js, breaking the Order Now scrolling button and preventing PWA functions on the home page.
• Dependency Import Fix (cart.html): Included missing cart-manager.js script tag in the cart page to ensure fully operational cart flows.

---

Verification & Testing Details

Tested and validated locally on Google Chrome and Microsoft Edge DevTools:

1. Lighthouse PWA Audit: Passed PWA audit requirements for installability, security, and offline support.
2. Service Worker Registry: Verified sw.js installs, activates (self.skipWaiting()), and successfully pre-caches all 30 core assets in the chaat-static-v3 Cache Storage.
3. Network Offline Simulation: Switched throttling to Offline and successfully verified:
   • Header badge instantly changed to Offline with amber pulse.
   • Smooth navigation and menu searches fetched strictly from local cache.
   • Cart actions (adding, deleting, adjusting quantities) updated locally in localStorage.
   • Checkout placed order in chaatPendingOrders and popped up the custom PWA offline success dialog.
   • Dashboard rendered queued orders correctly.
4. Network Reconnection Simulation: Returned to No Throttling (online) and verified queued orders immediately synced, timeline tracking started, and success toasts fired.