Detect if page is viewed in samsung stock browser or as a standalone web app

user_4827819 0
Viewed 1153

As the title states, I’m trying to detect if my web page is being viewed as a web page in samsungs stock browser or if it is opened as a standalone web app saved on the homescreen. But the javascript-codes i’ve found for doing that only works for Safari and Chrome as far as I can tell.

Can someone please provide me with a good solution for this?

samsung-mobile css web-applications html javascript
2 Answers

For some reason, window.matchMedia('(display-mode: standalone)').matches is false on a PWA installed by Samsung Internet, even if its display mode is indeed standalone.

However, you can follow the method provided in this answer, which works on Samsung Internet:

Set the start URL in the manifest file to include a query string parameter, ex:

"start_url": "./?mode=standalone"

Then in your JavaScript you are able to check for this query string parameter.

Provided you are in standalone mode, the address bar is not visible to the user, so it would not affect them.

user_29025550

I'm a newbie on PWA, so I had similar trouble with Samsung browser.

looks like it's been about 3 years since many people posted the problem, for me, it was still hard to find a better solution because "start_url" wasn't enough.

I googled and looked into ways to solve this problem and it seems like I did it. Finally, the post resolved my problem.

In my case, I only considered and tested chrome browser, Samsung browser and safari browser. You will be able to customize if you want as I commented on the source code.

const BROWSER_TAB = "browser-tab";
const STAND_ALONE = "standalone";

const getDisplayMode = () => {
  let displayMode = BROWSER_TAB;

  if (window.navigator.standalone || window.matchMedia("(display-mode: standalone)").matches) {
    displayMode = STAND_ALONE; // PWA
  } else if (
    window.screen.height - document.documentElement.clientHeight <
    100
  ) {
    displayMode = STAND_ALONE; // PLAY_STORE, (maybe AppStore as well)
  } else if (
    new URLSearchParams(window.location.search).get("source") === "pwa" // "start_url": "/?source=pwa", from menifest.json
  ) {
    displayMode = STAND_ALONE; // IOS or PWA or PLAY_STORE but it only works on start_url in menifest.json
  }

  return displayMode;
};

I hope this helps even though it's not a perfect solution.

user_44119930
Related