CODEWITHSUNDEEP
javascriptandroidiosgoogle-chromeprogressive-web-apps
Dimitri Kopriwa
Dimitri Kopriwa

Reputation: 14365

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

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 ?

Upvotes: 1

Views: 1224

Answers (1)

Rajesh G
Rajesh G

Reputation: 637

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"

Upvotes: 4

Related Questions