PWA primitives for the workshop crew
Every surface a crew member touches on the workshop PWA — install prompts, offline strips, sync queues, biometric unlock, share-target receiver, wake-lock, splash and home tiles. Built for the tablet bracket above bay 2 and the customer's phone on the way to Oak Flats.
PWA primitives for the workshop crew is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
PWA primitives for the workshop crew: Every surface a crew member touches on the workshop PWA — install prompts, offline strips, sync queues, biometric unlock, share-target receiver, wake-lock, splash and home tiles. Built for the tablet bracket above bay 2 and the customer's phone on the way to Oak Flats.
Pick a surface
Each primitive ships with iOS and Android variants where it matters, reduced-motion overrides, ARIA semantics and tabular-nums on every metric. Australian English copy throughout — "Bay 2", "parts movements", "rego".
Install prompt card
Add-to-home-screen prompt with platform-aware steps. iOS Safari share-sheet path or Android Chrome install banner.
Inspect primitive states 02Offline indicator strip
Top-of-screen connectivity strip with online, offline, syncing and degraded variants. Aria-live announcements.
Inspect primitive states 03Pull-to-refresh loader
Bouncy refresh bowl with progress ring, armed-state colour shift and hint text. Reduced-motion respected.
Inspect primitive states 04Splash screen
Branded boot screen with monogram logo, version, region tag and boot-progress bar with current step.
Inspect primitive states 05Sync status tile
Pending-change count, per-entity sync rows and retry CTA. Idle, syncing and error states.
Inspect primitive states 06Biometric unlock card
Touch ID, Face ID or fingerprint prompt with crew avatar, status hint and PIN fallback dots.
Inspect primitive states 07Update available banner
Service-worker update banner with reload CTA, release age and optional changelog bullets.
Inspect primitive states 08Network quality meter
Connection bars (offline · 2G · 3G · 4G · 5G/Wi-Fi) with latency, down and up metrics in tabular-nums.
Inspect primitive states 09Permission modal
Pre-prompt modal for camera, mic, location, notifications, contacts and storage with rationale + benefits.
Inspect primitive states 10Home-screen tile
iOS-widget-style quick-action tile with badge counter and inline metrics. Tone variants.
Inspect primitive states 11App shortcut row
Jump-list of in-app shortcuts — Scan VIN, Next bay, Parts arrived, Call customer. Tap or link.
Inspect primitive states 12Share target card
Receiver UI for the Web Share Target API. Caption, optional media preview and channel chips.
Inspect primitive states 13Device orientation prompt
Animated rotate-to-landscape hint with arc cue. Reduced-motion shows static rotated phone.
Inspect primitive states 14Wake lock toggle
Keep-screen-on toggle with status chip and battery-cost-per-hour pill. Role=switch + aria-checked.
Inspect primitive states 15Full mobile shell
Bonus composition: a workshop crew PWA running end-to-end — splash, install prompt, biometric unlock, sync queue, home tiles, shortcuts, share target and wake lock.
Review full composition