How to detect that the application is being visited through a homescreen bookmark (embedded)?

问题

The bounty expires in 6 days. Answers to this question are eligible for a +50 reputation bounty. Dimitri Kopriwa wants to draw more attention to this question: “We are trying to detect in javascript on an iPhone 6 if it's an embedded application (PWA) with window.matchMedia('(display-mode: standalone)').matches, that doesn't return true on iOS, only on android with chrome. How can I detect it?”

I am writing a react native application with expo SDK36.

When a user visit the website, the manifest is used with splash and favicon to produce a nice PWA.

If I add a bookmark on my home screen with safari or chrome, I get my application available without any store installation and without the search bar from the browser.

How can I detect that the app is running in an embedded webview ?

回答1:

You can detect whether your web app is running in browser or as standalone using display mode.

If you want to detect the display mode for styling purpose then read here.

Alternatively, you can detect display mode via javascript as below.

  if (window.matchMedia('(display-mode: standalone)').matches) {
                 console.log("This is running as standalone.");
     }

Another simple way is you can append a query string to your start url to detect if, PWA is running.

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

来源：https://stackoverflow.com/questions/59622565/how-to-detect-that-the-application-is-being-visited-through-a-homescreen-bookmar