# 应用内浏览器与 PWA 安装

> 为来自微信、Instagram 或 TikTok 的访问提供谨慎的安装转接，使用有文档依据的 Safari、Chrome 步骤和可复制网址回退。

对于在微信、Instagram 或 TikTok 内打开的访问，引导用户转到有安装步骤可查的浏览器；所引资料没有记载这些应用内浏览器提供安装命令。

## 平台支持

iPhone 上的 Safari 和 Android 上的 Chrome 都有官方安装步骤。Apple 记录了
Safari 中的 **Add to Home Screen** 和 **Open as Web App**。Google 记录了 Android 版
Chrome 中的 **Install and create shortcut**，随后是 **Install**。微信、Instagram 和 TikTok 内部是否支持安装尚未验证。

## 工作原理

给用户提供浏览器安装步骤和规范网址，方便转到另一个应用后打开。分别检测显示模式和剪贴板访问权；仅凭应用品牌无法判断安装能力。

### 使用有文档依据的浏览器路径

在 iPhone 上，Apple 的路径从 Safari 分享菜单开始。在 Android 上，Google 的路径从
Chrome 地址栏旁的菜单开始。这些说明适用于用户在指定浏览器中打开页面之后，并不描述
应用内浏览器的菜单。

### 保留手动转接路径

把规范网址显示为可选文本。`Clipboard.writeText()` 可用时，点击按钮即可尝试复制。MDN 说明该方法要求安全上下文，并可能以 `NotAllowedError` 拒绝，因此
复制功能不可用或请求遭拒时，网址必须仍可选择。

## 示例

第一个示例判断当前显示模式中是否需要转接帮助。第二个示例提供剪贴板特性检测和手动
回退。

### 在独立模式中隐藏转接帮助

顶层浏览上下文处于 `standalone` 显示模式时隐藏浏览器转接说明，其他模式下显示。

```html
<!doctype html>
<html lang="zh-CN">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>在浏览器中打开</title>
  <p id="handoff">在 iPhone 的 Safari 或 Android 的 Chrome 中打开此网址，以使用有文档依据的安装路径。</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>
```

`else` 分支会保留转接说明。MDN 提醒，显示模式并不直接等同于安装状态，因此文本只指出
有文档依据的路径，不会宣称当前视图可安装或尚未安装。

### 复制规范网址并提供可选择回退

点击按钮后才尝试写入剪贴板。API 缺失或写入失败时，选中可见的网址，供用户手动复制。

```html
<!doctype html>
<html lang="zh-CN">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>复制页面地址</title>
  <label>页面地址 <input id="url" value="https://example.com/app" readonly></label>
  <button id="copy" type="button">复制地址</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 = '地址已复制。';
          return;
        } catch {}
      }

      url.select();
      status.textContent = '复制所选地址，再在浏览器中打开。';
    });
  </script>
</html>
```

没有 Async Clipboard 访问权时，用户仍能手动复制，也无需依赖应用内浏览器启动外部应用。

## 实测行为

:::note
Apple 的 iOS 27 版
[Turn a website into an app in Safari on iPhone](https://support.apple.com/guide/iphone/open-as-web-app-iphea86e5236/ios)
在网站转应用流程中列出了 **Add to Home Screen**、**Open as Web App** 和 **Add**。这些标签只在
页面已经由 Safari 打开之后适用。
:::

## 另请参阅

- [Turn a website into an app in Safari on iPhone（Apple 支持）](https://support.apple.com/guide/iphone/open-as-web-app-iphea86e5236/ios)
- [Use web apps on Android（Google Chrome 帮助）](https://support.google.com/chrome/answer/9658361?co=GENIE.Platform%3DAndroid&hl=en)
- [让它可安装](/zh/guides/installable/)
- [安装提示](/zh/reference/installation/install-prompt/)
- [iOS 与 Safari 上的 PWA](/zh/reference/platforms/ios-safari/)