Definition

Standalone mode detection

Short definition

Standalone mode detection means checking, at runtime, whether the current page is running as an installed app rather than a regular tab. On Chromium and most browsers this is window.matchMedia("(display-mode: standalone)").matches; on iOS Safari the historical equivalent is the non-standard navigator.standalone boolean, since iOS predates the display-mode media feature's adoption there.

Reviewed August 9, 2026

A combined cross-platform check commonly looks like: const isInstalled = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;, covering both the standards-based and the iOS-specific signal.

This detection is typically used to hide "Install this app" prompts once the user is already inside the installed experience, and sometimes to adjust UI — for example, hiding a redundant browser-style back button that would duplicate OS-level back gestures.

The display-mode media query also matches fullscreen and minimal-ui, not just standalone, so a query like "(display-mode: browser)" — which is true precisely when none of the app-like modes apply — is the more reliable way to detect "definitely NOT installed" if that is what the logic actually needs.

Detection can only run after the page has loaded in its actual context; there is no reliable way to know in advance, before installation, whether a *future* launch will be standalone, which is why this check is purely a post-hoc runtime signal, not a predictive one.

Related terms

display-mode media query

display-mode is a CSS media feature, usable both in stylesheets (@media (display-mode: standalone) { ... }) and in JavaScript via window.matchMedia("(display-mode: standalone)").matches, that reports which of browser, minimal-ui, standalone or fullscreen is currently applied to the page — regardless of what the manifest requested, since the OS can downgrade the requested mode.

Standalone display mode

Standalone is a value of the display field in a Web App Manifest. It tells the browser to launch the PWA in its own window with no address bar or tabs, so it looks and behaves like a native app. It is the most common display mode for installable PWAs.

appinstalled event

appinstalled is a window event, listened for with window.addEventListener("appinstalled", () => { ... }), that fires after the browser has finished installing the PWA — regardless of whether the install was triggered via the native beforeinstallprompt flow or a browser menu item. It fires exactly once per successful install and carries no event detail beyond the fact that installation completed.

Safari share sheet install

On iOS, installing a PWA requires the user to manually tap the Share icon in Safari's toolbar, then choose "Add to Home Screen" from the resulting menu — there is no beforeinstallprompt equivalent, no browser-generated install banner, and no way for a site to trigger this flow programmatically.

PWA install criteria

Chromium's PWA install criteria require: the site served over HTTPS; a linked Web App Manifest with at least a name (or short_name), a 192x192 and 512x512 icon, a start_url, and a display value of standalone, fullscreen, minimal-ui or a display_override entry; and a registered service worker with a fetch event handler, even a minimal pass-through one.

Lighthouse PWA audit

The Lighthouse PWA audit, run from Chrome DevTools' Lighthouse panel or the lighthouse CLI, checks a page against Chromium's installability criteria — valid manifest fields, icon sizes, registered service worker, HTTPS — and flags exactly which checks pass or fail, rather than giving a single opaque score for the category.