feat: implement custom mobile PWA install prompt with dual-lock devic…

[the-madhankumar]

Description [Reference Issue: #74]

This Pull Request implements a custom installation prompt for mobile and tablet devices. The solution addresses the requirements for FreshScan AI by prompting mobile users to install the application to their home screen while ensuring that desktop users do not see the pop-up, even if their browser windows are resized or compressed.

This update also introduces a functional Service Worker to ensure Progressive Web App compliance.

---

Changes Made

1. Service Worker Setup and Compliance

• Added public/sw.js: Created a service worker file that handles basic install, activate, and fetch events. It uses a network-first approach with an offline fallback. This ensures that the application structure remains accessible if a user loses internet connectivity in a market.
• Registered Service Worker: Added a script in src/main.tsx to register the service worker when the page loads.

2. Device and Hardware Detection

• Intercepted the default browser install banner using the beforeinstallprompt event listener.
• Implemented a dual validation system in src/components/InstallPrompt.tsx to ensure the banner only displays on true mobile devices:

1. User-Agent Check: A regular expression verifies if the operating system is mobile, such as Android or iOS.
2. Hardware Check: A media query checks if the device uses a touch screen as its primary input method.

3. Custom Installation User Interface

• Created a high-contrast user interface component that matches the application design theme.
• Configured the custom "Install" button to correctly trigger the browser installation prompt and log whether the user accepted or declined the request.

4. Development Environment Configuration

• Updated vite.config.ts to allow network access to the local development server. This allowed testing the setup directly on a physical mobile device using local network port forwarding.

Installation Dialog UI

---

Testing and Verification

The entire workflow was verified on a physical mobile phone using the following steps:

1. The page loads on a mobile browser, and the service worker registers successfully.
2. The device checks pass, and the custom installation banner is displayed at the bottom of the screen.
3. Clicking the custom install button triggers the native browser installation dialogue.
4. When tested on a desktop screen, the banner does not appear, even when the browser window is shrunk down to mobile dimensions.

---

Checklist

• The service worker file is located in the public directory to ensure correct scoping.
• All TypeScript errors and linter issues are resolved in the component.
• The installation triggers are mapped directly to user button clicks.
• The build and lint commands execute successfully without any errors.

[vercel]

@the-madhankumar is attempting to deploy a commit to the karan3431's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thank you for your Pull Request! We're thrilled to have your contribution to FreshScan AI.

Before we review, please make sure you have:

• Followed the CONTRIBUTING.md guidelines.
• Ensured all automated CI checks (linting, tests) are passing.
• Checked that your commit messages follow the Conventional Commits format.

A maintainer will review your code as soon as possible!

[jpdevhub]

Frontend lint and build test are failing fix that.

[jpdevhub]

The lock file is missing three packages that are declared in your package.json:

@emnapi/core@1.10.0
@emnapi/runtime@1.10.0
@emnapi/wasi-threads@1.2.1
Let me check your lock file and package.json to understand the situation better:## Solution for Job 79974568071

Problem: The npm ci command failed because package.json and package-lock.json are out of sync. The lock file is missing these packages:

@emnapi/core@1.10.0
@emnapi/runtime@1.10.0
@emnapi/wasi-threads@1.2.1
Root Cause: These packages appear to have been added to package.json (likely as transitive dependencies via onnxruntime-web@^1.26.0) but the package-lock.json wasn't updated to reflect them.