如何实现从网站跳转唤起桌面应用，复刻VS Code登录GitHub的交互效果

这个功能的核心依赖操作系统的自定义URI协议（自定义URL Scheme） 实现，类似vscode://、steam://这类专属协议标识，操作系统识别到对应协议的链接被触发时，会自动调用绑定的桌面应用打开，你看到的系统提示弹窗是浏览器触发自定义协议后自带的交互，不需要单独开发。

1. 为桌面应用注册专属自定义URI协议 #

不同操作系统的注册方式不同，你可以把注册逻辑集成到应用的安装流程中自动完成：

Windows系统 #

通过修改注册表实现，示例注册表配置如下（假设自定义协议为myapp://）：

注册表路径：HKEY_CLASSES_ROOT\myapp

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\myapp]
@="URL:myapp Protocol"
"URL Protocol"=""

[HKEY_CLASSES_ROOT\myapp\shell]

[HKEY_CLASSES_ROOT\myapp\shell\open]

[HKEY_CLASSES_ROOT\myapp\shell\open\command]
@="\"C:\\Program Files\\你的应用路径\\你的应用.exe\" \"%1\""

macOS系统 #

修改应用包内的Info.plist文件，添加CFBundleURLTypes配置项：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>自定义应用协议</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

添加完成后，应用首次启动时系统会自动完成协议注册。

Linux系统 #

创建.desktop桌面入口文件，存放于~/.local/share/applications/（当前用户）或/usr/share/applications/（所有用户）目录下，配置示例：

[Desktop Entry]
Type=Application
Name=你的应用名称
Exec=/path/to/你的应用执行文件 %u
MimeType=x-scheme-handler/myapp;

保存后执行命令更新系统配置：update-desktop-database

2. 网页端唤起逻辑实现 #

你只需要在网页自定义弹窗的「打开」按钮点击事件中，触发自定义协议链接即可，浏览器会自动弹出系统提示询问用户是否打开应用。
可选添加未安装应用的兜底提示逻辑，参考代码：

// 打开应用按钮点击事件
document.querySelector('#open-app-btn').addEventListener('click', () => {
    // 自定义协议链接，可拼接参数传递给桌面应用
    const appSchemeUrl = 'myapp://action?param1=xxx&param2=xxx';
    window.location.href = appSchemeUrl;

    // 兜底逻辑：2秒后页面未跳转则判定未安装应用
    const timer = setTimeout(() => {
        alert('未检测到本地应用，请先下载安装后重试');
        // 此处可跳转至应用下载页
    }, 2000);

    // 页面失焦说明应用已唤起，清除兜底定时器
    window.addEventListener('blur', () => {
        clearTimeout(timer);
    }, { once: true });
});

内容的提问来源于stack exchange，提问作者Trang Pham Quynh