Files
Native-Router-Vue/docs/platforms.md
2026-07-21 15:13:16 +10:00

2.3 KiB

Platform integration

PWA and browser

The demo uses a standalone manifest, Apple Home Screen metadata and PNG icons, safe-area environment variables, and a generated Workbox service worker. Updates are prompted and cannot reload while a gesture is active. The Navigation Lab exposes the live display mode, service-worker state, edge-guard state, and intercepted-touch count.

In an installed iOS Home Screen app, the PWA adapter installs non-passive leading-edge touch listeners before the navigator gesture and applies overscroll-behavior-x: none. This gives the application the earliest web-content opportunity to claim the sequence. The guard is disabled in normal Safari tabs so the demo does not unexpectedly override browser navigation.

Mobile operating systems can reserve gestures before web content receives them. A PWA cannot set WKWebView.allowsBackForwardNavigationGestures, so absolute native-level suppression cannot be guaranteed from JavaScript. The full interaction system targets installed PWAs; use the Capacitor host when that native switch must be deterministic. Normal tabs retain links, buttons, history, and non-interactive transitions as their fallback.

Electron

Call disableElectronHistoryGestures(app.commandLine) before app.whenReady(). It disables Chromium's OverscrollHistoryNavigation, preventing the host from racing the renderer's interactive stack. The included preload bridge maps app commands and Alt+Arrow shortcuts into the renderer adapter without enabling Node integration.

The demo switches to hash history under file: so packaged deep navigation never asks the filesystem for route paths.

Capacitor

createCapacitorAdapter() handles Android hardware back, Universal/App Links, launch URLs, pause cancellation, root exit, and native haptic feedback.

The checked-in iOS and Android projects use Capacitor 8 and include App, Haptics, Splash Screen, and Status Bar plugins. Rebuild the web bundle before npx cap sync.

Accessibility

Inactive live routes are inert and aria-hidden. Only the active or interactive pair participates in focus and pointer hit testing. Back and tab controls retain native link/button semantics; reduced-motion users receive immediate transaction settling. Custom presentations must preserve the same focus and inert invariants.