如何用Javascript/PHP实现从PWA打开Android或iOS设备上的指定应用

实现逻辑说明 #

• 该功能完全基于前端JavaScript实现，无需PHP参与，PHP作为服务端语言无法直接控制客户端浏览器的应用唤起行为
• 核心实现原理是调用VerificaC19应用预先向系统注册的自定义Scheme链接，系统识别后会自动调起已安装的对应应用
• 如果用户设备未安装VerificaC19，唤起操作不会有响应，可自行添加兜底逻辑提示用户安装

代码示例 #

HTML按钮代码 #

<button id="openVerificaBtn">打开VerificaC19验证通行证</button>

JS交互代码 #

const openVerificaC19 = () => {
  // VerificaC19官方注册的自定义Scheme协议
  const targetScheme = 'it.ministerodellasalute.verificaC19://';
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

  // 触发应用唤起
  window.location.href = targetScheme;

  // 兜底检测：1.5秒后如果页面还在前台，说明未唤起成功（用户未安装应用）
  const triggerTime = Date.now();
  setTimeout(() => {
    if (Date.now() - triggerTime < 2000) {
      alert('未检测到VerificaC19应用，请先安装后再尝试');
    }
  }, 1500);
};

// 绑定按钮点击事件
document.getElementById('openVerificaBtn').addEventListener('click', openVerificaC19);

注意事项 #

• 上述代码兼容Android、iOS设备的浏览器和添加到桌面的PWA运行场景
• 唤起操作必须由用户主动点击按钮触发，浏览器会拦截非用户交互行为触发的跨应用跳转请求
• Android高版本系统如果出现自定义Scheme被拦截的情况，可改用Android App Links实现，需要在你的PWA站点根目录配置对应验证文件，唤起逻辑和本示例一致
• iOS可搭配通用链接实现更稳定的唤起效果，配置完成后替换示例中的Scheme链接即可

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