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 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.
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.
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.
Navigatorinterface 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
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.
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.
Here is the article I found for navigator.platform:
Returns a string representing the platform of the browser. The specification allows browsers to always return the empty…
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:
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
Linux: see notes above
As far as iOS goes: Safari, Chrome and Mercury agree, but Opera messes things up.
iPhone Simulator: simulator shipped with Xcode
iPod Simulator: simulator shipped with Xcode
iPad Simulator: simulator shipped with Xcode
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)
FreeBSD i386: x86 (IA-32) processor
FreeBSD amd64: AMD x86-64 processor
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 i686 on x86_64
Linux i686 X11: based on X11 Window System
Linux MSM8960_v126.96.36.199_N_R069_Rev:18: Sony Xperia V
Linux x86_64 X11: based on X11 Window System
Even on a 64-bit Windows 8 they all stick to
Win16: Windows 3.1x (1992†)
Win32: Windows 95 and up
An empty string is returned on Firefox OS. See this bug report.
New Nintendo 3DS(2014)
Symbian / S40
Symbian: Opera on Symbian
SunOS sun4u: SPARC processor
PSP: PlayStation Portable (2004)
HP-UX: Hewlett-Packard UniX
masking-agent: value changes to this when using Masking Agent for Firefox
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.
.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.
indexOf()method returns the index within the calling
Stringobject 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.
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!
Resources used in this article: