How to detect if web app running standalone on Chrome mobile

Asked
Active3 hr before
Viewed126 times

5 Answers

90%

How can I detect if the app is running as an installed app?,Recently Google has implemented the CSS conditional display-mode: standalone, so there are two possible ways to detect if an app is running standalone:,To detect if it's running on MIT AI2 webview:, Throwing data member's destructor

Using CSS:

@media all and(display - mode: standalone) {
   /* Here goes the CSS rules that will only apply if app is running standalone */
}

Using both CSS and Javascript:

function isRunningStandalone() {
   return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
   /* This code will be executed if app is running standalone */
}
load more v
88%

Chrome mobile has recently added the ability to add to home screen, similar to iOS. This is cool but it doesn't support it as well as iOS - it doesn't support window.navigator.standalone so you can't detect whether you are running as a standalone app.,On other devices, it might be necessary to increase the timeouts. ,Recently Google has implemented the CSS conditional display-mode: standalone, so there are two possible ways to detect if an app is running standalone:,This is kind of a hack, so it might become ineffective in future releases of Chrome.

Using CSS:

@media all and(display - mode: standalone) {
   /* Here goes the CSS rules that will only apply if app is running standalone */
}

Using both CSS and Javascript:

function isRunningStandalone() {
   return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
   /* This code will be executed if app is running standalone */
}
load more v
72%

As suggested on one of the Google Developers sites, one may use search params in start_url of the manifest.json to notify page about that it was launched in standalone mode: start_url: '/?standalone'.,This code don't work on Chrome PWA in 2021,So once feature will became stable (matchMedia('(display-mode)').matches does not works correctly yet), you could (and should) use it from JS to detect standalone mode of the app. And it's safe to include code of display-mode check into your code right now.,Update 1: Added history.replaceState(history.state, '', '/'); for app with hash (#) routing.

// manifest.json
{
   ...,
   "start_url": "/#:standalone:",
   ...
}
load more v
65%

📱 getInstalledRelatedApps can now detect Microsoft Store apps on Windows,getRelatedApps: detect your app, incl. PWA in store but not WebAPK,⭐️App Shortcuts-contextual menus now available on the PWA icon for Android: it's a static list of URLs you define in the Web App Manifest,📱 getInstalledRelatedApps can now detect if your PWA was installed from the browser on Android. You need to specify a related webapp in your manifest and ask the API from within the same scope. I don't understand why you need to specify a related webapp that comes from the same manifest where you define it 🤷‍♂️ (I know it's because of how the spec is defined but it's weird anyway). Have in mind there is no API yet to transfer the navigation to the standalone experience I'd you detect installation.

🕵️‍ Display Override (Desktop-only), a new property supported in the Web App Manifest that overrides the display default fallback chain. You can express an array of possible display values in display_override, in order of preference. If none is supported, the browser will fallback to the display value. For example:

{
   "display_override": ["minimal-ui", "fullscreen"],
   "display": "standalone",
}
load more v
75%

Website should be served fully via HTTPS,Looking to get testing with Progressive Web Apps (PWA) on Google Chrome Browser?  Here’s a quick guide to know how to test PWA on Google Chrome Browser. Google Chrome fire the beforeinstallprompt event to show the Add to Homescreen prompt from Chrome 68.,If your website uses any caching plugins or addon’s or extensions don’t forget to clear the cache before testing. If you are using WordPress, try “Super Progressive Web Apps” on WordPress plugin directory.,I have set all the settings but in mobile add to home screen button not shown and neither its shown in the right side of chrome install site name. I have set in my subdomains.

load more v

Other "undefined-undefined" queries related to "How to detect if web app running standalone on Chrome mobile"