应用内浏览器与 PWA 安装

对于在微信、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 显示模式时隐藏浏览器转接说明，其他模式下显示。

<!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 缺失或写入失败时，选中可见的网址，供用户手动复制。

<!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 访问权时，用户仍能手动复制，也无需依赖应用内浏览器启动外部应用。

实测行为

注意

Apple 的 iOS 27 版 Turn a website into an app in Safari on iPhone 在网站转应用流程中列出了 Add to Home Screen、Open as Web App 和 Add。这些标签只在 页面已经由 Safari 打开之后适用。

另请参阅

• Turn a website into an app in Safari on iPhone（Apple 支持）
• Use web apps on Android（Google Chrome 帮助）
• 让它可安装
• 安装提示
• iOS 与 Safari 上的 PWA

规范

规范	状态
无。