Median.co HomeDeveloper PortalCreate New App
Documentation
Online TermsPrivacy Policy
Start typing to search…

Adding Native Features to your app

Learn about adding native features your mobile app

Overview

You've built your app with an AI app builder. Now, you can add powerful native mobile features the same way by prompting your AI assistant to implement the Median JavaScript Bridge.

This guide is for AI app builder users who are converting their web app into native iOS and Android apps using Median.co. We'll show you how to prompt your AI assistant to leverage Median's native features.

This guide will walk you through the foundational steps for adding native functionality.

How the JavaScript Bridge Works

The Median JavaScript Bridge enables your web app (built with your AI app builder) to talk to your native mobile app (built by Median). It's a powerful API that connects your app and website.

Because you're using an AI app builder, you don't even need to write the code yourself. You just need to tell the AI what to do.

The process is simple:

  1. You prompt your AI assistant to add a native feature.
  2. The AI reads Median's JavaScript Bridge documentation.
  3. The AI implements the feature in your app's JavaScript code.
  4. The Bridge communicates with native device features (like the camera or haptics).
  5. Your users get a full native mobile experience, automatically.

What makes this so powerful?

  • No native iOS/Android coding: Everything happens in JavaScript, which your AI assistant already understands.
  • Same AI workflow: Use the same prompting approach you used to build your app.
  • Instant updates: Changes deploy through your web code; no app store resubmission is required.

Step 1: Get Your App URL

The first step in your mobile app journey is simple: we need to tell Median where to find your web application. This requires your app's public URL, the link that allows anyone on the internet to view your app.

  1. Access Your Project: Log in to your AI app builder account and navigate to the project you want to convert to mobile.
  2. Locate the Live URL: Look for your app's "Preview," "Live," or "Deployed" URL. You can typically find this in your project dashboard or deployment section and represents the publicly accessible version of your application. You can also set up a custom domain in your project settings.
  3. Copy the URL: Save this URL; you'll paste it into the Median App Studio in the next step to begin the conversion process.

Quick Check: Test your URL by opening it in a private or incognito browser window. If you can see your app without logging in, you're ready to proceed.

Step 2: Create Your App in Median App Studio

  1. Access the Studio: Visit https://median.co/login or click "Sign In" via the navigation bar.
  2. Initialize Your Project: Click the Create a New App button to start your mobile app project.
  3. Connect Your Web App: Paste the app URL you copied in the previous step. This tells Median where to find your web application.

Once you hit enter, our platform springs into action, automatically analyzing your site's structure, detecting mobile compatibility features, and generating a real-time preview across multiple device simulators. You'll instantly see how your app will look and behave on actual iOS and Android devices.

Step 3: Configure Basic App Settings

You can completely customize your app. In the App Studio, navigate through the sidebar tabs:

  • App Name: Set the name that will appear under your app icon.
  • Branding: Upload your App Icon (what users see on their home screen) and Splash Screen (what users see when the app opens).
  • Navigation: Configure native UI elements like a top navigation bar or a tab menu. These complement your web content and make your app feel truly native.

Step 4: Unlock Native Mobile Features with AI Prompts

Here's where your web app transforms into a mobile experience that feels native to iOS and Android. The best part? You can add these features using AI prompts.

Why This Matters

While your web app will work perfectly fine when converted to a native mobile app, adding native features creates an experience that rivals native apps built from scratch with Kotlin and Objective-C. Think haptic feedback when users tap buttons, access to the device camera for profile photos, or push notifications that keep users engaged.

Adding the Median JavaScript Bridge

To unlock native features, you'll need the Median JavaScript Bridge. This powerful API connects your web app to features like:

  • Push notifications
  • GPS location services
  • Haptic feedback and vibrations
  • Biometric authentication
  • And much more

Getting Started with AI Prompts

  1. Open Your Project: Navigate to the project you want to enhance with native features.
  2. Access the AI Assistant: Open your AI app builder's chat interface or assistant panel.
  3. Install the JavaScript Bridge: Use this simple prompt to add the Median JavaScript library to your project:
Please add the Median JavaScript library to this project. I plan to use Median.co to convert this web app into iOS and Android Mobile Apps.

Your AI assistant will find and install the median-js-bridge package. You can verify this by asking the AI to show you your project's package.json file.

⚠️ IMPORTANT: Configure NPM Package Settings in App Studio

After the AI installs the median-js-bridge package, you must update your settings in Median App Studio to prevent conflicts:

Why this matters: By default, Median App Studio automatically injects the JavaScript Bridge into your app. However, since you've now added it as an NPM package in your project, the bridge will be included in your web app's code. Having both would cause conflicts.

What to do:

  1. Log in to Median App Studio
  2. Navigate to your app's settings
  3. Find the "NPM Package" or "JavaScript Bridge" configuration option
  4. Enable the NPM package option (or disable automatic injection)
  5. Save your changes

This tells Median: "Don't inject the JavaScript Bridge—my web app already includes it via NPM."

For detailed configuration instructions, see our NPM Package Documentation.

Once the AI installs the library, you'll have access to dozens of native mobile features. In the following sections, we'll show you exactly which prompts to use to add specific functionality, such as push notifications and haptic feedback.

Step 5: Detect Mobile App Usage

Before adding any native feature, your app must know when it's running inside the native mobile app versus a standard web browser.

Why Detection Matters

Native features only work inside of your mobile app. If you (or the AI) try to call a native feature like median.camera.takePicture() in a web browser, it will fail and likely crash your app.

Detection lets you safely:

  • Show or hide mobile-only buttons and features
  • Provide different experiences for web users (like a standard file upload)
  • Safely call Median's native APIs without errors

Prompt Your AI to Add Detection

To get started, open your AI assistant. Use the following prompt, which specifically requests the officially recommended detection method.

📝 AI Prompt

"I am using Median.co to turn this web app into a native mobile app.

Please create a global JavaScript helper variable or function named isMedianApp. This helper should check if navigator.userAgent.indexOf('median') > -1.

I will use this variable to conditionally show mobile-only features."

What Your AI Will Implement

Your AI will add detection code that looks similar to this. This is the official method for frontend detection as per Median's documentation.

// Detect if running in Median mobile app (Official Method)
const isMedianApp = navigator.userAgent.indexOf('median') > -1;

// You can now use this variable throughout your app
if (isMedianApp) {
  // Show mobile-only features
  // Call Median JavaScript Bridge APIs
  console.log('Running inside a Median native app!');
} else {
  // Show web-only features
  // Use web APIs instead
  console.log('Running in a web browser.');
}

Test Your Detection

  1. Open your app in your normal desktop web browser.

  2. Open the developer console. You should see the message: isMedianApp = false (or your console log Running in a web browser.).

  3. Build a test version of your app in the Median App Studio.

  4. Open your app in the Median simulator or on your mobile device.

  5. Check the remote console. You should see: isMedianApp = true (or Running inside a Median native app!).

Once detection works, you're ready to add other native features.

Other Native Features

The Median JavaScript Bridge provides access to many native device features beyond push notifications and haptic feedback. You can add any of these using the same prompting approach:

Popular features:

  • Geolocation - GPS location, maps, distance tracking
  • Biometric Auth - Face ID, Touch ID, fingerprint login
  • Local Notifications - Schedule notifications without a server
  • In-App Purchases - Sell subscriptions and consumables
  • Analytics - Firebase, Meta, AppsFlyer, custom tracking
  • File System - Read/write files, download/upload
  • Audio - Native audio player and recording
  • Social Login - Google, Apple, Facebook sign-in
  • Deep Linking - Open specific pages from URLs

Use the same prompting pattern: check if the user is in the mobile app with if (typeof median !== 'undefined'), then call the appropriate Median JavaScript Bridge API.

View the complete plugin library: Native Plugins Overview

Updated 9 days ago