# PWAs on iPadOS

> How iPadOS Home Screen web apps are added and detected, plus the documented boundary around multitasking and Stage Manager behavior.

An iPadOS PWA can run as a Home Screen web app in an app-style window with a separate
App Switcher preview. Add it through Safari using Apple's documented steps; WebKit
documents the window and preview behaviour.

## Platform support

WebKit documents Home Screen web apps and third-party-browser **Add to Home Screen**
support for iPadOS 16.4. The third-party path requires Apple's managed web-browser
entitlement and does not apply to a Shared iPad. Safari 26 on iPadOS 26 opens a site added
to the Home Screen as a web app by default; the user can disable **Open as Web App** and
create a bookmark instead.

## How it works

Users add the app through Safari. At runtime, the page can check the `display-mode`
signal documented by MDN. Apple describes multitasking and Stage Manager for app windows
but does not specify how those features apply to Home Screen web apps.

### Home Screen web apps

Apple's iPad guide gives this Safari path: open Share, open the additional actions, choose
**Add to Home Screen**, turn on **Open as Web App**, and choose **Add**. WebKit states that
a Home Screen web app opens like an app and has an App Switcher preview separate from
Safari or another browser.

### Multitasking and Stage Manager

Apple documents Stage Manager as a way to group apps and arrange, resize, and overlap app
windows. WebKit separately documents that a Home Screen web app opens like an app. Neither
cited document specifies how a Home Screen web app participates in Stage Manager or
what multitasking behaviour to expect.

## Examples

The first example makes the document adapt to its viewport. The second tests the
document's display mode without treating display mode as proof that the app is installed.

### Adapting to the viewport width

The CSS changes the layout from two columns to one when the viewport is no wider than
44rem. The threshold and resulting layout are properties of this CSS, independent of the
windowing feature that supplied the viewport.

```html
<!doctype html>
<html lang="en">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive notes</title>
  <style>
    main { display: grid; grid-template-columns: 16rem 1fr; gap: 1rem; }
    @media (max-width: 44rem) { main { grid-template-columns: 1fr; } }
  </style>
  <main>
    <nav aria-label="Notes">Note list</nav>
    <article>Selected note</article>
  </main>
</html>
```

MDN documents media queries as conditional style rules based on media features such as
viewport width.

### Detecting support

The `display-mode` media feature reports how the top-level browsing context is displayed.
Check for `matchMedia` first. If the API is absent, keep the Safari
instruction visible. If it is present, hide the instruction only in `standalone` mode.

```html
<!doctype html>
<html lang="en">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>iPad display mode</title>
  <p id="install-help">In Safari, use Share, then Add to Home Screen.</p>
  <script>
    const installHelp = document.querySelector('#install-help');

    if ('matchMedia' in window) {
      const standalone = window.matchMedia('(display-mode: standalone)');

      function updateInstallHelp() {
        installHelp.hidden = standalone.matches;
      }

      standalone.addEventListener?.('change', updateInstallHelp);
      updateInstallHelp();
    } else {
      installHelp.hidden = false;
    }
  </script>
</html>
```

:::caution
[MDN's standalone-app guide](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Create_a_standalone_app)
states that there is no reliable cross-browser way to determine whether a PWA is installed and
that display mode does not map neatly to installation status. The fallback therefore describes
the documented Safari route rather than declaring the app uninstalled.
:::

## Observed behaviour

:::note
Apple's iPadOS 27 edition of
[Turn a website into an app in Safari on iPad](https://support.apple.com/guide/ipad/ipad8f1f7a29/ipados)
lists **View More**, **Add to Home Screen**, **Open as Web App**, and **Add** in the add
flow. These labels serve as checkpoints for the documented steps.
:::

## See also

- [Turn a website into an app in Safari on iPad (Apple Support)](https://support.apple.com/guide/ipad/ipad8f1f7a29/ipados)
- [Organize windows with Stage Manager on iPad (Apple Support)](https://support.apple.com/guide/ipad/ipad1240f36f/ipados)
- [PWAs on iOS and Safari](/reference/platforms/ios-safari/)
- [iOS by version](/reference/platforms/ios-by-version/)
- [Make it installable](/guides/installable/)