2

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.

mllamazares
  • 7,876
  • 17
  • 61
  • 89
  • Do you mean browser in the mobile or browser in a PC? – ƒernando Valle Jul 22 '13 at 09:51
  • @tato469 - I think the OP means any browser (mobile or PC) versus running as an app built with tools like [Sencha Touch](http://www.sencha.com/products/touch) or [PhoneGap](http://phonegap.com/about/) - read the second paragraph again. – nnnnnn Jul 22 '13 at 10:02
  • I am not an expert in the field but I think that you have to do 2 web apps in that case. If is not the case you can check here http://www.javascripter.net/faq/operatin.htm you can get the OS of the device. – ƒernando Valle Jul 22 '13 at 10:07
  • I'm not sure how closely those various app-building tools mimic the browser environment, but there might already be some built-in property you can test (see the documentation for whichever tool you settle on). Or you could just add a simple `var isApp = true; // or false` property yourself and set it as part of your build process or something. – nnnnnn Jul 22 '13 at 10:21
  • @nnnnnn Could you expand on the idea, please? – mllamazares Jul 22 '13 at 10:24
  • That's pretty much all there is to the idea. Add a variable like that at the top of your main JS file, and then at the point where you need to test if it is an app or the browser you say `if (isApp) {...`. It doesn't _automatically_ work in that you do need to add that line and set the value, but it is simple to manage... – nnnnnn Jul 22 '13 at 10:28
  • could you please say why you tagged this with accessibility? Please read tag blurbs prior to using them – Ryan B Jul 22 '13 at 13:07

1 Answers1

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?

Community
  • 1
  • 1
MobA11y
  • 18,425
  • 3
  • 49
  • 76