feat: add PWA support via vite-plugin-pwa

[decimozs]

feat: implement PWA support via vite-plugin-pwa

This pull request adds Progressive Web App (PWA) support to the project by integrating the vite-plugin-pwa plugin. The main changes involve updating dependencies and configuring the PWA plugin to enable app installation, automatic updates, and a web app manifest with appropriate icons and metadata.

Type of Change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Refactor (non-breaking change which improves code quality)

PWA Integration

• Dependency: Added vite-plugin-pwa as a development dependency in package.json.
• Configuration: Updated vite.config.ts to configure the VitePWA plugin with:
  • Automatic update registration: Ensures the service worker stays up to date without manual refresh.
  • Development mode support: Enabled for testing PWA capabilities in the local environment.
  • Web App Manifest: Configured with app name, high-resolution icons (including maskable versions for Android), start URL, and theme colors.

Screenshots / Visuals

To demonstrate the PWA features, here are the visual results:

"Add to Home Screen" prompt

Illustrates the installation prompt on a mobile device or desktop browser.

Installed PWA on Home Screen/Desktop

Shows the app icon and standalone window after installation.

PWA Manifest in DevTools

Validation of the "Application" tab in Chrome DevTools, highlighting the Manifest section and icon assets.

Service Worker in DevTools

Confirmation that the Service Worker is correctly registered and running.

How to Verify

1. Run npm run dev (or npm run build && npm run preview).
2. Open the URL in Chrome.
3. Observe the Install icon in the address bar.
4. Open DevTools > Application > Manifest to verify the icons and metadata are loading correctly.
5. Open DevTools > Application > Service Workers to confirm the service worker is registered and active.