Check if web app is added to home screen on Android

Yes, you can.

While technically a page open in Chrome browser tab can't directly check whether a home screen shortcut exists, the page's local data (localStorage, IndexedDB) is shared between home screen instance and browser tabs, so this can be used to communicate the existence of the home screen version.

1. Detect if the app is running from home screen
2. If it's ran from home screen, save this fact to localStorage
3. Profit! (by reading this from localStorage in any tab)

When the app is in standalone view (which is possible only when launched from home screen), the CSS media query (display-mode: standalone) will match. In Javascript you can read it using:

matchMedia('(display-mode: standalone)').matches

(BTW: the non-standard iOS equivalent of this is navigator.standalone, but iOS doesn't share state between home screen and Safari, so you're out of luck there).

However, instead of custom instructions I suggest meeting Chrome's criteria for "progressive web app" and let Chrome do the prompting for you.

You can't check a web app if its added to home screen on android. At least for now. (Chrome 67)

But you can tell if the app is running in standalone mode using display-mode media query.

Add this inside your <style> tag.

@media all and (display-mode: standalone) {  body {    background-color: yellow;  }}

Then in your <script> tag.

if (window.matchMedia('(display-mode: standalone)').matches) {  console.log('display-mode is standalone');}

Or this

if (window.navigator.standalone === true) {  console.log('display-mode is standalone');}

You can check more from here.

The short answer is: from a Web Site you can't.

The longer answer is: from a Web site you might be able to get a hint in Chrome.

Chrome on Android two new features 1) Web App Manifest that describes what should be launched from the home screen and how it should look on the homescreen, and 2) Chrome now has an beforeinstallprompt event that will trigger for Web apps that we think are app-like and can be installed to the homescreen.

There are a number of criteria for the onbeforeinstallprompt event to fire which might make it an "ok" heuristic (although I suspect not).

The event only fires if:

• The site has a manifest, is on https and has a service worker. (this can be quite a stretch).
• The user has engaged with the site multiple times (right now, twice within at least 5 minutes).
• The user has not already added your site to the home-screen.

So, in summary it is complex and full of false positives and false negatives. However if all you want to do is detect if you should display a banner to prompt the user to add your web-app to the homescreen then Chrome already has a solution for you.

We also have a full range of samples on our samples site.