Your app icon is your app’s identity and is used on the device home screen and in other locations such as settings. Upload a PNG or JPG square image to use as your app's launch icon. Recommended resolution is 1024x1024 pixels.

The first step in configuring your app is to add an app icon and splash screen, and to select theme colors aligned with your organization's visual identity.

Configure the splash screen that displays while your app initially launches. Splash screen appearance varies between iOS and Android to meet design guidelines for each platform. The splash screen will display until your webpage finishes loading (when the DOMContentLoaded event fires) so that the transition between splash screen and your app is seamless.

Set default styling options and Light/Dark mode for the device status bar while your app is open. When the status bar is in Light mode it will display with black text, in Dark mode white text, in Auto mode it will follow the device Light/Dark mode setting. You may also customize and dynamically set the status bar visibility and style during runtime from your website using the Median Javascript Bridge.

Set a Primary Color used for text fields and labels, also referred to as the Tint color for iOS and the Accent color for Android.


Your entire app is configured using an appConfig.json file. You may Edit/Import/Export the appConfig.json configuration file for your app. If you need to duplicate an existing app you can simply import the corresponding appConfig.json file.

After making changes to your app configuration press "Rebuild" to rebuild your app files for download. To test your iOS app on a physical device build from source using Xcode, an Apple Developer account is required. Your Android app may be built locally using our included Gradle script or using Android Studio.

Set a Bundle ID and Package Name for publishing. These are identifiers for your app registered with the Apple App Store and Google Play Store. They can be changed for licensed apps at any time before your app is published.

The Median App Studio allows you to configure and re-build your app as many times as required if you have an active Support &amp; Updates plan. Each time you build your app, the latest common Median.co code will be incorporated. Often compatibility issues with new operating systems and specific devices simply requires a rebuild of your app.

To debug JavaScript in your web content from our browser-based simulators first rebuild your app with Web Console Logs enabled. Then, on the simulator panel toggle toggle "Debug Mode" and click "Appetize". The JavaScript console for the app will be shown at the bottom of the window that opens. The "Debug Logs" tab will show the native app log output as well as the web console logs. Note: This option builds an unsigned debug build and must be disabled to build a signed APK/AAB for the Google Play Store.

Add Google Firebase configuration files to your app automatically. Download the GoogleService-Info.plist file for iOS and google-services.json file for Android and either import the files or copy and paste the contents. This feature is available for licensed apps.

Enable advanced offline functionality to allow your app to function offline.

App Interface settings control the functionality of your app, allowing you to optimize the app versus website experience for your users.

Set the default Light/Dark mode for your app. The Auto mode follows the device setting for Light &amp; Dark Mode, but you can set Light or Dark to force a mode irrespective of the device setting. The current mode can also be changed at runtime using the Median JavaScript Bridge.

When enabled the text on pages displayed within your iOS app will adjust in size according to your device's settings using the CSS property -webkit-text-size-adjust

Disable Android system font scaling or set a specific scale irrespective of device and device settings. e.g. 90% for smaller text than default.

Control whether your app is displayed in full screen. This mode can also be set at runtime from your website using the JavaScript Bridge. Note that on Android when full screen mode enabled the keyboard will overlay on top of your web content which can cause issues for users completing forms.

Split View allows multiple apps to be open adjacently. This makes multi-tasking between apps easy so you can increase productivity.

Keep the device screen on all the time for many purposes such as a in-vehicle display app, museum kiosk app, trade show demo, etc. In addition to an app configuration which will be enabled at all times this setting can also be set and cleared via the JavaScript Bridge.

By default your user's default device language will be set within your app for all web content which will then display in the corresponding language in the same manner it is displayed in a regular browser, i.e. if there is an `Accept-Language` header present. The native UI components in the native app layer have been localized to various languages as contributed by customers. These must be selected to enable for your app.

Set a maximum number of windows that are opened simultaneously to improve performance for resource-intensive apps. Once the maximum number of windows has been reached, then previously opened windows will be automatically closed starting with the window that was open first. Enable "Auto Close" so that when your primary website URL (app home screen) is opened, all other previously opened windows will be automatically closed.

With native page transitions enabled a loading spinner will show when loading new pages within your app. The current page will fade out, the loading spinner will be displayed, and then the new page will fade in when it has finished loading.

Customize the offline page that will be shown when your app is offline.

Add pinch-to-zoom functionality so that users can use two fingers to zoom in and out within your app. This feature is disabled by default as in some scenarios the behavior may not be required.

Pull-to-refresh adds the ability for the user to refresh the current page by swiping down from the top of the screen. This functionality can be independently enabled for iOS and Android.

This feature allows you to dynamically set the device screen brightness at runtime. This feature can be used to dim the screen for reading apps, or to brighten the screen to show a QR code for scanning such as a bus pass or hotel booking app.

Control whether the orientation of your app changes automatically as the device is rotated or remains fixed in portrait or landscape mode. Note that Fixed Portrait for iPad will automatically disable multi-tasking.

Add swipe gestures to your app to enable swiping to go back and forward in the navigation history. On Android, arrow indicators will show on the screen to indicate when there is a page available to go back to or to go forward to.

The app's viewport is the visible area of the window where content is visible. To adjust the scale of pages shown within your app, you can force a page width. Before modifying this setting, we first suggest altering the viewport meta tag on your website.

Context menu is a floating menu with a list of actions that shows up when you long press on a link.

Deep Links / Universal Links configure your device to open links pointing to your site in emails/text messages/other websites directly in your app rather than in a mobile browser. This provides a richer native app user experience.

Define rules to control which links open internally within your app, launch within the in-app browser window, or open externally in the device's default browser or app. <b>Rules are applied in order from top to bottom.</b>

Link handling settings control how links on pages are displayed within your app when they are opened. You can also configure deep linking to set links pointing to your website in text messages, emails and on other webpages to open within your app.

By default a URL specified in the window.open() JavaScript function will load in a new window within your app similar to how a browser opens a new tab. When new windows are blocked your app will instead open the URL in the current webview. You can also use the Median Javascript Bridge to manually open and close webview windows.

URL Schemes are an advanced configuration option used to define a non-standard link format that will only open in your app and not in the device browser e.g. youruniquestring://yoursite.com/path. This functionality is helpful in authentication redirect flows or for a more seamless user experience. URL Schemes will only work on mobile devices and are not compatible with desktop browsers. We recommend only experienced developers implement this functionality.

When using the Median JavaScript Bridge NPM package within your web app you must enable this option in the App Studio to prevent the use of your native app's embedded JavaScript Bridge Library and to provide support for listeners. Note that enabling this option in the App Studio without including the NPM package in your web app will cause regular JavaScript Bridge functions and callbacks to not be available.

Add custom buttons to the right side of the Top Navigation Bar and configure them to link to URLs or to run JavaScript commands.

Define a hierarchy for your website so that pages in a higher level will open in a new window within your app versus the current view. The top navigation bar will show a "&lt; Back" button to allow easy navigation back to the same place on the lower level page.

A Bottom Tab Bar menu is the most common native navigation menu component. You can configure your app with multiple tab bar menus to show on different pages and define optional icons and labels for each menu. You can also set and control the tab bar menu at runtime from your website using the JavaScript Bridge.

The iOS Contextual Navigation Toolbar can be enabled and disabled dynamically from your website using the Median Javascript Bridge.

Unlike Android devices iPhones and iPads do not have a built-in back button, which can make navigating your website from within your app challenging. This feature provides a native navigation toolbar that shows on the bottom of the device screen dependent on navigation history and page URL. By default, the toolbar will include a Back button but it can be customized to also show with Forward and Refresh buttons.

Custom navigation icons can be added using Fontello. On the "Custom" tab click "Add Custom Icons" or “Manage Icons” to launch Fontello, and add new icons by clicking the gear icon and then clicking “Import”. We recommend uploading monochrome SVG files between 16x16px and 32x32px in size. Ensure that the CSS prefix is set to "icon-" and "add after icon name" is unchecked. When complete select and highlight the icons you wish to load to your app and then click “Export font” to return to your app. You can then use your custom icons for all native navigation components.

Custom navigation icons can be added using Fontello. Click “Manage Icons” to launch Fontello, and add new icons by clicking the gear icon and then clicking “Import”. Ensure that CSS prefix is set to "icon-" and "add after icon name" is unchecked. When complete select and highlight the icons you wish to load to your app and then click “Export font” to return to your app.

Sidebar menu items can be loaded dynamically from your website using the Median Javascript Bridge. The new menu items can be loaded on specific pages or subsequent to events such as a user login flow. A default menu can be defined in the app configuration that is then overwritten dynamically as required. Or alternatively, the configuration can be left blank and all menus set by the website.

Similar to the Sidebar Navigation Menu, tab menu items can also be loaded dynamically from your website using the Median JavaScript Bridge. The tab menu items can be loaded on specific pages or subsequent to events such as a user login flow.

By default, the Navigation Bar will display the App Name in Text mode. Define rules to display other titles in the Navigation Bar on specific pages or groups of pages. Dynamic Titles can also be set at run time via the JavaScript Bridge.

Native Navigation menus allow you to create a natural native app experience for your users comparable to the most widely used and popular iOS and Android apps. Median supports a Top Navigation Bar, Sidebar Navigation Menu, Bottom Tab Bar Menu, and on iOS a Contextual Navigation Toolbar.

Add a Refresh button to your top navigation bar.

Add a native search form to your top navigation bar.

Add a native Share button to your top navigation bar.

The sidebar visual editor allows you to visually modify icons, labels and links for your Sidebar Navigation Menu. Change menu item order and add groupings which expand and collapse. Menu items can be added to a group by dragging to the right within the visual editor. Note that icons are optional in sidebar menus.

A Sidebar Navigation Menu is a standard navigation feature that is highly configurable. Users access the navigation menu through a "hamburger" toggle button if a Top Nav Bar is enabled, or by sliding from the left side of the screen. The menu items in the sidebar nav menu can be configured with an optional icon and in collapsible groupings. The sidebar menu items can be configured within the app configuration as well as set dynamically via the JavaScript Bridge

iOS colors follow the Branding settings. Android colors are configured independently. The iOS bottom tab bar menu follows Apple's Human Interface Guidelines while the Android bottom tab bar menu follows Google Material Design principles.

iOS and Android styling is configured independently. The iOS sidebar menu follows Apple's Human Interface Guidelines while the Android sidebar menu follows Google Material Design principles.

Configure display settings for text in the top navigation bar and add an optional custom horizontal image. To show different content based on the page being shown in your app, configure Dynamic Titles. Note that for iOS the color of any native UI elements such as the hamburger menu will follow the app-wide Theme colors set on the Branding tab.

Specify icons, text labels, and links to include in each tab menu item. You can create multiple bottom tab bar menus and set different visibility rules to show each menu based on the page that is displaying within your app. Preview your tab bar menus on iOS and Android in Light and Dark mode.

A native Top Navigation Bar can be used to help your users navigate throughout your app. You can display dynamic titles depending on the page being shown. You may also add a search bar form, refresh functionality, and custom buttons. When a Sidebar Navigation Menu is also enabled, a "hamburger" toggle button is shown in the top nav bar to easily open the menu.

Improve app security and meet compliance requirements by detecting when your app is running on an insecure rooted Android device.This module allows you to detect that your user is running on a rooted Android device. It uses a variety of methods, including the presence of certain binaries, apps, and supported URL protocols.

Improve app security and meet corporate IT compliance requirements by adding specific capabilities and functionality to your app.

Meta App Events enable you to view analytics, measure Meta Ad performance, and build audiences for Meta Ad targeting using the Facebook SDK.

Add Microsoft Intune capabilities to your app to support Mobile Device Management (MDM) and Mobile Application Management (MAM) using the Microsoft Endpoint Manager. 

Scan data from Near Field Communication (NFC) tags as part of in-store shopping experience, warehouse tracking, digital+physical game, or any similar use case.

Median’s Social Login Native Plugin facilitates a seamless native login experience for end users using any combination of Facebook Login, Google Sign-in and Sign in with Apple.

Your App Name is displayed on the device home screen.

Email address to receive app testing and download links. We never share with third parties.

A short description of your app for reference purposes. Only used internally and not seen by end users.

A valid email is required to secure access to your app. We never share with third parties.

The Organization account where this new app will reside.

The webpage to display when your app loads.

Configure your app to be compliant with Apple's User Privacy and Data Use Policies using the AppTrackingTransparency Framework.

Background audio permission on iOS allows audio from the app to be played while the app is minimized or backgrounded. Use the Median JavaScript Bridge to start and stop the background audio service to make use of this feature.

Android requires permission to allow downloading to the device public downloads directory. Otherwise, downloaded files will only be accessible within the app.

Apple requires permission descriptions that accurately represent how your app uses device functionality. Update the defaults when necessary to reflect your specific use case.

If your app requires access to the device location in Android, you will need to enable this permission and then call a JavaScript Bridge command to request permission at runtime. For iOS, permission is only prompted at runtime. But to avoid both the app and your website prompting twice for location permission, you will need to use the function median_geolocation_ready() which is called when location services are initialized within the app.

By default all pages that are displayed in your app can access the Median JavaScript Bridge. You may optionally restrict access based on URL paths. This feature should be disabled during debugging.

Some device hardware and functionality requires specific permissions from the user to access within your app. At times, permission requirements can be configured to be prompted when the app is first opened or they can be prompted when required at runtime via the JavaScript Bridge.

You may enable WebRTC permissions within your app to support web-based audio and video applications that use the WebRTC framework. Similar to a standard browser, your app will request microphone and/or camera permission when your WebRTC app requires access.

After purchasing Median's App Store Publishing Service please review the below and provide our team with the information required. During the publishing process it is important to not make changes to your app on our platform or to make changes to your website. Once our team has been engaged all communication with the app store reviewers must be managed by the Median team.

Android notification icons are built into your app and must be a monochromatic image with transparent background.

Median requires just your OneSignal App Id to configure OneSignal to send notifications to your app. You will find this on your OneSignal Dashboard under App Settings -&gt; Keys &amp; IDs.

By default, on first launch your app will automatically register for push notifications and prompt for user consent. When set to manual, you must initiate registration using the JavaScript Bridge.

Optionally include your own custom notification sounds to specify in OneSignal and play on the user's device when the push notification is received. mp3 and wav files are supported.

Control whether notifications are displayed while your app is in the foreground on the user’s device. This setting can be set in advance at build time or changed dynamically at runtime.

In order to support "rich media" notifications on iOS, Apple requires that a Notification Extension be added to your Xcode project.

Use a soft-prompt in-app message to request push notification permission from users with full context before launching the native iOS permission prompt

Your app will integrate with the latest OneSignal SDKs and user-centric data model by default. Legacy mode provides support for OneSignal’s v4 SDKs and their previous device-centric data model. To migrate your app from legacy mode to the latest SDKs disable this setting and refer to OneSignal’s User Model Migration Guide as linked in our documentation.

Send personalized push notifications to your users using OneSignal's user management functionality and logging in the current user using an identifier such as email address or account number. For advanced use cases you can target a specific device using `subscription.id`.

Send personalized push notifications to your users by maintaining a list of device IDs associated with each user within your database, or use OneSignal's external user ID functionality and a user identifier, such as email address or account number.

By default, your app will automatically send device data to OneSignal prior to requesting push notification consent. This includes obtaining a oneSignalUserId which can be used to associate the device and user. To facilitate GDPR compliance, you may set this to manual which will defer sending device data until you obtain consent from the user. You must then use the JavaScript Bridge to confirm consent has been granted and begin transmitting data.

By default your app will automatically prompt the user to allow push notifications on the first launch of the app. You may optionally delay the push notification prompt and trigger manually via Javascript. By default your app will automatically transmit data to OneSignal including obtaining a `oneSignalUserId`. To facilitate privacy policy compliance you may optionally defer communication with OneSignal until consent is provided by the user.

Display a native UI within your app which users can use to toggle OneSignal data tags on/off to self-manage their subscriptions. Host a JSON file which your app will load dynaically at runtime to determine the data tags to display in the UI.

By default, the cookie store in your app will respect the expiry parameters of cookies as received. Using this option you may force the expiry of all cookies to a preset duration. This functionality is useful for extending the duration of login sessions when it is not possible to make changes at the server level.

Custom CSS rules are applied to your website when it is displayed through your app. For instance, within your app you may need to hide navigation elements such as a footer menu or overlay elements such as a chat widget. CSS rules added in the top section are added to both iOS and Android apps.

Your app can be configured to send custom headers to your web server. You can define parameter names and values and use both constant strings as well as device variables.

Enter Custom JavaScript to be injected onto your website pages when they are displayed through your app. For instance, you may find it more convenient to specify JavaScript Bridge commands here rather than adding this code on your website itself. JavaScript added in the top section is injected in both iOS and Android apps or use the platform-specific sections if only needed for one of your apps. Format the JavaScript similar to an external .js file without any HTML or &lt;script&gt; tags.

By default, a string is appended to the end of the device user agent so that you can identify requests originating from your app versus a standard mobile browser. You may choose to customize the string that is appended or provide a complete custom user agent to be used as a replacement instead of the device default user agent. Note that for apps initially created on GoNative.io the default string that is appended includes "gonative" while newer apps include "median".

Hide specific html elements from displaying when pages are displayed through the app. This can be done using a CSS selector such as an ID or Class, e.g. #example_id, .example_class

Web Overrides allow you to control how your website is presented within your app and how your app sends requests to your web server.

Demo

Demo

App to Clone

Website URL

App Name

Contact

Documentation

Simulator