JavaScript Bridge Overview

Before you start

• A generated Android build
• Website code that checks for the bridge before calling it

Configure and verify

1. Detect the bridge

   Check window.webtoapp before using a native helper so the same page still works in a normal browser.

2. Prefer named helpers

   Use requestPermissions, authenticate, openQrScanner, downloadFile, googleSignIn, googleIap, analytics logging, push identity, and dynamic icon helpers when available.

3. Use postMessage for typed payloads

   Call webtoapp.postMessage(JSON.stringify({type, props})) for generic native handlers. Use type update_settings with an updates object to change App Bar, Bottom Navigation, or Navigation Drawer state for the current session.

4. Listen for results

   Assign webtoapp.onmessage and also listen for feature-specific CustomEvents where documented. Parse event.data defensively.

5. Provide a browser fallback

   Hide native-only controls or route to a web equivalent when the bridge is absent.

Safe detection

const inWebToApp = Boolean(window.webtoapp && window.webtoapp.postMessage);
if (inWebToApp) {
  // Native helper calls are available.
}

Generic listener

webtoapp.onmessage = function (event) {
  try {
    const message = JSON.parse(event.data);
    console.log(message.type, message.response);
  } catch (error) {
    console.error("Invalid native message", error);
  }
};

Trust boundary

Test before release

• Calls are guarded by bridge detection
• Every request has error and cancel handling
• Browser fallbacks exist
• Sensitive results are verified server-side