How to detect if web app running standalone on Chrome mobile

javascript android google-chrome mobile mobile-safari
mike nelson picture mike nelson · Jan 14, 2014 · Viewed 30.5k times · Source

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?

Answer

josemmo picture josemmo · Dec 29, 2015

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

Related questions

Failed to construct Notification: Illegal constructor

My site uses desktop notifications which have never worked on mobile devices but I've recently started to receive the following exception in Chrome Version 42.0.2311.108 on Android 4.4: Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead. TypeError: Failed to construct …

Read More
Getting the physical screen dimensions / dpi / pixel density in Chrome on Android

Question Is there a safe way to get the actually correct screen physical dimensions in Chrome, on Android? If necessary, old versions of Chrome and Android can be left out of scope. Prior research There are numerous dead-end questions on …

Read More
navigator.geolocation.getCurrentPosition doesn't work on android google chrome

This code: navigator.geolocation.getCurrentPosition( function(position) { alert(position.coords.latitude, position.coords.longitude); }, function(error){ alert(error.message); }, { enableHighAccuracy: true ,timeout : 5000 } ); https://jsfiddle.net/FcRpM/ works in Google Chrome at my laptop, but on mobile HTC one S (android 4.1, …

Read More