Detect web app running as homescreen app on Android Stock Browser
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.