PWA Standalone Display Mode

Detecting PWA Standalone Mode

When a Progressive Web App (PWA) is installed on a user's home screen, it can run in standalone mode without browser chrome (address bar, tabs). The display-mode media feature lets you detect this.

The Query

@media (display-mode: standalone) {
  /* Styles for installed PWA */
}

Display Mode Values

• browser -- Standard browser tab (default)
• standalone -- Installed PWA without browser UI
• minimal-ui -- Standalone with minimal browser controls
• fullscreen -- Full screen without any browser or system UI
• window-controls-overlay -- Desktop PWA with custom title bar

What to Customize in Standalone Mode

@media (display-mode: standalone) {
  /* Add top padding for status bar on iOS */
  body { padding-top: env(safe-area-inset-top); }

  /* Hide "install app" banner since already installed */
  .install-prompt { display: none; }

  /* Add custom title bar */
  .app-header {
    -webkit-app-region: drag;
    padding-top: env(titlebar-area-y, 0);
  }
}

JavaScript Detection

You can also detect display mode in JavaScript:

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log('Running as installed PWA');
}

Setting Display Mode

Set the display mode in your manifest.json:

{ "display": "standalone" }