Check if web app is added to home screen on Android

Question

I have a web app and on the Android I would like to display an alert describing how to add my app to the home screen. (Add it to "Bookmarks" and then "Add it to home screen" or "Add to shortcut in Home"). Then a icon will be displayed on the screen that opens my app.

But off course I only want this to show if the app is not added to the home screen.

Does anybody know how to do this? Any input appreciated, thanks.

Answer 1

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.

Answer 2

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.