How to detect if web app running standalone on Chrome mobile

Chrome mobile has recently added the ability to add to home screen, similar to iOS. This is cool but it doesn't support it as well as iOS - it doesn't support window.navigator.standalone so you can't detect whether you are running as a standalone app.

The reference says:

How can I detect if the app is running as an installed app?

You can’t, directly.

Notice it says "directly". My question is can we do it indirectly? Is there some tricky way to make an educated guess?

Solution 1:

This answer comes with a huge delay, but I post it here just for other people who are struggling to find a solution.

Recently Google has implemented the CSS conditional display-mode: standalone, so there are two possible ways to detect if an app is running standalone:

Using CSS:

@media all and (display-mode: standalone) {
    /* Here goes the CSS rules that will only apply if app is running standalone */
}

Using both CSS and Javascript:

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

If you need more information, Google Developers has a page dedicated to this topic: https://developers.google.com/web/updates/2015/10/display-mode

Solution 2:

iOS and Chrome WebApp behaves different, thats the reason i came to following:

isInWebAppiOS = (window.navigator.standalone === true);
isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);

Same as here: Detect if iOS is using webapp

Solution 3:

For the IOS we have window.navigator.standalone property to check..

But for Chrome on Android, it doesn't support this property. Only way to check this is by calculating screen width and height.

Below is the code to check that:

navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)

I got reference from below link:

Home Screen Web Apps for Android Thanks to Chrome 31

Solution 4:

An old question but significantly better solutions available today for Chrome Android.

One of the ways(cleanest IMO). You may add Web App Manifest with a 'start_url' key with a value that adds a query string parameter to your usual homepage.

ex:- if homepage url is https://www.example.com. in Web App Manifest set

    "start_url": "https://www.example.com/?user_mode=app"

Google's guide about Web app manifest:https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

Solution 5:

With IOS, localstorage for the standalone and web mode are different. With android KitKat and Chrome, when you save a value in localstorage on the web version, you're able to retrieve it in standalone mode.

So, you just have to save document.documentElement.clientHeight to localstorage when user is browsing the web version (before adding to homescreen). Then, just compare the current value of document.documentElement.clientHeight with localstorage value. If the current value is >, it's standalone mode.

I tried it on several devices.