Vue移动端网页访问时跳转对应Android应用或Play商店的实现问询

关于manifest配置的问题 #

你当前vue.config.js里的manifest配置已经符合标准，不需要额外添加manifestOptions属性，主动唤起App、未安装跳转商店的功能需要配合安卓端App Links配置+Vue前端逻辑共同实现。

前置准备：安卓端配置App Links #

要实现站点唤起App，首先要完成安卓端的关联配置：

• 在安卓项目的AndroidManifest.xml中，给需要唤起的Activity添加对应intent-filter，绑定你的移动端站点域名、自定义scheme（比如yourapp://）
• 在你的Vue站点根目录下新建.well-known/assetlinks.json文件，填入和你App签名匹配的校验配置，完成站点和App的关联校验，避免被系统拦截

Vue端实现逻辑 #

可以直接在Vue项目的路由全局守卫或者首页挂载时触发检测逻辑，推荐两种实现方案：

方案1：标准Web API实现（推荐，和现有PWA配置兼容） #

调用navigator.getInstalledRelatedApps()API直接读取manifest中配置的关联应用安装状态，示例代码如下：

// 示例：写在App.vue的onMounted钩子中，或者router.beforeEach全局路由守卫里
async function checkAndOpenApp() {
  // 仅在安卓移动设备环境执行逻辑
  const isAndroid = /Android/i.test(navigator.userAgent)
  if (!isAndroid) return

  if ('getInstalledRelatedApps' in navigator) {
    const installedApps = await navigator.getInstalledRelatedApps()
    // 判断已安装目标App
    const hasApp = installedApps.some(app => app.id === 'com.example.example')
    if (hasApp) {
      // 替换为你配置的App Deep Link链接，直接唤起对应页面
      window.location.href = 'yourapp://home'
      return
    }
  }
  // 未安装/不支持API时跳转Google Play
  window.location.href = 'https://play.google.com/store/apps/details?id=com.example.example'
}

方案2：定时器兜底兼容方案 #

针对不支持上述API的浏览器，可以用跳转超时判断兜底：

function openAppOrStore() {
  const isAndroid = /Android/i.test(navigator.userAgent)
  if (!isAndroid) return

  const startTime = Date.now()
  // 尝试唤起App
  window.location.href = 'yourapp://home'
  // 2秒后如果还在页面，说明未安装App，跳转商店
  setTimeout(() => {
    if (Date.now() - startTime < 2200) {
      window.location.href = 'https://play.google.com/store/apps/details?id=com.example.example'
    }
  }, 2000)
}

注意：部分浏览器会拦截非用户主动触发的跳转，建议在页面上添加「打开App」按钮，用户点击时再触发上述逻辑，拦截概率会大幅降低。

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