JavaScript Bridge Demo

Specification

Global: window.jsbridge

Schema: --

Platform: --

Quick start

await jsbridge.ready();
jsbridge.setDebug(true);

jsbridge.on((msg) => {
  const { action, content } = msg.data || {};
  console.log(action, content);
});

const info = await jsbridge.call('deviceInfo');

API

jsbridge.ready(): Promise<void>
jsbridge.call(action, content?, opts?): Promise<any>
jsbridge.on(handler) / jsbridge.off(handler)
jsbridge.cancelAll()
jsbridge.setDebug(bool)
jsbridge.setMockHandler(fn | null)
jsbridge.platform — 'android' | 'ios' | 'desktop'
jsbridge.schemaVersion — integer

Message format

{
  version: jsbridge.schemaVersion,
  id: "msg_...",
  data: { action: "...", content: { ... } }
}

Console

Waiting for bridge...

Device & System

Spec & Usage

// Device info
const info = await jsbridge.call('deviceInfo');
// → { platform, osVersion, model, appVersion }

// Network status
const net = await jsbridge.call('networkState');
// → { connected: true, type: 'wifi' }

// Open native settings
await jsbridge.call('openSettings');

Safe Area / Insets

CSS Custom Properties

Native automatically pushes --bridge-inset-* CSS properties whenever bars change. Use var(--bridge-inset-top) etc. in your CSS. The insets action is for on-demand JavaScript queries. All values are in dp/pt.

safeArea.top = status bar + top navigation (when visible).
safeArea.bottom = system navigation + bottom navigation (when visible).

Spec & Usage

/* CSS: automatically updated by native (dp/pt values) */
body {
  padding-top: var(--bridge-inset-top, env(safe-area-inset-top, 0px));
  padding-bottom: var(--bridge-inset-bottom, env(safe-area-inset-bottom, 0px));
}

/* Individual bar heights also available: */
/* --bridge-status-bar, --bridge-top-nav */
/* --bridge-bottom-nav, --bridge-system-nav */

/* JS: query on demand (all values in dp/pt) */
const insets = await jsbridge.call('insets');
// {
//   statusBar:        { height: 30.13, visible: true },
//   systemNavigation: { height: 14.93, visible: true },
//   keyboard:         { height: 0, visible: false },
//   safeArea: {
//     top: 86.13,    // statusBar + topNavigation
//     right: 0,
//     bottom: 14.93, // systemNav + bottomNav (if visible)
//     left: 0
//   }
// }

System Bars Info

Spec & Usage

// Query current system bar dimensions (all values in dp/pt)
const info = await jsbridge.call('systemBarsInfo');
// → {
//   statusBar:        { height: 24.0,  isVisible: true },
//   topNavigation:    { height: 56.0,  isVisible: true },
//   bottomNavigation: { height: 0,     isVisible: false },
//   systemNavigation: { height: 14.93, isVisible: true }
// }

UI Actions

Spec & Usage

// Toast
await jsbridge.call('showToast', {
  message: 'Hello!',
  duration: 'short' // 'short' | 'long'
});

// Alert with buttons
const result = await jsbridge.call('showAlert', {
  title: 'Confirm',
  message: 'Are you sure?',
  buttons: ['OK', 'Cancel']
});
// → { buttonIndex: 0 }

Top Navigation

Spec & Usage

await jsbridge.call('topNavigation', {
  isVisible: true,
  title: 'Page Title',
  showUpArrow: false,
  showDivider: true,
  showLogo: false,
  showProfileIconWidget: false
});

// Hide toolbar
await jsbridge.call('topNavigation', { isVisible: false });

Bottom Navigation

Spec & Usage

// Show tab bar
await jsbridge.call('bottomNavigation', { isVisible: true });

// Hide tab bar
await jsbridge.call('bottomNavigation', { isVisible: false });

System Bars

Spec & Usage

await jsbridge.call('systemBars', {
  showStatusBar: true,
  showSystemNavigation: true
});

// Immersive mode
await jsbridge.call('systemBars', {
  showStatusBar: false,
  showSystemNavigation: false
});

Haptic Feedback

Spec & Usage

await jsbridge.call('haptic', { vibrate: true });

Navigation

Spec & Usage

// Load URL in WebView
await jsbridge.call('navigation', {
  url: 'https://example.com',
  external: false // true = open in browser
});

// Go back
await jsbridge.call('navigation', { goBack: true });

System Actions

Spec & Usage

await jsbridge.call('copyToClipboard', { text: 'Text to copy' });

Lifecycle Events

Native sends focused / defocused events automatically. Current state:

focused

Spec & Usage

// Native sends these automatically — just listen:
jsbridge.on((msg) => {
  if (msg.data.action === 'lifecycle') {
    const event = msg.data.content.event;
    // event: 'focused' | 'defocused'
    console.log('App', event);
  }
});

Refresh / Push Events

Native sends push events automatically. Latest:

waiting...

Spec & Usage

// Listen for push events from native:
jsbridge.on((msg) => {
  if (msg.data.action === 'onPushNotification') {
    const { url, message } = msg.data.content;
    console.log('Push:', message, url);
  }
});

// Tell native to refresh (web → native):
await jsbridge.call('refresh', { command: 'refresh' });

Secure Storage

Spec & Usage

// Save (Android: EncryptedSharedPreferences, iOS: Keychain)
await jsbridge.call('saveSecureData', {
  key: 'auth_token',
  value: 'eyJhbGci...'
});

// Load
const result = await jsbridge.call('loadSecureData', {
  key: 'auth_token'
});
// → { value: 'eyJhbGci...' }

// Remove
await jsbridge.call('removeSecureData', { key: 'auth_token' });

Analytics (Fire & Forget)

Spec & Usage

// Fire & forget — no await needed
jsbridge.call('trackEvent', {
  event: 'button_click',
  params: { screen: 'checkout', item: 'submit' }
});

jsbridge.call('trackScreen', {
  screenName: 'Checkout',
  screenClass: 'CheckoutScreen'
});

Schema Versioning

Spec & Usage

// Check current schema version
console.log(jsbridge.schemaVersion); // → 1

// Version is sent automatically in every call:
// { version: 1, id: "msg_...", data: { action: "..." } }
//
// Native silently ignores messages with version > its own,
// so newer web code degrades gracefully on older apps.

JavaScript Bridge Demo

Quick start

API

Message format

Console

Device & System

Safe Area / Insets

Safe Area

Components

CSS Custom Properties

System Bars Info

UI Actions

Top Navigation

Bottom Navigation

System Bars

Haptic Feedback

Navigation

System Actions

Lifecycle Events

Refresh / Push Events

Secure Storage

Analytics (Fire & Forget)

Schema Versioning

Automated Tests