PWAs on iPadOS

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.

<!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.

<!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>

Warning

MDN’s standalone-app guide 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 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)
• Organize windows with Stage Manager on iPad (Apple Support)
• PWAs on iOS and Safari
• iOS by version
• Make it installable

Specifications

Specification	Status
None.