Detecting the app

When displaying your website inside an app, often times you will want to either display or hide certain elements in the app only.

There are a few different ways of achieving this, the two best approaches when using MobiLoud are described below:

  1. Create a separate page on your website, to be used in the app specifically, e.g. https://yourwebsite.com/app
  2. Detect the user agent using Javascript

If you are not familiar with what a user agent is you can find more details clicking here, but to simplify, whenever your browser, or app, makes a request to your website to pull its content, they include a string into it, which looks like this:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

That string includes details that can be used to identify the system and browser used to perform the request.

Whenever a request is performed from the app, to your website, it will include “canvas” in that string, so it will look like this:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0 canvas-ios

This allows us to easily detect the app using a small piece of Javascript, as you can see below:

<script type="text/javascript">
// Get the current user agent
const isApp = navigator.userAgent.toLowerCase().indexOf('canvas') > -1;

// Check if the user agent contains the canvas string
if (isApp) {

    // Outputs custom CSS in the app only
    document.head.innerHTML += '<style>footer, sidebar { display:none !important; }</style>';

}
</script>

Related Articles