# PWAs on desktop

> How Chrome and Edge install a PWA from the desktop URL bar, what the manifest display fallback chain gives you, and why each browser keeps its own copy.

**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."

```json
{
  "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:

```js
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:

```css
@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](/reference/platforms/windows/) — the Windows platform entry on
  this site.
- [PWAs on macOS Safari](/reference/platforms/macos-safari/) — the macOS Safari
  platform entry on this site.
- [Desktop install](/reference/installation/desktop-install/) — the installation
  entry on this site.