Detection

You can detect if the user is using your PWA in the browser or in standalone mode. On Chromium-based browsers (Android and desktop), you can also detect the following events:

• Installation invitation dialog status and result.
• Installation finished.
• Navigation transfer from browser to PWA window and conversely.
• PWA installation status.
• Related app installed from an app store.

You can use this data for analytics, to understand your user's preferences, and to customize their experience. To capture these events, you can use tools such as media queries, events from the window, or using the capabilities APIs that you can find listed here.

Detecting display mode

To track how users launch your PWA, you can use matchMedia() to test the display-mode media query.

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

If you use this example, remember to match the display mode from your web app manifest, for instance, standalone, minimal-ui or fullscreen. You can also match multiple queries in the media query string using comma-separated conditions.

You can also add a query parameter to your manifest's start_url that you can capture with analytics to track stats about when, in what way, and how much your PWA is being used.

App installation

When a user accepts the install prompt in the browser, the appinstalled event fires on Chromium-based browsers. A great use for this event handler is to remove any in-app installation promotion you've added.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

Remember, on Android devices with WebAPK, the event is fired when the user accepts the dialog, and not after the WebAPK is minted and installed. There may be a delay of some seconds before the app is fully installed.

The Installation Prompt chapter explains how to detect if the installation prompt is available and what choice the user makes.

Session transfer

Users can use your PWA within the browser and in the installed standalone form. On desktop browsers, you can transfer the current navigation between these contexts using badges or menu items, as seen in the following image.