如何实现PWA点击链接优先打开已安装应用，浏览器作为备选？

问题描述 #

我的PWA里有个页面，列了本机构各社交媒体平台的链接。想要实现：用户点击链接时，优先打开对应的已安装原生应用，只有当应用没装的时候，才用浏览器打开。

之前做原生Android应用时，能通过包名检测应用是否安装，再决定打开应用还是浏览器，现在想在PWA里实现类似逻辑。

试过mailto:、tel:这类URL格式能触发应用选择对话框，但https://的链接不行。目前只能用target="_blank"让链接在默认浏览器打开，而不是PWA内部，但这效果还是不满意。

还发现不同应用表现不一样：比如Facebook链接会先开浏览器再自动跳转到原生应用，Instagram链接却只会在浏览器加载页面，应该是两款应用的URL处理逻辑不同导致的。

想问有没有办法强制系统在应用已安装时直接打开它，或者触发应用选择对话框？

解决方案 #

1. 优先使用Android App Links / iOS Universal Links #

这是目前最可靠的方案，主流社交平台基本都支持这类标准链接：

• 这类链接本身是https://格式，但平台已在系统层面配置了域名与应用的关联。当用户点击链接时，系统会自动检测对应应用是否安装：已安装则直接唤起原生应用，未安装则跳转浏览器加载网页。
• 你只需直接使用平台提供的官方账号链接即可，无需额外修改代码，系统会自动处理跳转逻辑。

2. 自定义URL Scheme 兜底（局限性较大） #

部分平台提供了自定义URL Scheme（例如fb://profile/[ID]、instagram://user?username=[用户名]），可以尝试这种方式实现唤起：

• 实现思路：监听链接的点击事件，先尝试通过自定义Scheme打开应用，同时设置一个短定时器（比如1000ms），如果定时器到期后页面没有被隐藏（说明唤起失败），则跳转对应的https://链接到浏览器。
• 注意：自定义Scheme不属于Web标准，不同浏览器和平台的支持差异大，iOS 9+对这类唤起有严格的交互限制，且无法精准判断是否唤起成功，只能通过定时器做兜底处理。

3. Web Share Target API（补充场景） #

如果你的需求是让用户将内容分享到社交应用，而非直接打开机构账号页面，可以使用这个API：

• 调用navigator.share()方法，系统会弹出包含已安装社交应用的选择器，用户选择后直接打开对应应用并进入分享流程。

关键说明 #

• 你观察到的Facebook和Instagram表现差异，核心原因是前者配置了完善的App Links，系统能自动完成浏览器到应用的跳转；而后者可能因地区、版本或配置问题，未触发自动跳转逻辑。
• PWA无法像原生Android那样直接检测应用包名（Web环境无系统应用列表访问权限），只能通过「尝试唤起+兜底跳转」的方式实现近似的原生应用优先逻辑。

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