# In-app browsers and PWA installation

> A cautious install handoff for visits from WeChat, Instagram, or TikTok, using documented Safari and Chrome steps plus a copyable URL fallback.

For visits opened inside WeChat, Instagram, or TikTok, direct users to a browser with a documented installation route;
the cited sources do not document an install command in these in-app browsers.

## Platform support

Safari on iPhone and Chrome on Android have documented installation routes. Apple
documents **Add to Home Screen** and **Open as Web App** in Safari. Google documents
**Install and create shortcut**, followed by **Install**, in Chrome on Android. Installation
support inside WeChat, Instagram, and TikTok remains unverified.

## How it works

Explain the browser installation steps and provide a canonical URL that users can carry
across. Test display mode and clipboard access separately; an app brand does not establish
installation support.

### Use a documented browser route

On iPhone, Apple's route starts in Safari's Share menu. On Android, Google's route starts
from Chrome's menu beside the address bar. These instructions apply after the user opens
the page in the named browser; they do not describe the menus of an in-app browser.

### Preserve a manual handoff

Offer the canonical URL as selectable text. When `Clipboard.writeText()` is available,
the page can try to copy it from a button action. MDN states that the method requires a
secure context and can reject with `NotAllowedError`, so the URL must remain selectable
when copying is unavailable or rejected.

## Examples

The first example decides whether handoff help belongs in the current display mode. The
second provides clipboard feature detection and a manual fallback.

### Hide handoff help in standalone mode

Show the browser handoff text unless the top-level browsing context is
in `standalone` display mode.

```html
<!doctype html>
<html lang="en">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Open in a browser</title>
  <p id="handoff">Open this URL in Safari on iPhone or Chrome on Android to use the documented install route.</p>
  <script>
    const handoff = document.querySelector('#handoff');
    const standalone = window.matchMedia('(display-mode: standalone)').matches;

    if (standalone) {
      handoff.hidden = true;
    } else {
      handoff.hidden = false;
    }
  </script>
</html>
```

The `else` branch retains the handoff. MDN notes that display mode does not directly map
to installation status, so the text names the documented routes without declaring the
current view installable or uninstalled.

### Copy the canonical URL with a selectable fallback

Attempt a clipboard write only after a button click. If the API is missing or
the write rejects, select the visible URL for manual copying.

```html
<!doctype html>
<html lang="en">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Copy this page address</title>
  <label>Page address <input id="url" value="https://example.com/app" readonly></label>
  <button id="copy" type="button">Copy address</button>
  <p id="status" aria-live="polite"></p>
  <script>
    const url = document.querySelector('#url');
    const status = document.querySelector('#status');

    document.querySelector('#copy').addEventListener('click', async () => {
      if (navigator.clipboard?.writeText) {
        try {
          await navigator.clipboard.writeText(url.value);
          status.textContent = 'Address copied.';
          return;
        } catch {}
      }

      url.select();
      status.textContent = 'Copy the selected address, then open it in your browser.';
    });
  </script>
</html>
```

Manual copying remains usable without Async Clipboard access. It does not depend on
which external apps the in-app browser can launch.

## Observed behaviour

:::note
Apple's iOS 27 edition of
[Turn a website into an app in Safari on iPhone](https://support.apple.com/guide/iphone/open-as-web-app-iphea86e5236/ios)
lists **Add to Home Screen**, **Open as Web App**, and **Add** in the website-to-app flow.
Those labels apply only after the page is open in Safari.
:::

## See also

- [Turn a website into an app in Safari on iPhone (Apple Support)](https://support.apple.com/guide/iphone/open-as-web-app-iphea86e5236/ios)
- [Use web apps on Android (Google Chrome Help)](https://support.google.com/chrome/answer/9658361?co=GENIE.Platform%3DAndroid&hl=en)
- [Make it installable](/guides/installable/)
- [Install prompt](/reference/installation/install-prompt/)
- [PWAs on iOS and Safari](/reference/platforms/ios-safari/)