JavaScript Bridge Overview

The Median JavaScript Bridge is an API embedded in your app that lets your website control and configure the app and access native device functionality and hardware. Your web code can call the bridge to trigger native actions, read device info, manage navigation, and integrate with native plugins.

There are two ways to use the JavaScript Bridge: the JavaScript Bridge Library, which provides helper functions and an abstraction layer, or the Median Protocol (median://) for direct, lower-level access without the library.

👍

GoNative → Median Transition

For existing apps that were last updated on the GoNative.io platform you must use gonative rather than median. For example gonative.statusbar.set() or gonative://statusbar/set.

For apps that have been updated on Median.co you may use either gonative or median.

Related Documentation

JavaScript Bridge Library

The JavaScript Bridge Library is injected into your webpage DOM at runtime and is available on any page displayed in the app. You can call median.module.function() once the library is ready.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/library-ready/

When using frameworks like React, Vue, or Angular, the median object may not be in scope. Options:

1. Expose callbacks globally: window.callback_function = () => {}
2. Use the NPM Package and toggle off library injection in App Studio → Website Overrides
3. Use the Median Protocol (median://) which does not require the library

👍

Median not median when using NPM package

When using the NPM Package make note to use capitalized Median to call functions rather than lowercase median which is reserved for the the injected JavaScript library. Your IDE should be configured to help with code hinting to help with completion and avoid semantic errors.

Calling Commands on Page Load

The library is not available until it initializes. For commands that must run on page load, define median_library_ready() on your page; it is called after initialization. Or use the Median Protocol so you are not dependent on the library.

If median_library_ready() is not called (e.g. the library initializes before your page defines it), call it manually when the library is ready:

function median_library_ready() {
  // Your code here
}
if (window.median) {
  window.median_library_ready();
}

Promises

Some bridge commands return JavaScript promises. Handle them with async/await or .then()/.catch():

median.iap.purchase({ productID: 'product_id' })
  .then(function(data) { /* handle success */ })
  .catch(function(error) { /* handle error */ });

Median Protocol

You can call bridge commands via the median:// protocol without the JavaScript Bridge Library. Use an HTML anchor href for simple commands, or set window.location.href in JavaScript for complex ones. Parameters with JSON or special characters must be encoded with encodeURIComponent().

To chain multiple commands, use median://nativebridge/multi with an array of URLs instead of making sequential calls (which can cause only the last command to run).

Frequently Asked Questions

Summary

The Median JavaScript Bridge gives your web app access to native features: device info, clipboard, share, downloads, cache clearing, keyboard state, and more. Use the injected library or the NPM package for framework-based projects, or the Median Protocol for direct calls. See the links above for detailed docs on each capability.