How to detect if web app running standalone on Chr

问题:

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?

回答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

回答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

回答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

回答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/

回答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.

回答6:

For Google Chrome (Android) from version 39 onwards with web application manifest (json) and in case, it is a single page application, I use this 'trick':

In the manifest.json I put: "start_url": "standalone.html".

Normally it is (in my case index.html), but from index.html I make an identical clone: standalone.html (or whatever you fancy).

Then, to check, I use Javascript like this:

var locurl = document.location.href;
if (locurl.indexOf("standalone.html") != -1) {
    console.log("app is running standalone");
} else {
    console.log("app is running in normal browser mode");
}

That works.

It might work too in Google Chrome (mobile) version 31-38 with this meta-tag:

<meta name="application-url" content="http://my.domain.com/standalone.html">. Not tested, yet.

回答7:

To detect if it's running on MIT AI2 webview:

if (typeof window.AppInventor!="undefined") { return true; }

回答8:

There is no 'proper' way to do it on Android, hence no API support yet. The workaround we used in my company -

1. On first login, store screenheight in localstorage. By screenHeight i mean document.documentElement.clientHeight before page loads, since then doc grows and its not accurate measure for real available screen height.

2. Whenever user logs in next time - check current screenheight vs stored - if it becomes bigger, the user has gone fullscreen.

There is no scenario upon which it can become smaller, IF YOU DO store FIRST TIME value for screen height.

Caveat - user that will clean cash. We chose to ignore that, since most users don't do it or do it relatively rarely, and it will suffice(in our opinion) for some time until there will be API fix for this( hopefully there will be :) )

Option b - check available screenheight vs device screen height, the matchup for a few test devices & browser modes showed some pattern( available height < 70 in webapp) - i strongly believe a wider comparison can get values that will suffice for 90% of devices in 90% cases.

All of this is a workaround, of course, i m not pretending its a solid stable way to get to desired functionality - but for us it worked, so i hope this helps somebody else who fought this bug(cant call missing such crucial api feature other way). Good luck :)