Component Specs

Overview

Swoff provides three UI components. The behavior is the same across all frameworks — only the implementation differs. See your ecosystem's components page for the actual code.

UpdatePrompt

Shows when a new SW version is available.

When visible: updateStatus === 'available'

Behavior:

• Displays version info (e.g., "v0.0.1 → v0.0.2")
• "Update" button triggers download with progress feedback
• "Later" button dismisses the dialog (hidden if forceUpdate is true)
• If forceUpdate is true: renders as full-screen overlay with no dismiss option

Position: Bottom sheet or modal

SWProgressBar

Shows download progress during SW installation.

When visible: status === 'installing' or updateStatus === 'downloading'

Behavior:

• Fixed at top of screen
• Shows during first-time SW install and during updates
• Auto-hides when installation completes
• Separate from UpdatePrompt (which handles the decision to update)

Position: Fixed bar at top of viewport

InstallButton

Triggers the browser's PWA install prompt.

When visible: Only when beforeinstallprompt event has been captured

Behavior:

• Hidden if no install prompt available or app is already installed
• On click: calls deferredInstallPrompt.prompt()
• Hides after user accepts or dismisses

Position: Header, settings page, or anywhere in your UI

Component-Adapter Relationship

Components consume the reactive state exposed by adapters:

Adapter (hook/composable/store)
     ↓ provides state
Component (UpdatePrompt, SWProgressBar, InstallButton)

The component doesn't manage state — it reads from the adapter and calls back (acceptUpdate, dismissUpdate).

Next Steps

• React Components — React implementation
• Component Specs — behavioral requirements