How to know if I'm runnning my website in th mobile or as a mobile app?

Question

I'll create a webapp of my web. I heard of a lot of services which make it easy:

I want to create mobile apps using tools that wrap HTML5/CSS/JS into a deployable app-store type app, but want to also use the source HTML5/CSS/JS for my conventional website ( AppMakr, AppsBuilder, AppGeyser... )

There is a way to be able to tell from the JS whether it is running in the browser or as a mobile app?

Any tip, help or advice will be appreciated, and if you need more info, let me know and I'll edit the post.

Answer 1

To tell the difference between an http request coming from a mobile application or a mobile browswer you can use the user agent. For safari/ios the respective user agent examples are as follows:

Mobile Browswer:

Mozilla/5.0 (iPad; U; CPU OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari

Mobile App:

Mozilla/5.0 (iPad; U; CPU OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Mobile

The check in this case being for Mobile vs "Version/5.0.2 Mobile/8H7 Safari" on the end.

To make the same check in android, you can do the following:

function() isNativeApp {
    return /AppName\/[0-9\.]+$/.test(navigator.userAgent);
}

On the user agent, when attempting to append the content to a WebView with javascript enabled.

Note that checks for specific user agents are unadvisable as the version numbers are constantly evolving, this is just an example of the logic/information you can use. Browser compatibility libraries like JQuery provide utilities for intelligent "browswer" sniffing, that should allow you to this in a much safer manner than the logic above presents. This is just an overview of the information you're looking for. By the way, checking for specific user agents is a BAD IDEA... okay point made.

References:

Detect inside Android Browser or WebView

Does UIWebView send the same User-Agent in the Request Headers as mobile Safari?