Detect web app running as homescreen app on Android Stock Browser

Question

We are building a web app that has to be used as a standalone / homescreen app. In Chrome and Safari we can detect if it is viewed from the browser or from native-like browser container with either window.navigator.standalone or window.matchMedia('(display-mode: standalone)'). Neither option seems to work with the default Android stock browser/Samsung Internet. Furthermore, we are also not able to use start_url in manifest.json, because we need to pass a token to the homescreen app that is unique per user.

Is it possible to detect if the app is opened from the homescreen when it was added using the android stock browser?

Related

• Check if web app is added to home screen on Android (works only with chrome on android)
• Detect if page is viewed in samsung stock browser or as a standalone web app (unanswered)
• Bug report: Does not detect the display-mode style

Leniency

Hmmm.... does Samsung Internet even support your manifest.json? Unless you're specifically targeting Samsung phones, I'd hope most of them would either have Chrome or Firefox installed -- otherwise, it doesn't look like there's much you can do here. Can you expand on your start_url hangup? Why can't you generate a manifest with user_token=xxx&pwa=true, and then parse that out with JavaScript? – Copeland

The user receives an email with a link containing the user token. That means the user token is only known at the client side at that time. Technically I could use php at the server end to get the user token out of the query string and return it in a custom manifest.json when the client requests it - or maybe even more aweful, set a cookie that is then sent back with the manifest.json call. Neither option is great - or very reliable I think. Currently manifest.json is identical for all users. – Leniency

Probably your best bet, only include your manifest once a user is logged in and include that in your start_url, assuming the token is permanent since you wouldn't be able to launch your installed web app from an email link. – Copeland

Anything supporting your manifest should support matchMedia though.... So I'm guessing Samsung/native Android web is just creating a bookmark-style shortcut? Obviously not an expert here, hopefully someone more experienced can add to this. – Copeland

Interestingly enough it is not a bookmark as it would have the address bar if it was. There is a bug with the display-mode setting of the browser which is causing the issue we are having, but other than that I have not found much else yet. – Leniency

This may be of interest. github.com/SamsungInternet/support/issues/45 – Copeland

Definitely should support it, if you search "Progressive Web App" on their docs, it guarantees support... developer.samsung.com/internet/android/web-guide – Copeland

Answer 1

As far as I can tell, there is no way to directly detect if an app is running in the Samsung Browser, or as a standalone app in the Samsung Browser. The only difference I was able to find is the window.innerHeight, as this does not include the address bar. With window.screen.height one would be able to potentially calculate a ratio. Since this browser can be used across many different devices, this does not necessarily help you. window.innerHeight should be bigger for standalone apps, but you do not necessarily know how big a standalone app is compared to a browser experience.

// Imperfect solution
if ((window.innerHeight / window.screen.height) > 0.9) {
  // Some probability of this being a standalone app.
}

---

A different solution I found was to set the manifest file via javascript, allowing us to set the unique token in the start url for each individual user. This approach has several downsides though. Setting a manifest file through javascript is technically unsupported and when you create a manifest file this way, your app will never be installed as a web apk. Firefox does not support dynamically generated manifest files at all, while ios caches the manifest file which may cause issues on its own. The Chrome devtools will not always display what is in your manifest file either. The following is partly from this medium article.

// This approach has many caveats. Be aware of all of them before using this solution
import manifestBase from '../manifest.json';

const myToken = window.localStorage.getItem('myToken');
const manifest = { ...manifestBase };
manifest.start_url = `${window.location.origin}?standalone=true&myToken=${myToken}`;
const stringManifest = JSON.stringify(manifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
document.querySelector('meta[rel=manifest]').setAttribute('href', manifestURL);

You can get around the problem with FireFox by setting the href attribute of your manifest meta tag to a sensible default. You cannot get around the problem in ios if your unique information changes often.. or even at all. If your start url is not dynamic, do not set the manifest file through javascript at all, but instead set the start url with some information (e.g. the standalone=true query string above) that allows you to distinguish a standalone app from a browser url.

---

One more thing I found is that setting the browser mode to anything else, such as fullscreen does not "fix" the bug with Samsung Browser. It will never set the display mode to anything but a browser, so one is not able to detect it that way either.

Leniency

Answer 2

Here is what I came up with this evening, after banging my head against all the "solutions" I'd found all over the place which just didn't work. My theory here is that the task bar on any phone is 30px or less, so subtract the inner height of the html from the height of the screen, and if left with 30px or less, create fullscreen rules, ex...

     var flScrn = (screen.height - innerHeight );
        if (flScrn < 30) {
            $('.installprompt').css("display","none");
        }

Superintendent

Answer 3

I had the same problem. All the solutions with providing parameters in the start_url parameter of the manifest won't work, because:

• parameters in manifest's start_url will be ignored (didn't found where this is documented, but this was the case in all my tests)
• if the url parameter was passed to the PWA anyway, in Chrome on Android you are not able to store that value in a cookie to being only available for the PWA, because the cookies of the PWA would be shared with the browser as described here:

[How to separate PWA session and cookie with a standalone browser?][1] [1]: How to separate PWA session and cookie with a standalone browser? ( PWA as private tab )

(forget about trying workarounds by using subdomains or something like this, because a PWA does only work exactly on the same domain from where it has been installed).

I came up with a workaround that also worked for the Android Stock Browser (tried on Samsung Galaxy S7 Edge):

1. In the manifest, specify a unique start url for the PWA (because the url parameter would be ignored):

   ...
   "start_url": "/pwa_start",
   ...
   

2. On the page which is defined in start_url, provide a redirect to the actual page you want to be called with an url parameter like this (example in php):

   <?php header('location: /?is_pwa=1'); ?>
   

3. Make the following javascript function being the only method you are using to check whether the site is running as PWA or not, and make sure it is available on all pages of your website and that it's being called at least once on the page you are redirecting to:

   // Return true if the website is currently running as PWA-App, otherwise false
   function isPWA() {
       // Try default method (only true if supported and running as PWA)
       if (window.matchMedia('(display-mode: standalone)').matches) return true;
   
       // Alternative method:
       if (!(window.sessionStorage || false)) return false; // Session storage not supported
       if (self.location.href.indexOf('?is_pwa=1') >= 0) {
           window.sessionStorage.setItem('isPWA', '1');
       }
       return window.sessionStorage.getItem('isPWA') == '1';
   }
   

4. You can further add a css class to your <body>-tag using javascript if the page is running as PWA. This way you can create and use css classes like "hidden-pwa" or "visible-pwa" to show different contents in the PWA and in the browser.

Paean