Chrome浏览器下YouTube自定义协议跳转App失效问题求助

问题原因 #

• 移动端Chrome从较新的版本开始，加入了非用户交互触发的深层链接跳转拦截策略：页面加载阶段自动触发的自定义协议（比如vnd.youtube://）跳转请求会被浏览器直接拦截，只有用户主动点击、触摸等交互事件触发的跳转才会被放行
• 原代码设置的25ms超时时间过短，浏览器还没完成自定义协议的跳转判定，就已经触发了降级逻辑跳转到移动网页版

解决方案 #

方案1：优先使用官方通用链接（最推荐） #

YouTube本身已经适配了Android App Links和iOS Universal Links机制，你不需要自己处理自定义协议跳转逻辑，直接使用YouTube的HTTPS短链即可，移动设备会自动弹窗询问是否打开YouTube App，无需额外兼容代码。

const targetUrl = "https://youtu.be/4KnNVK-udTU";
window.location = targetUrl;

该方案所有主流移动端浏览器都支持，不会被拦截。

方案2：优化原有自定义协议跳转逻辑 #

如果必须要保留自定义协议跳转的逻辑，可以对原有代码做两处优化：

1. 把超时时间从25ms调整为500~1000ms，给浏览器留足够的跳转处理时间
2. 增加页面可见性变化监听，用户跳转到App后自动清除降级的超时任务
   优化后的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            const desktopFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
            mobileFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
            app = "vnd.youtube://4KnNVK-udTU";

            if (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
                let fallbackTimer = window.setTimeout(function() {
                    if (document.visibilityState === 'visible') {
                        window.location = mobileFallback;
                    }
                }, 800);

                // 监听页面切后台/切App事件，清除降级定时器
                document.addEventListener('visibilitychange', () => {
                    if (document.visibilityState === 'hidden') {
                        clearTimeout(fallbackTimer);
                    }
                });

                window.addEventListener('pagehide', () => {
                    clearTimeout(fallbackTimer);
                });

                window.location = app;
            } else {
                window.location = desktopFallback;
            }
        };
    </script>
</body>
</html>

方案3：使用用户交互触发跳转（兼容性最佳） #

如果上述自动跳转的方案依然不稳定，可以放弃页面加载自动跳转的逻辑，在页面上添加引导按钮，用户点击时触发跳转：

<button id="openBtn" style="padding: 12px 24px; font-size: 18px;">打开YouTube查看内容</button>
<script>
const openBtn = document.getElementById('openBtn');
const appLink = "vnd.youtube://4KnNVK-udTU";
const fallbackLink = "https://youtube.com/watch?v=4KnNVK-udTU";

openBtn.addEventListener('click', () => {
    window.location = appLink;
    setTimeout(() => {
        if (document.visibilityState === 'visible') {
            window.location = fallbackLink;
        }
    }, 800);
});
</script>

所有浏览器都不会拦截用户主动交互触发的自定义协议跳转，该方案适配性最高。

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