meta-display-webapps

# Meta Display Web Apps A Web App is the runtime model on Meta Ray-Ban Display. The page is HTML/CSS/JS served from your HTTPS URL; the glasses load it and render to the in-lens additive display; Neural Band and Cap Touch translate gestures into keyboard events; sensors and geolocation are exposed through standard W3C APIs from the paired phone. This skill is the on-the-ground guide to writing apps for that runtime. If the target device isn't MRBD, stop here and load [[../meta-wearables/SKILL]] for a routing check. ## When to load Triggers: - "Build a Web App for Meta Ray-Ban Display" - "MRBD HTML/CSS/JS" - "Why is my Web App not rendering on the glasses" - "Neural Band web input mapping" - "What's the viewport for MRBD" - "Cap Touch arrow keys" - "Web App over HTTPS Meta glasses" Don't load for: - Ray-Ban Meta Gen 1/2 or Oakley HSTN/Vanguard — those are DAT, not Web Apps. Route to [[../meta-wearables-dat/SKILL]]. - Visual / brand design questions — see [[../meta-display-design/SKILL]]. ## Decide first The architecture decisions before code: 1. **Routing model** — is your app one screen, many screens with focus-driven navigation, or a continuous experience? Focus management is the defining UX of MRBD. 2. **Sensor reliance** — does your app *need* DeviceMotionEvent, DeviceOrientationEvent, or geolocation? Each requires a permission gesture. Plan that gesture. 3. **State persistence** — `localStorage` (5 MB) is your only on-glasses storage. If you need more, the data lives elsewhere. 4. **Distribution** — share-link to up to 100 testers via Meta AI, or password-protect the URL at your hosting layer? See [[references/developer-mode-test]]. ## Map of content ### Viewport and rendering - [[references/viewport-600]] — the exact 600×600 viewport spec and the meta + body CSS that pins it. - [[references/additive-display-contrast]] — why dark backgrounds aren't a style preference but a rendering requirement. - [[references/typography]] — the minimum font sizes and the readability floor. - [[references/tap-targets]] — 88 px minimum tap height for `.focusable` elements. ### Input - [[references/focusable-d-pad]] — the `.focusable` class pattern and the focus-management JavaScript shape. - [[references/neural-band-gesture-mapping]] — how Neural Band gestures land as `KeyboardEvent`s. - [[references/cap-touch-input]] — temple swipe and pinch as the same event stream. ### Sensors and data - [[references/motion-sensors]] — `DeviceMotionEvent` and `DeviceOrientationEvent`, plus the permission gesture rule. - [[references/geolocation]] — `navigator.geolocation` proxied through the paired phone. - [[references/local-storage]] — Web Storage on-glasses; 5 MB cap each. ### What you don't have - [[references/unsupported-apis]] — camera, mic, text input, offline support, notifications, back navigation — explicitly off the table today. ### Shipping - [[references/https-deployment]] — HTTPS-only hosting and the practical platform list. - [[references/app-icons]] — Unicode symbols and PNG icons; no SVG. - [[references/developer-mode-test]] — Developer Mode toggle, adding the URL, share-link distribution. ## Verify Before claiming a Web App ships: - [ ] Viewport is exactly 600×600 px and `body { width: 600px; height: 600px; overflow: hidden; }`. - [ ] Every interactive element has the `.focusable` class and is reachable in a sensible focus order via arrow keys + Enter. - [ ] Background is dark; UI elements are light and high-contrast. - [ ] Body text is ≥16 px; primary content is ≥20-24 px. - [ ] `.focusable` `min-height` ≥ 88 px. - [ ] If you call `DeviceMotionEvent.requestPermission()` or `DeviceOrientationEvent.requestPermission()`, you call it inside a user-gesture handler — not on page load. - [ ] Hosting URL is HTTPS with a valid certificate (no HTTP, no self-signed). - [ ] You've tested in Chrome with the viewport set to 600×600 and on the glasses through Developer Mode. - [ ] You've not consumed the middle-pinch event (it's reserved for the system menu). - [ ] App icon is Unicode or a PNG ≥ 52×52 px — not SVG. ## Smoke test If this skill loaded correctly, the agent should answer: 1. What's the exact viewport meta tag and body CSS for a Meta Ray-Ban Display Web App? (Expected: cites [[references/viewport-600]] with the 600×600 spec and `user-scalable=no`.) 2. Why do Web Apps need dark backgrounds? (Expected: additive waveguide — black pixels are transparent; cites [[references/additive-display-contrast]].) 3. Can my Web App stream the camera? (Expected: no — listed under "Web Apps do not yet support" in [[references/unsupported-apis]].) 4. How does a pinch on the Neural Band reach my app? (Expected: as an `Enter` key event; cites [[references/neural-band-gesture-mapping]] and [[../meta-wearables/references/neural-band]].) ## Sibling skills - [[../meta-wearables/SKILL]] — routing across the Meta wearables family. - [[../meta-wearables-dat/SKILL]] — the DAT path for everything not MRBD. - [[../meta-display-design/SKILL]] — design patterns for the additive display. ## Sources - Web Apps overview — <https://wearables.developer.meta.com/docs/develop/webapps> - Web Apps build — <https://wearables.developer.meta.com/docs/develop/webapps/build/> - Web Apps setup — <https://wearables.developer.meta.com/docs/develop/webapps/setup/> - Web Apps test — <https://wearables.developer.meta.com/docs/develop/webapps/test/> - Meta Web Apps starter — <https://github.com/facebookincubator/meta-wearables-webapp>