PHP 8 (single index.php), Bootstrap 5, Service Worker (PWA), Manifest, CSV-based mapping. Scope: Web App only (no native apps). UDI data is processed locally in the browser (no storage, no backend writes). Background: We use a browser-based tool to parse and display GS1/MDR UDI from barcodes (GS1-128) and DataMatrix. The app is a PWA (installable) with a CSV mapping that links GTIN (AI 01) + Variant (AI 20) to our product metadata. Only Company UDIs are allowed (whitelist via CSV match). Current Issues: 1. iOS Safari camera access – No permission prompt appears, or we immediately get “camera access denied/failed”. Sometimes the video preview remains black. 2. ZXing timing error – “Can’t find variable: ZXingBrowser” (UMD not ready / race condition). 3. PWA install & icons – App install should work smoothly (Android “Install app”; iOS “Add to Home Screen”). Some icons weren’t loading reliably. 4. Scanner UX – Need a robust mobile scanner with: modal UX, back camera default, camera selection, optional torch (flashlight) toggle, and a “scan from photo” fallback. 5. CSV mapping enforcement – Parsing works, but the app must only accept codes where (01) GTIN + (20) Variant exist in the CSV map. Otherwise show “not a Company product”. Goal: Finalize the web app so it’s stable on iOS Safari and Android Chrome, with a reliable camera prompt, working scanner, installable PWA, and strict CSV mapping. Tasks: A) Camera & Scanner - Trigger getUserMedia() inside a direct user gesture (click → open modal → on shown event) to ensure the iOS permission prompt appears. - Try BarcodeDetector first; fallback to ZXing if unavailable. - Lazy-load ZXing from CDN (e.g., @zxing/browser UMD). Eliminate “ZXingBrowser undefined” by loading the script before use and waiting for namespace. - Use iOS-friendly constraints with fallbacks: * { facingMode: { exact: 'environment' }, width: { ideal: 1920 }, height: { ideal: 1080 } } * then { facingMode: 'environment' } * then { video: true } - Torch support: enable flashlight button only if getCapabilities().torch is present. - Camera picker: populate from enumerateDevices(), default to back camera. - Photo fallback: <input type="file" accept="image/*;capture=environment"> → decode image with ZXing and fill the input. - Ensure it works outside iframes, over HTTPS, and without blocked permissions headers. B) PWA & Installability - Validate manifest.json: name, short_name, start_url (/ or /index.php?source=pwa), display: 'standalone', theme_color, background_color, and icons (32, 180, 192, 512, 1024). - Confirm Service Worker registration and caching (bump cache version to force updates). - Handle beforeinstallprompt to show an Install button on Android. - Show an iOS hint (“Share → Add to Home Screen”). - Ensure icons load on all platforms (we provide PNGs in /icons/). C) CSV Mapping & Security - Server-side PHP loads a semicolon-separated CSV (TArtikelstamm-1.csv), mapping: * Base EAN/GTIN + Variant (AI 20) → artikelNr, product name, product group/type, weight, color, etc. - Strict whitelist: only show product details if (01) + (20) match an entry in the CSV. Otherwise show a clear error (“not a NOVODENT product / not authorized”). - Keep formatting of common AIs: * (17) expiry date (YYMMDD → YYYY-MM-DD) * (315x) liters & mL * (310x) kg & g * full compact AI string (e.g., (01)0763...(20)68(17)27...) D) Mobile UI/UX - Touch-friendly controls (min-height ~44px), responsive layout, 4:3 video preview, playsinline + muted. - Floating Scan button on mobile. - Helpful, user-facing error messages (permission denied, no camera, no code, etc.). E) Test Page - Provide a minimal camera-test.html (one button → getUserMedia() → inline video) to test camera permission independently from the scanner logic. Acceptance Criteria: - iOS Safari (latest): * On tapping Scan, the iOS camera permission prompt appears (unless previously allowed). * Live preview works (back camera default). * Codes are detected with BarcodeDetector or ZXing fallback. * Photo scan fallback successfully decodes and fills the UDI input. - Android Chrome (latest): * Same scanner behavior as above, plus Install App prompt via beforeinstallprompt. - PWA: * Installable, launches in standalone mode, correct icons on Android and iOS. * Service worker cache version bump triggers updates reliably. - CSV enforcement: * Only UDIs present as (01)+(20) in the CSV produce product details. All others are rejected with a clear message. - No data stored: * UDI is processed locally only; no backend persistence. Deliverables: - Updated index.php (clean, commented). - Final manifest.json and sw.js (with a new cache version). - Confirmed icon references (provided PNGs: 32, 180, 192, 512, 1024). - camera-test.html for permission debugging. - Short README with deployment notes (HTTPS, cache bump, iOS/Safari settings). We Provide: - Current index.php, manifest.json, sw.js, icons, and CSV sample. - Test UDI strings (with FNC1 represented as <GS> if needed). Please Include in Your Bid: - Short plan for handling iOS permission flow, ZXing lazy load, and fallbacks. - Your test devices/browsers. - Relevant links or examples of prior work with getUserMedia, BarcodeDetector/ZXing, and PWAs. Notes: - The app is strictly for Company products (no generic scanner). - No analytics or tracking required. - Keep dependencies minimal (Bootstrap 5, Bootstrap Icons, ZXing CDN only). - Only Real bid!!!