A CSS media feature that reliably indicates whether web content is running in an installed application context.
Today, developers use @media (display-mode: standalone) to detect when content is running inside an installed PWA and apply app-specific styling. However, this approach breaks when the user switches to fullscreen — the media query stops matching because the display mode changes to fullscreen.
The application-context media feature solves this by providing a stable enum signal with values application or none: it evaluates to application whenever the web content is running inside an installed application, regardless of the current display mode. This means your app-specific styles remain applied whether the user is in standalone, fullscreen, minimal-ui, or any other mode.
Usage is simple:
This panel is only visible when you are not in an installed app context. Install this site as a PWA to see the app-specific UI appear and this panel disappear.
This panel is only visible because @media (application-context: application) is matching.
Even if you switch to fullscreen, this panel will remain visible — unlike a
display-mode: standalone query which would stop matching.
Use your browser's install option (look for the install icon in the address bar or the "…" menu) to add this app. Once installed and launched, the "App Context" panel will appear and this prompt will disappear.