12

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.

Kinlan
  • 16,315
  • 5
  • 56
  • 88
Claes Gustavsson
  • 5,509
  • 11
  • 50
  • 86

5 Answers5

12

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.

Kornel
  • 97,764
  • 37
  • 219
  • 309
  • 1
    The css match worked perfectly for me. Thanks! `@media all and (display-mode: standalone) {.installPrompt{ display: none; }}` – Doug Jan 06 '21 at 05:15
  • What if user uninstalls the app from the homescreen? now in the local storage we have the information that user has the app installed but it's not true anymore. – Tomasz Mularczyk Jul 03 '23 at 12:25
6

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.

ikibiki
  • 136
  • 2
  • 10
  • This also used to work for Firefox, but is currently broken - https://github.com/mozilla-mobile/android-components/issues/8584 – spookylukey May 20 '21 at 13:09
4

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.

Kinlan
  • 16,315
  • 5
  • 56
  • 88
1

I think you can do it. Simply add query string to start_url in manifest.json and in your javascript check if start url is having that query string. If query string is found then yeah app is installed.

wp student
  • 755
  • 9
  • 24
-2

first you get the list of apps on the device

 List<ApplicationInfo> packs = pm.getInstalledApplications(0);

then you use getLaunchIntentForPackage()

Now that you've got the list of packages installed on your device, iterate through them and call getLaunchIntentForPackage() on each item.

If a valid intent is returned, it exists on the Launcher, else if null is returned, the package does not launch from the Launcher screen. Note that Home screen shortcuts are a subset of the Launcher apps.

Ahmed Ekri
  • 4,601
  • 3
  • 23
  • 42