如何从Capacitor应用的网页版检测APP是否已安装？

核心实现方案 #

由于Capacitor的AppLauncher仅在APP原生环境生效，网页端需要采用Web原生方案实现需求：

1. 自定义URL Scheme + 超时检测 #

这是跨平台通用的唤起方案，原理是通过APP注册的自定义协议尝试唤起应用，同时用定时器判断唤起是否成功：

• APP端配置：
  • iOS：在Info.plist中添加CFBundleURLSchemes（值设为你的自定义Scheme，比如myapp），同时在LSApplicationQueriesSchemes中添加该Scheme（iOS 9+强制要求）。
  • Android：在AndroidManifest.xml的主Activity中添加<intent-filter>，处理该Scheme的跳转请求。
• 网页端实现（Vue示例）：

<template>
  <div v-if="isMobile">
    <button @click="tryOpenOrDownload">打开APP</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isMobile = ref(false);
const APP_STORE_URL = '你的App Store链接';
const PLAY_STORE_URL = '你的Google Play链接';

onMounted(() => {
  isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
});

const tryOpenOrDownload = () => {
  const startTime = Date.now();
  // 尝试通过自定义Scheme唤起APP
  window.location.href = 'myapp://';

  // 1.5秒后检测是否唤起成功
  setTimeout(() => {
    if (Date.now() - startTime < 2000) {
      // 未唤起成功，跳转对应应用商店
      const storeUrl = navigator.userAgent.includes('iPhone') ? APP_STORE_URL : PLAY_STORE_URL;
      window.location.href = storeUrl;
    }
  }, 1500);
};
</script>

• 注意事项：超时时间建议设为1200-1800ms，适配不同设备的唤起速度；部分浏览器会拦截自动跳转，务必通过用户点击触发操作。

2. Universal Links（iOS）& App Links（Android） #

这是更优雅的无拦截方案，通过域名关联APP，无需自定义Scheme：

• 配置步骤：
  • iOS：在Apple开发者后台配置关联域名，APP的Info.plist添加associated domains，网站根目录放置无后缀的apple-app-site-association文件。
  • Android：在Google Play Console配置网站关联，APP的AndroidManifest.xml添加<intent-filter>处理VIEW动作与指定域名，网站根目录放置assetlinks.json文件。
• 网页端实现：直接跳转关联的域名路径（比如https://yourdomain.com/app/entry），系统会自动打开已安装的APP；若未安装，用户会留在该网页，此时在页面上引导跳转应用商店即可。

替代流程 #

如果上述方案因浏览器限制、配置复杂度无法落地，可采用以下替代方式：

• 手动引导打开：在网页显眼位置标注「已安装APP？请通过浏览器的「打开APP」提示进入」，并附上操作说明（比如iOS Safari在分享菜单选择「打开APP」，Android Chrome会弹出打开提示）。
• 功能差异引导：突出APP专属功能（如离线使用、推送通知、更快的加载速度），直接引导用户下载，无需检测安装状态，比如在网页顶部固定显示「下载APP享离线缓存」+下载按钮。
• 利用浏览器原生Banner：iOS Safari和Android Chrome支持自动展示APP Banner，只要配置好Universal/App Links并关联应用商店ID，浏览器会自动向用户显示「打开」或「下载」提示，无需额外开发。

内容的提问来源于stack exchange，提问作者Vincentius Daniel