Detecting a User’s OS with JavaScript — (Mobile OS Example)

Justen Phelps
Sep 29, 2018 · 6 min read

Recently at work I was given the task of creating a landing page that detects a user’s operating system, and then redirects them to the appropriate app store.

The finished site can be seen here: wheels.co

The finished site

The task turned out to be fairly straightforward and surprised me with the amount of support on Stack Overflow and Github. I will link the sites I used at the bottom this article.

The Problem

A few weeks ago, my CTO called me up and mentioned they had a bit of a problem. The mobile application for the company I work for was due for release the following morning, and they had an empty domain that was being printed on all of our bikes.

They needed a site to direct users from that domain, to the app store for the correct Operating System. So in short, if they were using an iPhone, the website should direct them to the Apple App Store. And if they are using Android, the website should direct them to the Google Play Store.

Google is a Dev’s Best Friend

If a developer tells you he doesn’t copy code, he’s lying. I like to think of each web development project like a huge puzzle, but each piece is hiding, and some of the pieces finish large portions of the puzzle for you. In this case the puzzle was about 90% completed by Github user hkulekci.

Code courtesy of hkulekci

From Top to Bottom:

At the top of the snippet, the comments list five different options for a user’s OS. Unfortunately, iOS and Android are not included, so I had to make some changes later on.

Just beneath the comments, a variable of OSName is declared and set a default value of Unknown OS. By giving OSName a default value, we can still provide a return string if all of our given options fail.

Next, we have four If statements, each depending on a user’s OS. For example, the first If statement checks the OS using the navigator interface in the browser.

The Navigator

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

— Mozilla Developer Network

To view the Navigator object in your browser, open the terminal and type navigator

The Navigator Object

As you can see in the above image, the navigator object has an impressive amount of information about your browser, and the environment running your browser. For our purposes, we will be using the platform property.

The platform property within the navigator object, tells us right away the information we are looking for. “Macintosh” being right at the beginning of the property string, makes this a quick and easy solution if your user is on a desktop or laptop.

However for mobile browsers, “Macintosh” or “Windows” will not work. We need to find what value appVersion returns for mobile browsers.

To Google!

Since we know that navigator.platform returns a string with the OS, we just need to find the right string to enter in our If statement.

For any sort of questions I have regarding JavaScript, I mainly use MDN. The Mozilla Developer Network is an amazing site with all sorts of information regarding all sorts of programming and development information.

Here is the article I found for navigator.platform:

The article is pretty vague but tells us to be cautious, since some browsers could decline to answer. Most of our user’s will not have this issue, so this will still work for now.

In the code provided by hkulekci, navigator.appVersion is being used. However appVersion has been removed from the web standards and is recommended against.

The current options available for navigator.platform:

From: https://stackoverflow.com/a/19883965/10206096

Android

It’s really hard to test for Android devices. Android devices will return Android just as often as some version of Linux. For example on a Nexus 5 phone, both the Android browser and Chrome return Linux armv7l. In rare cases Android devices can even return null (instead of undefined).

  • Android (2008)
  • Linux: see notes above
  • null

Apple

As far as iOS goes: Safari, Chrome and Mercury agree, but Opera messes things up.

  • iPhone (2007)
  • iPod (2007)
  • iPad (2010)
  • iPhone Simulator: simulator shipped with Xcode
  • iPod Simulator: simulator shipped with Xcode
  • iPad Simulator: simulator shipped with Xcode
  • Macintosh
  • MacIntel: Intel processor (2005)
  • MacPPC: PowerPC processor
  • Mac68K: 68000 processor
  • Pike v7.6 release 92: Opera Mini 5 on any iPhone (2009)
  • Pike v7.8 release 517: Opera Mini 7 on any iPhone (2012)

BlackBerry

  • BlackBerry (2003)

FreeBSD

  • FreeBSD
  • FreeBSD i386: x86 (IA-32) processor
  • FreeBSD amd64: AMD x86-64 processor

Linux

Seriously unreliable because so many platforms are built on this. For example, Chrome on ChromeOS or Linux x86–64 both return Linux i686 as that's what they were compiled for.

Note Linux ARM lists architecture flags, e.g. armv5tej would denote a v5 ARM architecture with Thumb support ('T'), a DSP instruction set ('E'), and Jazelle support ('J').

  • Linux
  • Linux aarch64
  • Linux armv5tejl
  • Linux armv6l
  • Linux armv7l
  • Linux i686
  • Linux i686 on x86_64
  • Linux i686 X11: based on X11 Window System
  • Linux MSM8960_v3.2.1.1_N_R069_Rev:18: Sony Xperia V
  • Linux ppc64
  • Linux x86_64
  • Linux x86_64 X11: based on X11 Window System

Microsoft

Even on a 64-bit Windows 8 they all stick to Win32.

  • OS/2 (1994†)
  • Pocket PC
  • Windows
  • Win16: Windows 3.1x (1992†)
  • Win32: Windows 95 and up
  • WinCE

Mozilla

An empty string is returned on Firefox OS. See this bug report.

Nintendo

  • New Nintendo 3DS (2014)
  • Nintendo DSi (2008)
  • Nintendo 3DS (2011)
  • Nintendo Wii (2006)
  • Nintendo WiiU (2012)

OpenBSD

  • OpenBSD amd64

Symbian / S40

  • Nokia_Series_40 (1999†)
  • S60 (2002†)
  • Symbian: Opera on Symbian
  • Symbian OS

Palm

  • PalmOS (1996)
  • webOS (2009)

Solaris

  • SunOS
  • SunOS i86pc
  • SunOS sun4u: SPARC processor

Sony

  • PLAYSTATION 3 (2006)
  • PlayStation 4 (2013)
  • PSP: PlayStation Portable (2004)

Various

  • HP-UX: Hewlett-Packard UniX
  • masking-agent: value changes to this when using Masking Agent for Firefox
  • WebTV OS
  • X11: X11 Window System

Fortunately, most mobile users are either on iPhone or Android, so those are the only two options we will be using.

Using the JavaScript method .indexOf() we can detect whether the correct platform is listed by asking for a few commonly used characters in the OS name.

.indexOf() returns the index of the given string, and returns its value. By using != -1, we can verify that the given value exists within the navigator.platform property.

The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.

—Mozilla Developer Network

If the navigator.platform value matches the condition we set, the return OSName is then set to a specific string we can set to whatever we like! In this case, we just named our OS.

Now let’s add our two mobile OS’ to the code, and adjust navigator.appVersion to navigator.platform.

We could probably get away with ridding the code of the indexOf() method, but I decided to leave it in. Asking for an exact answer would complicate things and cause some issues down the road.

TADA!

Now by using the OSName variable, you can do something like this:

This is a simple usage of this solution, but this can be used for all sorts of situations where OS or Browser type is needed!

If this post was helpful, please click the clap button below a few times to show your support!

Justen Phelps

Written by

Front End Developer from Los Angeles, CA

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade