It seems impossible to directly detect whether an app is running in the Samsung Browser or as a standalone app within the browser. The only indicator I could find is the difference in window.innerHeight, which does not account for the address bar. By comparing it to window.screen.height, one might be able to estimate a ratio. However, this method is not foolproof due to the variety of devices the browser can be used on. Standalone apps should have a larger window.innerHeight, but without knowing the specific dimensions of each, it's difficult to determine.
// Possible solution, albeit imperfect
if ((window.innerHeight / window.screen.height) > 0.9) {
// There is a chance this is a standalone app.
}
Another approach I came across involves dynamically setting the manifest file using JavaScript, enabling the inclusion of a unique token in the start URL for individual users. Despite its potential benefits, this method has its drawbacks. Creating a manifest file through JavaScript is technically unsupported and may prevent your app from being installed as a web APK. Firefox does not support dynamically generated manifest files, while iOS caching may lead to its own set of issues. Additionally, Chrome DevTools may not always accurately reflect the content of your manifest file. Some inspiration for this can be drawn from this Medium article.
// This approach comes with several limitations. Proceed with caution.
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);
To address the issue with FireFox, it's recommended to set a sensible default value for the href attribute of your manifest meta tag. On the other hand, if the unique information in your start URL changes frequently, handling it in iOS may pose challenges. If your start URL remains static, it's advised not to use JavaScript to set the manifest file, but rather include distinguishing information (like the standalone=true query string) that differentiates a standalone app from a regular browser URL.
Furthermore, altering the browser mode to settings such as fullscreen does not resolve the issue with the Samsung Browser. It always retains the display mode of a browser, making it tricky to differentiate it from other modes based on this criterion alone.