0

How can website distinguish if you enter the website through Web browser such as Safari and Chrome, or through web View on mobile Application?

I am making web app. but I would like to provide different UI between when you access website with web browser or with mobile application using Web View.

김동현
  • 91
  • 3
  • 14
  • 1
    User agent, screen dimensions/resolution. Custom header request if the app can be installed and it's not native but hybrid. – Adam Azad Jan 22 '17 at 13:33
  • But all what Adam said can be faked, so there is no *guarantee* that a user is *really* requesting the website from a *the* device indicated by headers, etc. – luk2302 Jan 22 '17 at 13:34
  • @PoByBolek it has hardly any relation to .NET – Vladimir M Jan 22 '17 at 14:58
  • @VladimirM maybe not to .NET but the basic principles of detecting a mobile device are certainly the same. – PoByBolek Jan 22 '17 at 22:12

2 Answers2

1

There are two possible approaches:

  1. Browsers as well as "web views" - which are kind-of headless browsers - pass a User-Agent String to your website which should be available in your Server/Programming-Environment. You may analyse those strings and provide a different UI based on that. Search Google for "webview user agent string".
  2. Don't care about the device itself. Provide a different UI based on "features" like screen-size (using CSS Media Queries) and input-method (start your journey exploring Pointer-Events).

Nowadays most Developers will recommend option 2.

Bbak
  • 75
  • 1
  • 4
0

I assume, that you implement mobile application and website yourself and need to detect your own application vs. browser. I've been practicing a different solution for this.

When application runs in the mobile, you can insert a javascript bridge object into the browser's context. When application runs in browser, you check if the javascript bridge object is present and, if not, you emulate it.

All you need it to have a method for both cases something like:

nativeBridge.getClientId();

where for web you will implement it like:

if( !window.nativeBridge ){
    window.nativeBridge = {
        getClientId:function(){ return "web"; }
    }
}

for web view you will have to add a method to the bridge that returns a different constant.

NOTE: 'nativeBridge' is just a name. you may have a different object name.

Vladimir M
  • 4,403
  • 1
  • 19
  • 24
  • Thank you! But I guess it is the way that you change UI on your application. Is there any way that Website knows that user access it through application or through safari? I want to change UI on the website following which way (app VS browser) user access the website, Not changing on the application. – 김동현 Jan 23 '17 at 00:47
  • This is the way, how website detects if the user accesses it from mobile or from some browser, since only hybrid apps will have javascript bridge objects defined before the page is loading. So, first thing your website does is to check if the javascript bridge is defined and what client it is connected from. Depending on the results of the check, website renders differently. But yes, slight changes to the app are needed. Otherwise, it is jsut another browser, as others have mentioned. – Vladimir M Jan 23 '17 at 01:47