Mobile usage PWA
Use Navin from a phone or tablet as a chat client (threads, mic STT, account connect, read-only artifacts). This is the installed WebUI Progressive Web App. It is not the Dev workbench Mobile preview that drives Expo / React Native / Flutter devices.
| Concern | Usage PWA (this doc) | Dev mobile preview |
|---|---|---|
| Purpose | Chat with your Navin gateway on the go | Build and preview mobile apps from #/code |
| Surface | Same WebUI, installable from the browser | Workbench Mobile tab + navin/mobile/ |
| Code | webui/ (manifest.webmanifest, sw.js, src/pwa.ts) | navin/mobile/, DevMobilePreview.tsx |
| Docs | This page | Mobile Agent |
The usage client uses the same licensing model as desktop: free with your own API keys (BYOK), or a paid plan for managed model credits.
Install the PWA
- Start the gateway so the WebUI is reachable (default
http://127.0.0.1:8765). - On the phone, open that URL in Chrome (Android) or Safari (iOS).
- Use Add to Home Screen / Install app.
- Launch the icon: the app runs standalone (
display: standalonein the manifest).
The service worker caches the shell (HTML, icons, manifest) so the installed app can reopen offline. Chat still needs the gateway online - there is no aggressive offline AI cache.
After changing PWA files under webui/public/ or webui/src/pwa.ts, rebuild the WebUI so the gateway can serve them:
cd webui && npm run build
That writes into navin/web/dist (including sw.js). Until you rebuild, the running gateway may still serve an older shell without the service worker.
Connect from another device on the same LAN
First-run WebUI binds to loopback only. To open it from a phone on your Wi-Fi:
- In
~/.navin/config.json, set the WebSocket channel host to all interfaces and keep a bootstrap secret:
{
"channels": {
"websocket": {
"enabled": true,
"host": "0.0.0.0",
"port": 8765,
"tokenIssueSecret": "<long-random-secret>",
"websocketRequiresToken": true
}
}
}
navin webui generates tokenIssueSecret for localhost. Keep it set when binding beyond loopback - the gateway refuses 0.0.0.0 without a token or issue secret.
- Restart the gateway (
navin gatewayornavin webui). - Find the host LAN IP (for example
ip addr/ipconfig). - On the phone, open:
http://<lan-ip>:8765/#/?bootstrapSecret=<tokenIssueSecret>
The hash param is consumed once and stored in the browser (see webui/src/lib/bootstrap.ts). You can also paste the secret into the WebUI auth prompt.
- Install as a PWA from that origin if you want a home-screen icon.
Security: only do this on a trusted LAN. Prefer a firewall that limits port 8765 to your subnet. Do not expose the gateway to the public internet without an intentional access model (reverse proxy, TLS, strong secret).
Mobile chat UX notes
- Viewport uses
viewport-fit=coverso notch / home-indicator insets apply. - The composer dock pads with
env(safe-area-inset-*)on narrow viewports. - Sidebar becomes a sheet on small screens; Dev tooling stays localhost-oriented.
Features on mobile
- Chat - same
ThreadShell/ composer as desktop; sidebar opens as a sheet on narrow viewports. - Mic STT - composer voice button (transcription provider in Settings).
- Account connect - Settings → Account → sign in with navin.live (or open the connect URL on the phone browser).
- Artifacts - when the agent presents an artifact,
ArtifactCanvasopens read-only (HTML / markdown / file preview). Full Dev tooling (terminals, mobile device preview) stays localhost-only.
What this is not
- Not a separate
mobile-app/codebase in phase 1; the PWA is the WebUI. - Not Capacitor / store packaging yet (possible later wrap).
- Not a substitute for Mobile Agent when you are developing Expo / RN / Flutter apps inside Navin Dev.
Related
- WebUI source / Vite: webui/README.md
- Dev mobile preview: mobile.md
- Secure local agent notes: guides/secure-local-ai-agent.md