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 DemoDisplay 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 Case | Example |
|---|---|
| First-time User Identification | Identify first-time app users to display an onboarding modal |
| Version Management | Identify users on a deprecated / older version of the app to prompt them for an update |
| Technical Support | Use the platform and hardware information to aid with any tickets and troubleshooting on specific device types |
Important Considerations
- On Android the parameter
carrierNamesrequires the permissionREAD_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 callingmedian.run.deviceInfo(). - Run via a promise: Call
median.deviceInfo.then()or useawait median.deviceInfo()to return a promise that will resolve with the data. - Data processing: You may
POSTthe 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 returnweb,iosorandroidaccordingly.
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
Updated 25 days ago