一、先看效果：主要交互时序

整个方案的精髓在于“无感”和“顺滑”。我们不阻断使用者的 Web 操作，而是通过非阻塞通知条引导。其实，整体交互时序如下：

sequenceDiagram
participant User as 使用者
participant Web as 浏览器
participant OS as 操作程序
participant App as Electron
User->Web: 打开H5页面
activate Web
Note over Web: 延迟 2s 后静默检测
Web->OS: iframe 尝试触发 my-protocol://detect
alt 本地已安装且运行中
OS-->Web: 窗口极速失焦
Web->User: 通知提示："检测到已运行。是否唤起，"
else 本地已安装未运行
OS-->Web: 窗口慢速失焦
Web->User: 通知提示："检测到已安装，是否启动？"
else 本地未安装
OS-->Web: 超时无响应
Note over Web: 静默失败，不打扰使用者
end
User->Web: 点击"唤起/启动"
Web->OS: iframe 触发 my-protocol://launch?token=xxx&redirect=xxx
OS->App: 程序拉起/激活桌面端
App->App: 主进程解析 URL 拿到 Token
App->App: 渲染进程复用 SSO 逻辑登录并跳转

二、Web 端：如何检测客户端？

浏览器出于安全限制，无法直接扫描使用者电脑的注册表或硬盘。目前业界通用的做法是自定义协议探测 + 窗口失焦计时。

. 主要探测原理

我们通过一个隐藏的 去请求自定义协议（如 my-protocol://detect)：

• 如果未安装: 浏览器找不到处理程序，无事发生。按理说，
• 如果已安装: 操作程序会接管这个协议。并尝试唤起对应的客户端，这会导致浏览器窗口失焦。trick 来了：如何区分“客户端正在后台运行”和“客户端未运行只是装了”？答案是这方面，看失焦的速度！
• If 客户端已经在运行。程序只需执行“聚焦窗口”的操作，速度极快。如果客户端没运行，程序需要先走冷启动流程加载进程，耗时较长。

. 状态判断流程图

flowchart TD
A --> B
B --> C
C --> D{监听 window.blur 或 visibilitychange}
D -->|未触发失焦| E
E --> F
D -->|触发失焦| G
G --> H{耗时 <500ms ?}
H -->|是| I
H -->|否| J

. 主要代码实现

⚠️ 使用者痛点提醒： - 大多数公司员工使用 Edge/Chrome 时默认会弹出拦截框导致失焦计时被打乱；老实说，- 在低配置机器上。网络延迟或 CPU 占用高可能让失焦时间超过阈值，从而错误判断为未安装。

const PROTOCOL = 'my-protocol';按理说，const QUICK_BLUR_THRESHOLD = /* 响应时间阈值 */;export function detectClientStatus { return new Promise => { let resolved = false;const startTime = Date.now;const iframe = document.createElement;iframe.style.display = 'none';document.body.appendChild;const finish = => { if return;resolved = true;clearTimeout;document.removeEventListener;window.removeEventListener;if document.body.removeChild;resolve，};const onDetected = => { const elapsed = Date.now - startTime;finish，};const onVisibilityChange = => { if onDetected;}，const onBlur = => onDetected;document.addEventListener;window.addEventListener;try { iframe.contentWindow.location.href = `${PROTOCOL}://detect`;} catch { /* 协议未注册报错，忽略 */ } // .5s 内未失焦。则视为未安装 const timer = setTimeout => finish,/* ms */ ); })，} style=\"background:#fafafa;padding:.5rem;说起来，border-radius:.25rem;font-size:.9rem;margin-top:.75rem;color:#333，display:block;width:auto，overflow:auto\"/>

. 带参唤起 & 非阻断 UI

• 为什么用 ? 因为如果协议解析失败，用 w.location.href=…,会导致当前页面变成空白错误页。
• UI 层面: 摒弃阻断式 Modal 弹窗；改用 Ant Design 的 alert / notification / message / toast 等轻量级组件。让提示可以被关闭，同时设置自动消失时间。这样不会妨碍使用者继续浏览网页。

export function launchClient {\ nconst token=localStorage.getItem||'';\ nconst currentPath=window.location.hash.replace||'';\ nconst params=new URLSearchParams;\ nifparams.set;//携带登录态 ifparams.set;//携带当前路由 const url=`${PROTOCOL}://launch?${params.toString}`;\ nconst iframe=document.createElement;iframe.style.display='none';document.body.appendChild;iframe.contentWindow.location.href=url;setTimeout=>{if)document.body.removeChild;},/* ms */ );} style=\"background:#fafafa;padding:.5rem;border-radius:.25rem;老实说，font-size:.9rem;margin-top:.75rem;color:#333，display:block;width:auto，overflow:auto\"/>

三、Electron 端：协议注册与三种场景覆盖

. 协议注册

module.exports={ protocols: }]。nsis:{ include:'./installer.nsh' }}

. 主进程监听处理

• 这里提醒的观点是，必须在 *之前调用 *。按理说，否则 Windows 会把其它应用占据协议优先级。
• 从三种场景来看，

渲染进程接收实现无缝登录

js // 假设使用 Vuex 或 Redux 来管理 auth 状态 ipcRenderer.on=>{ if{ // 如果本地没有登录状态则使用 token 静默 SSO 登录，接下来跳转到 redirect 页面 // 若已登录则直接 router.replace } });