介绍

在前端开发中，有时需要网页与本地应用程序进行交互，以提供更加丰富和便捷的用户体验。下面介绍如何使用 Electron 框架创建的本地应用，并在网页端通过调用应用的自定义协议来唤醒本地应用。

自定义协议

本身单凭浏览器是没有唤醒本地应用这个能力的。但是电脑系统本身又可以支持这个能力，就是通过配置自定义协议。

举个例子，当你用浏览器打开一个本地的PDF的时候，你会发现上面是file://path/xxx.pdf，这就是系统内置的一个协议，浏览器可以调用这个协议进行文件读取。那么与之类似的，windows本身也支持用户自定义协议来进行一些操作的，而这个协议就在注册表中进行配置。

自定义协议的作用

注册一个协议到系统协议中, 当通过其他应用/浏览器网页端打开新协议的链接时，浏览器会检测该协议有没有在系统协议中, 如果该协议注册过，然后唤起协议的默认处理程序(我们的应用) 。

实例说明

1.在electron向注册表中写入内容

const appDir = path.dirname(process.execPath);
process.chdir(appDir);// 配置工作目录：防止从地址栏打开应用或者通过网页唤起应用时出现找不到依赖的报错
// 检查是否为默认应用程序
if (process.defaultApp) {
// 如果命令行参数的长度大于等于2
  if (process.argv.length >= 2) {
  // 将当前应用设置为处理 "appserve" 协议的默认客户端，并将第一个命令行参数作为打开应用时传递的参数
    app.setAsDefaultProtocolClient("appserve", process.execPath, [
      path.resolve(process.argv[1]),
    ]);
  }
} else {
  // 将当前应用设置为处理 "appserve" 协议的默认客户端
  app.setAsDefaultProtocolClient("appserve");
}

2.在网页端唤醒应用

window.location.href = 'appserve://open/';