网页如何唤醒桌面应用

设想一个场景，当咱们在浏览一个网页而且须要下载某个资源时，你的电脑可能常常会跳出一个提示框，询问你是否须要打开“迅雷”。当咱们点击“是”，则会唤醒该本地应用进行下载任务。
针对这个场景产生了一个疑问，网页是如何打开PC端应用的呢？

本文针对Windows系统进行讨论。

自定义协议

注册表是Microsoft Windows中的一个重要的数据库，用于存储系统和应用程序的设置信息。

它是Windows操做系统中的一个核心数据库，其中存放着各类参数，能够直接控制一些Windows应用程序的运行。

在Windows环境中，咱们能够经过注册表来定义打开软件的协议。

Windows系统中自带了注册表编辑器，经过Windows+r打开运行，输入"regedit"，打开注册表编辑器。

咱们须要的有关打开应用的注册表配置就存在HEY_CLASSES_ROOT下。

HKEY_CLASSES_ROOT根键中主要包含的是全部启动应用程序须要的信息，其中包括：

• 全部扩展名及应用程序和文档之间的关联信息。
• 全部驱动程序的名字。
• 看成指针的字符串，指向它们表明的实际文件。
• 类标识CLSID，这点在访问子健信息的时候很是重要，由于Windows中访问了子健的信息都是用CLSID来代替的。这里的标识在Windows XP系统中是惟一的。
• DDE和OLE信息。对于每一个文件关联均可以使用DDE和OLE功能。
• 应用程序和文档使用的图标

以vscode为例，当安装vscode时会往注册表中写入应用信息，将其导出看看：

Windows Registry Editor Version 5.00

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

[HKEY_CLASSES_ROOT\vscode\shell]

[HKEY_CLASSES_ROOT\vscode\shell\open]

[HKEY_CLASSES_ROOT\vscode\shell\open\command]
@="\"D:\\软件\\Microsoft VS Code\\Code.exe\" --open-url -- \"%1\""

分析一下上述的配置是什么意思：

• @="URL:vscode"表示打开应用的协议是vscode
• @="\"D:\软件\Microsoft VS Code\Code.exe\" --open-url -- \"%1\""表示应用存储的位置

根据这两个配置，前端网页能够经过vscode://协议来打开本地的vscode应用。

在浏览器地址栏中输入vscode://能够直接代开vscode应用

可是在网页中想打开桌面应用通常不会在当前页或者新打开一个页签在地址栏输入协议，其实可使用一个隐藏的iframe或者设置一个隐藏的a，手动触发

const src = `vscode://xxx?xxx=xxx`;
const iframe = document.createElement('iframe');
iframe.src = src;
iframe.style.display = 'none';
document.body.appendChild(iframe);

唤醒是如何作到免登陆

假设有这么一种场景，用户A在电商平台上看准了商家B挂的货物，但但愿在价格方面跟商家B沟通一下，现不考虑手机、微信以及其余的一些通信方式，用户A只能经过电商平台提供的通信桌面应用跟商家B沟通，如今的问题是用户A触发唤醒通信桌面应用跟商家B沟通时须要登陆，这个登陆环节特别的多余，令人体验很差。

其实能够这样，用户A在触发唤醒时向网关服务受权层请求受权，拿到临时凭证code，将code做为参数加入到唤醒协议连接中，桌面应用客户端收到code便向服务端请求token，拿到登陆状态token后就能够免登陆，请求受保护资源

大体流程以下：

若是唤醒协议连接中须要携带不少参数，那就须要进行hash处理，将参数对象映射成hash值，由于唤起客户端的协议连接是有长度限制

网页唤醒应用并传参实践

参考文章：
前端网页如何打开一个PC本地应用
React + Electron 搭建一个桌面应用