Skip to content
知识库

网页如何唤醒本地程序

URL protocol 是一种协议，常用的有 HTTP、HTTPS，我们可以自定义协议，允许 web 页面通过自定义协议来唤醒本地程序，并发送数据，借助 URL protocol 我们可以在浏览器打开本地的软件

实现原理

Windows

在 Windows 中，通过注册表来实现。打开 Windows 注册表（通过 Win+r 打开运行，输入”regedit”，或者通过搜索“注册表编辑器”）

在 HKEY_CLASSES_ROOT 可以找到各个应用的配置，如下所示，是 vscode 的注册表配置，你可以在浏览器使用 vscode:// 来打开该程序

自定义协议

我们可以在 HKEY_CLASSES_ROOT 下创建自定义的协议。首先将我们刚刚在 HKEY_CLASSES_ROOT 内找到 vscode 的协议配置导出，命名为 custom.reg，并用文本编辑打开该文件，在此基础上可以进行修改

Windows Registry Editor Version 5.00


[HKEY_CLASSES_ROOT\custom]  # 注册表名称，修改为custom
"URL Protocol"=""
@="URL:custom" # 协议名称，修改为custom，即可以使用 custom:// 来唤醒本地程序


[HKEY_CLASSES_ROOT\custom\shell]


[HKEY_CLASSES_ROOT\custom\shell\open]


[HKEY_CLASSES_ROOT\custom\shell\open\command]
@="\"D:\\Tools\\Microsoft VS Code\\Code.exe\" \"--open-url\"  \"--\" \"%1\"" # 本地程序运行路径

修改完成并保存后，右击注册表编辑器打开，确认后即可添加到注册表

此时，即可使用 custom:// 在浏览器中打开 vscode 了

picture 1

Macos

在 Macos 中，使用 Info.plist 来添加 URL Protocol，该文件位于每个应用的文件夹下，在 Applications 目录下可以使用右击打开程序，找到Info.plist

在 Info.plist 中，关键注册代码如下，直接在文件内修改 <string>vscode</string> 至 <string>custom</string> 不会生效

<key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Viewer</string>
      <key>CFBundleURLName</key>
      <string>Visual Studio Code</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>vscode</string>
      </array>
    </dict>
  </array>

Electron

使用如下 electron API 可以注册 URL protocol

const { app } = require("electron");


app.setAsDefaultProtocolClient("my-app"); // 使用 my-app:// 即可打开该程序
// 可以接收传参
app.on("open-url", (event, url) => {});