Detecting App Usage

It is often required to determine when your website is running within your app versus a standard browser. You may need to determine when the JavaScript Bridge commands are available to interact with the user's device and any native plugins. You may want your website to display differently within the app versus the browser, e.g.

  • limit the pages that are linked and accessible within the app
  • hide your website navigation menus in favor of a native navigation menu
  • hide a website footer to improve the app user interface

1 - Detect the user agent sent by your app

Each time your app makes an HTTP request the app will append a string to the end of the device default user agent. By default the string is gonative though it can be customized on the Website Overrides tab.
iOS app: GoNativeIOS/1.0 gonative
Android app: GoNativeAndroid/1.0 gonative

1a. Detect within your website code using JavaScript navigator.userAgent
1b. Detect the user agent header on your server / web application (e.g. Express)

//JavaScript on your website:
if (navigator.userAgent.indexOf('gonative') > -1) {
  
  //run a JavaScript Bridge command only when in the app
  gonative.module.command({'parameter':'value'});
  
  //hide/show elements within the app
  $('.mobileNav').hide();
  $('.appOnly').show();
  
}
// Node.JS Express App
app.get('/', (req, res) => {
  if(req.header('User-Agent').indexOf('gonative') > -1)
    res.send('App version of website');
  else
    res.send('Browser version of website');
});

2 - Set custom HTTP headers within your app

You may configure Custom Headers on the Website Overrides tab with parameters and values. These headers will be sent with each HTTP request made by your app.

3 - Use a different URL for your app

You may choose to serve a completely different version of your website through your app via a different URL.

e.g. https://app.yoursite.com


Next Steps