3

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?

lormiz
  • 83
  • 6
  • I don't use samsung phone, so i can't test but according to this site: https://developers.whatismybrowser.com/useragents/explore/software_name/samsung-browser/ Samsung browser's user agent is 'SamsungBrowser/version'. On client side you can get user agent with javascript's 'navigator.userAgent' https://www.w3schools.com/jsref/prop_nav_useragent.asp and then parse with regex or split. – Ugur Eren Oct 27 '18 at 07:50
  • I can tell if it is a samsung browser or not, but not the difference if the web page is open in the browser or as a standalone web app. – lormiz Oct 27 '18 at 08:52
  • @TrueTiem You don't need a Samsung phone to use Samsung Internet - it's available for all Android 5+ from the Play Store – poshaughnessy Oct 29 '18 at 09:50
  • Still doesn’t help me though :( – lormiz Oct 29 '18 at 09:51
  • @poshaughnessy actually I wasn't know that :/ Thanks! – Ugur Eren Oct 29 '18 at 10:53

2 Answers2

2

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.

Alex Walker
  • 2,337
  • 1
  • 17
  • 32
1

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.

Yang
  • 618
  • 6
  • 9