Native App Overview
How Appo wraps your web app as a native mobile app.
How It Works
An app can be created from the CLI (appo new), the MCP server, the Appo dashboard, or a platform plugin. Appo generates a native mobile app that loads the website inside a WebView. The native layer bridges device features (push notifications, biometrics, camera, location, and others) to the app's JavaScript code through a message-based protocol.
The application is written as a standard web app, with the Appo SDK where native features are needed. The native wrapper handles the platform-specific concerns: permissions, hardware access, app store packaging, and native UI integration.
Architecture
┌─────────────────────────────────────────┐
│ Your Web App │
│ │
│ appo.push.requestPermission() │
│ │ │
│ ▼ │
│ ┌──────────────────────────────┐ │
│ │ @appolabs/sdk SDK │ │
│ │ postMessage({ type, id }) │ │
│ └──────────────┬───────────────┘ │
└─────────────────┼────────────────────────┘
│ window.ReactNativeWebView.postMessage()
▼
┌─────────────────────────────────────────┐
│ Native App (managed by Appo) │
│ │
│ WebView.onMessage(event) │
│ │ │
│ ▼ │
│ ┌──────────────────────────────┐ │
│ │ Message Dispatcher │ │
│ │ type → Feature Handler │ │
│ └──────────────┬───────────────┘ │
│ │ │
│ ┌────────────┼────────────┐ │
│ ▼ ▼ ▼ │
│ expo- expo- expo- │
│ notifications location haptics ... │
│ │
│ Response sent back via injectJavaScript │
└─────────────────────────────────────────┘Message Flow
- Your web app calls an SDK method (e.g.,
appo.push.requestPermission()). - The SDK serializes the request as a JSON message with a unique ID and sends it via
postMessage. - The native WebView receives the message through its
onMessagehandler. - The message dispatcher routes the request to the appropriate feature handler based on the message type.
- The feature handler calls the corresponding native API.
- The result is sent back to the WebView via
injectJavaScript, matching the original request ID. - The SDK resolves the pending Promise with the response data.
For the full message protocol specification, see Architecture.
Sections
- Configuration — App settings, permissions, and deep links
- Feature Handlers — How native handlers process SDK requests
- Event Broadcasting — Native-to-web event delivery