PWAs on desktop

In one line: Installing a PWA on a desktop machine, per MDN, “more deeply integrates the web application on the user’s device” than a bookmark does — it may give the app “its own standalone window”, and on most desktop browsers the install prompt lives in the URL bar rather than in a menu.

Installing from the desktop URL bar

Per MDN, “in Chrome and Edge on desktop, when the user navigates to the page, if the page is a PWA and the PWA is not currently installed by the browser, an installation icon will be visible in the URL bar.” Selecting that icon makes “the browser display a prompt asking if they want to install the PWA, and if they accept, the PWA is installed.” MDN adds that “no matter the browser or OS, the installation needs to be confirmed.”

Once installed, per MDN, “the PWA will behave like other applications that are installed on the OS” — MDN’s own example is macOS, where “the icon will appear in the dock, and will have the same icon options as other applications.” MDN also notes that “the application will be found where the OS saves other applications, within a folder specific to the browser,” and that clicking the icon “opens the PWA, even when the user is offline.”

Installation support on desktop

Per MDN, “installation is supported on all modern desktop and mobile devices,” but “whether the PWA can be installed by the browser on the operating system differs by browser/operating system combination.” MDN’s position:

• “Most browsers support installing PWAs on all operating systems — ChromeOS, macOS, Windows, Android, Linux, etc. — directly or when an extension is installed.”
• “Firefox requires a PWA extension.”
• “Before macOS 14 (Sonoma), PWAs could be installed on macOS from any browser except Safari,” and “PWAs can be installed on macOS 14.0 or later … from any supporting browser.”

Choosing the window: the display member

Per MDN, “the display manifest member is used to specify your preferred display mode for the web application,” and “the display mode determines how much of the browser UI is shown to the user when the app is launched within the context of an operating system.” Its keyword values are fullscreen, standalone, minimal-ui and browser; per MDN, “if not specified, the default value browser is used.”

For a desktop app window, standalone is the value MDN describes as opening “the app to look and feel like a standalone native app,” which “can include the app having a different window and its own icon in the app launcher,” with the browser excluding “UI elements such as a URL bar.”

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "white",
  "description": "A readable Hacker News app",
  "icons": [
    {
      "src": "images/icons/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Per MDN, a browser that “does not support the specified display mode … follows a pre-defined fallback chain: fullscreen → standalone → minimal-ui → browser.”

Detecting and falling back

Per MDN, “the display-mode media feature can be used to configure your application styles and other behavior based on the current display mode,” and — importantly — “the value of the display-mode media feature reflects the actual display mode being used by the browser. This might differ from the mode requested in the manifest, because the browser might not support the requested mode.” Per MDN, Window.matchMedia() “returns a new MediaQueryList object that can then be used to determine if the document matches the media query,” which is how that media feature is read from script:

function isStandaloneDisplayMode() {
  if (!('matchMedia' in window)) {
    // Fallback: matchMedia is unavailable — `standalone` cannot be detected here.
    return false;
  }
  return window.matchMedia('(display-mode: standalone)').matches;
}

if (isStandaloneDisplayMode()) {
  // The display mode in use is `standalone`.
} else {
  // The display mode in use is something other than `standalone`.
}

The same check works from CSS, which is the form MDN documents:

@media (display-mode: standalone) {
  body {
    background-color: #f0f0f0; /* Light grey background for standalone mode */
  }
}

Practical checklist

• The window you asked for is not always the window you get. Beyond the fallback chain, MDN states the browser “may override this display mode for security reasons or provide users with a means for switching to another display mode” — so read display-mode at runtime instead of assuming the manifest value.
• A standalone window is still a browser window. Per MDN, a launched PWA “can be displayed in its own standalone window (without the full browser UI) but it still effectively runs in a browser window, even if the usual browser UI elements, such as the address bar or back button, aren’t visible.”
• Installs do not merge across browsers. Per MDN, “PWAs installed by a browser remain specific to this browser,” so installing the same app from a second browser yields two apps: MDN’s example is installing from Edge, after which “Edge will prompt you to open the PWA when you visit the site while Chrome will continue to prompt you to install the application.” Per MDN, “when multiple instances of a PWA are open, data is not shared between instances installed from different browsers.”
• Uninstall is browser-specific too. Per MDN, “the method used to uninstall the PWA depends on the browser that was used to install it”; installed PWAs “are listed and can be managed by visiting edge://apps” in Edge, and in Chrome by visiting chrome://apps.
• Don’t promise Firefox users a one-click install. Per MDN, Firefox requires a PWA extension, so the URL-bar install icon that Chrome and Edge show is not part of the flow there.

Where to go next

• PWAs on Windows — the Windows platform entry on this site.
• PWAs on macOS Safari — the macOS Safari platform entry on this site.
• Desktop install — the installation entry on this site.