arbpulse_github/openspec/changes/add-pwa-mobile/specs/pwa/spec.md at 5d84df3e25e971dfdb5cd4362ccb9e2487eaffab

mirror of https://github.com/mauricioabh/arbpulse.git synced 2026-07-27 15:47:43 +00:00

Files

T

Mauricio Barragan 5d84df3e25 feat(pwa): installable PWA + responsive mobile dashboard

- Add Web App Manifest + ArbPulse icons (192/512/maskable/apple-touch) under
  web/public/; no service worker (real-time honesty: never serve stale data).
- Add mobile/install metadata to index.html (theme-color, viewport-fit=cover,
  apple-mobile-web-app-*, manifest + apple-touch-icon links).
- Responsive layout: PriceMatrix stacked per-venue cards below sm, StatsBar
  reflow, ~44px touch targets in Controls/ConfigPanel, safe-area top inset.
- scripts/gen-icons.ps1 derives icon sizes from the master (no new deps).
- openspec: add-pwa-mobile change (proposal/design/specs/tasks).

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-07-16 15:21:13 -06:00

2.7 KiB

Raw Blame History

ADDED Requirements

Requirement: Installable to the home screen

The dashboard SHALL be installable to a device home screen via a Web App Manifest served over HTTPS, without requiring a service worker.

Scenario: Manifest is present and valid

WHEN the dashboard is loaded over HTTPS
THEN a linked manifest.webmanifest is served that includes name, short_name, start_url in scope, display: standalone, theme_color, background_color, and at least 192px and 512px PNG icons

Scenario: User installs from the browser

WHEN a user chooses "Install app" / "Add to Home Screen" from the browser menu
THEN the app is added with the ArbPulse icon and launches in a standalone, full-window mode at start_url

Requirement: No offline mode and no stale data

The app SHALL NOT register a service worker and SHALL NOT cache market data, so it never presents stale or fake data (real-time honesty rule).

Scenario: No service worker is registered

WHEN the dashboard runs in any environment
THEN no service worker is registered and no application cache stores /api responses or the SSE stream

Scenario: Disconnected device shows a clear non-data state

WHEN the device has no working connection to the engine
THEN the UI shows its reconnecting/offline indicator and does not display cached market figures as if they were live

Requirement: Responsive mobile layout

The dashboard SHALL be usable on phone-sized viewports (~360–430px wide) without horizontal overflow of primary widgets, while the desktop layout is unchanged.

Scenario: Order book fits a phone screen

WHEN the viewport is narrower than the sm breakpoint
THEN the order-book (PriceMatrix) is presented as per-venue stacked cards showing bid, ask, quantities, and spread without horizontal scrolling

Scenario: Stats and controls remain readable and tappable

WHEN the dashboard is viewed on a phone
THEN the stats bar reflows without clipping and interactive controls have touch targets of at least ~44px

Scenario: Desktop layout is preserved

WHEN the viewport is at the lg breakpoint or wider
THEN the existing multi-column layout and table order book render as before

Requirement: Mobile and install metadata

The index.html head SHALL include the metadata needed for correct mobile rendering and home-screen installation on Android and iOS.

Scenario: Head includes mobile/install tags

WHEN the page is served
THEN the head contains a theme-color, viewport-fit=cover in the viewport meta, a link to the manifest, an apple-touch-icon, and the apple-mobile-web-app-* tags for standalone iOS launch

2.7 KiB Raw Blame History Unescape Escape