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 KeyboardEvents.
• [[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