我如何在网站上使用 http url 后备制作跨浏览器原生应用程序 url？

Posted 2023-03-12

【中文标题】我如何在网站上使用 http url 后备制作跨浏览器原生应用程序 url？

【英文标题】：How i can make crossbrowser native-app urls with http url fallback on website?

【发布时间】：2015-04-27 22:05:17

【问题描述】：

当用户点击 url 时，我需要打开 vk.com、facebook、twitter 应用程序，以防安装此应用程序。

否则，应使用 http url 打开新标签。

有一些现成的解决方案吗？

我需要这个才能在 ios、android 和 windows 设备上工作。

【参考方案1】：

这可以使用 URL 方案来完成。不幸的是，不同的操作系统（ios、android 等）为其移动应用程序响应不同的 URL 方案。因此，首先您必须找出用户正在使用的设备。这可以通过使用navigator.userAgent 属性来获得：

var ua = window.navigator.userAgent;

ua 变量是代表用户信息的字符串，例如，他们正在使用哪个浏览器。所以可以使用String的match method来查找具体的值：

var IS_IPAD = ua.match(/iPad/i) != null,
    IS_IPHONE = !IS_IPAD && ((ua.match(/iPhone/i) != null) || (ua.match(/iPod/i) != null)),
    IS_IOS = IS_IPAD || IS_IPHONE,
    IS_ANDROID = !IS_IOS && ua.match(/android/i) != null,
    IS_MOBILE = IS_IOS || IS_ANDROID;

既然您知道用户正在使用哪个设备，您就可以使用正确的 URL 方案。 Android 使用带有 intent:// 前缀的 Intents，而 IOS 使用 appname://parameters 格式。所以，你可以这样做：

if(IS_IOS)
    window.location = "myapp://view?id=123";
else if(IS_ANDROID)
    window.location = 'intent://view?id=123#Intent;package=my.app.id;scheme=myapp;launchFlags=268435456;end;';

您可能希望对 IOS 使用超时（如果未安装应用程序，Android 将带入 Play 商店）以查看应用程序是否已加载。如果应用没有加载，那么您可以将窗口位置设置为您的标准 URL。

这解决了 Android 和 IOS 的问题，但是，它不包括 Windows 移动设备。不过，我确信这是一种类似的方法。我还没有找到任何可以为您抽象和处理此代码的特定库，但实现起来相当简单。

资源/进一步阅读：

How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed URL schemes for iOS and Android (2/2)

【讨论】：

有一个问题：如果未安装应用程序，Safari 将显示此类自定义协议的错误。也许应用链接可能是一个解决方案，但我无法让它们发挥作用。