Device Info

Collect and process device information to optimize UX

The device info function enables you to gather device information from your users and process it for analytics, insights, feature compatibility, support, and debugging reasons. This function provides detailed data points, including but not limited to:

  • Platform Information (iOS or Android, operating system version)
  • App Information (id, version, build, installation id)
  • Hardware information (hardware, model)
  • Configuration information (carrier, timezone, language)
👍

Developer Demo

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

Why use Device Info?

You can use the data provided by the device info function for the following use cases:

Use CaseExample
First-time User IdentificationIdentify first-time app users to display an onboarding modal
Version ManagementIdentify users on a deprecated / older version of the app to prompt them for an update
Technical SupportUse the platform and hardware information to aid with any tickets and troubleshooting on specific device types

Important Considerations

  • On Android the parameter carrierNames requires the permission READ_PHONE_STATE
  • The median_device_info() function is called by the native app when the page is loaded within the app. This function must be available at the time of page load and cannot be loaded asynchronously or in a deferred manner

Integration guide

Website configuration (JavaScript Bridge)

  • Call each page load: If your website defines a function called median_device_info(), it will get called after every page load as shown below with an object that contains information about your native app and the user's device.
  • Trigger manually: You may also run median_device_info() manually at any time by calling median.run.deviceInfo().
  • Run via a promise: Call median.deviceInfo.then() or use await median.deviceInfo() to return a promise that will resolve with the data.
  • Data processing: You may POST the device data to your server via AJAX, or anything else that's required using JavaScript.
  • NPM Library Helper Method: When using the Median JS Bridge NPM Library you may call the helper function getPlatform() which will return web, ios or android accordingly.

📘

The median_device_info() function is called by the native app when the page is loaded within the app. This function must be available at the time of page load and cannot be loaded asynchronously or in a deferred manner

Example payload

// You define this function on your page, but do not actually call it
// If present on a page it will be called by the app when the page is loaded
function median_device_info(deviceInfo) {
    console.log(deviceInfo);
}

// You may also call the median_device_info function manually, e.g. on a single page web app
median.run.deviceInfo();

// Or return the OneSignal Info via a promise (in async function)
var deviceInfo = await median.deviceInfo();

median.deviceInfo().then(function (deviceInfo) {
  console.log(deviceInfo);
});

// deviceInfo will look like
{
    platform: 'ios',
    SHA-1: 'XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX', // only on Android
    appId: 'io.median.example',
    appVersion:  '1.0.0',
    appBuild: '1.0.0', // will be appVersionCode (number) on Android
    carrierNames: ['AT&T'], // array of all connected mobile carriers 
    distribution: 'release',
    hardware: 'armv8',
    installationId: 'xxxx-xxxx-xxxx-xxxx',
    apnsToken: '<xxxxxxxx xxxxxxxx xxxxxxxx ... >', // only on iOS
    language: 'en',
    model: 'iPhone',
    os: 'iOS',
    osVersion: '10.3',
    timeZone: 'America/New_York',
    isFirstLaunch: false // first time the app is launched
}

Example code implementation: Version enforcement

When deploying new features or critical security updates, you may need to ensure that all users are running a specific version of your native app. Using the Median JavaScript Bridge, you can programmatically retrieve the app version and redirect users to an "Update Required" page if they fall behind your required threshold.

The following script should be placed in your site's <head>. It utilizes Semantic Versioning (SemVer) logic to compare the user's current app version (appVersion) against your required MIN_APP_VERSION.

<script>
  /**
   * Configuration for Version Enforcement
   */
  const MIN_APP_VERSION = "2.3.0"; 
  const REDIRECT_URL = "/update-required.html";

  /**
   * Compares two version strings (e.g., "2.1.0" vs "2.3.0").
   * Returns true if the current version is lower than the minimum.
   */
  function isVersionLower(current, minimum) {
    const c = current.split(".").map(Number);
    const m = minimum.split(".").map(Number);

    for (let i = 0; i < Math.max(c.length, m.length); i++) {
      const cv = c[i] || 0;
      const mv = m[i] || 0;
      if (cv < mv) return true;
      if (cv > mv) return false;
    }
    return false;
  }

  /**
   * Evaluates the deviceInfo object provided by Median.
   */
  function handleVersionCheck(deviceInfo) {
    if (deviceInfo && deviceInfo.appVersion) {
      if (isVersionLower(deviceInfo.appVersion, MIN_APP_VERSION)) {
        // Redirect to a landing page with App Store/Play Store links
        window.location.replace(REDIRECT_URL);
      }
    }
  }

  /**
   * Median Device Info Callback
   * This function is automatically triggered by Median once device data is retrieved.
   */
  function median_device_info(deviceInfo) {
    handleVersionCheck(deviceInfo);
  }
</script>

Robust Version Comparison: Version strings are not simple numbers (2.10.0 is newer than 2.9.0, but a numerical comparison would suggest otherwise). The isVersionLower function splits the string into an array of integers, ensuring that each decimal place is compared accurately.

Using location.replace(): To prevent a "redirect loop," we use window.location.replace(). This ensures that the outdated page is removed from the browser history, so the user cannot navigate back to the app content without updating.

Handling the deviceInfo Promise: Modern implementations return a Promise when calling median.deviceInfo(). Our fallback logic uses .then() to handle this asynchronously, ensuring that the version check occurs regardless of when the script loads.

User Experience (UX): Your update-required.html page should clearly explain why the update is necessary and provide direct deep links to the Apple App Store and Google Play Store to minimize friction.

Example app

iOS Demo

Android Demo