前端网页如何打开一个PC本地应用

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

针对这个场景产生了一个疑问，网页是如何打开PC端应用的呢？

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

自定义协议

在薄荷FE的平常开发中，由于须要与app频繁交互，app开发人员定义了相关协议：boohee://，经过该协议，咱们能够唤起薄荷app。

经过这个场景做者衍生出一个想法，PC端的应用是否也能够经过相似的协议被打开呢？

Windows

注册表

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

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

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

如何查看注册表中的协议?

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

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

HEY_CLASSES_ROOT

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

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

示例： 打开postman

点击postman文件夹，能够看到右侧有个默认属性定义了URL:postman，导出该注册表能够看到以下配置：

Windows Registry Editor Version 5.00
    
    [HKEY_CURRENT_USER\Software\Classes\postman]
    "URL Protocol"=""
    @="URL:postman"
    
    [HKEY_CURRENT_USER\Software\Classes\postman\shell]
    
    [HKEY_CURRENT_USER\Software\Classes\postman\shell\open]
    
    [HKEY_CURRENT_USER\Software\Classes\postman\shell\open\command]
    @="\"C:\\Users\\X\\AppData\\Local\\Postman\\app-6.0.10\\Postman.exe\" \"%1\""
复制代码

[HKEY_CURRENT_USER\Software\Classes\postman]中的postman就是协议的名字，该配置主要经过[HKEY_CURRENT_USER\Software\Classes\postman\shell\open\command]中定义的地址来找到软件并启动。启动软件主要依赖如下两个配置：

Windows Registry Editor Version 5.00
    
    [HKEY_CURRENT_USER\Software\Classes\postman]
    "URL Protocol"=""
    @="URL:postman"
    
    [HKEY_CURRENT_USER\Software\Classes\postman\shell\open\command]
    @="\"C:\\Users\\X\\AppData\\Local\\Postman\\app-6.0.10\\Postman.exe\" \"%1\""
复制代码

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

• HKEY_CURRENT_USER\Software\Classes\postman: 定义了驱动函数的名字
• HKEY_CURRENT_USER\Software\Classes\postman\shell\open\command：定义了程序所在的路径

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

效果展现：

  

MacOS

在MacOS中打开应用和在Ios中相同，能够给本身的app添加URL Schemes。

Info.plist

每次新建一个项目工程，Xcode都会自动建立一个Info.plist文件，这个文件的主要做用就是提供应用在运行期的一些配置。

Info.plist文件位于应用程序的Contents/子目录下，这个文件保存了应用包的元数据信息。这个文件是必备的，操做系统经过这个文件断定依赖关系和其余属性。

CFBundleURLTypes：这个应用包关联的URL。这是一个字典，指定了这个包处理的URL schemes以及处理方式。

以Foxmail为例，这是该应用相关的配置：

<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLName</key>
			<string>mailto</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>mailto</string>
			</array>
		</dict>
	</array>
复制代码

其中定义了该应用包下定义的URL Schemes为mailto://。

URL Schemes

参考连接：什么是URL Schemes

URL Schemes 有两个单词：

• URL，咱们都很清楚，http://www.apple.com 就是个 URL，咱们也叫它连接或网址；
• Schemes，表示的是一个 URL 中的一个位置——最初始的位置，即 ://以前的那段字符。好比http://www.apple.com 这个网址的 Schemes 是 http。

根据咱们上面对 URL Schemes 的使用，咱们能够很轻易地理解，在以本地应用为主的 iOS 上，咱们能够像定位一个网页同样，用一种特殊的 URL 来定位一个应用甚至应用里某个具体的功能。而定位这个应用的，就应该这个应用的 URL 的 Schemes 部分，也就是开头儿那部分。好比短信，就是sms:

你能够彻底按照理解一个网页的 URL ——也就是它的网址——的方式来理解一个 iOS 应用的 URL，拿苹果的网站和 iOS 上的微信来作个简单对比：

	网页（苹果）	iOS 应用（微信
网站首页/打开应用	www.apple.com	weixin://
子页面/具体功能	www.apple.com/mac/（Mac页面）	weixin://dl/moments（朋友圈）

在这里，http://www.apple.com 和 weixin:// 都声明了这是谁的地盘。而后在 http://www.apple.com 后面加上 /mac 就跳转到从属于 http://www.apple.com 的一个网页（Mac 页）上；一样，在 weixin:// 后面加上 dl/moments 就进入了微信的一个具体的功能——朋友圈。

如何查询app的URL Schemes

打开finder => 应用程序 => 右击应用并选择显示包内容 => 选择Contents文件夹下的Info.plist文件

示例：打开QQ

打开Info.plist，查询CFBundleURLSchemes字段，该字段下定义的内容均可以做为URL Schemes打开应用。

以QQ为例，qq://和tencent://均可以触发打开本地应用。

实例：打开一个本地应用程序

Windows

以网易云音乐为例，根据上述方法，咱们打开注册表编辑器，去查询有没有定义打开网易云音乐的协议，发现相关注册表以下，并无定义打开该应用的协议：

好在咱们在Windows能够自定义一个注册表并使之生效，咱们能够在任何一个位置建立一个**.reg文件，使用记事本进行编辑：

Windows Registry Editor Version 5.00
    
    [HKEY_CLASSES_ROOT\cloudmusic]
    "URL Protocol"=""
    @=""
    
    [HKEY_CLASSES_ROOT\cloudmusic\shell\open\command]
    @="\"D:\\CloudMusic\\cloudmusic.exe\"\"%1\""
复制代码

在此实例中做者将其命名为cloudmusic.reg。

注意：

1. 文件命名与协议名称无关，只与[HKEY_CLASSES_ROOT]后定义的字段有关；

2. @="\"D:\\CloudMusic\\cloudmusic.exe\"\"%1\""中的"%1"为参数，不能随意删除。

保存reg文件以后，双击文件将其中的配置注册到系统中：

添加注册表配置以后，咱们再次进入注册表编辑器中查看，发现相关配置已展现在列表中：

来验证一下是否能打开一个应用：

配置成功！

如何查找应用所在地址

打开菜单找到对应的应用，单击右键选择“打开文件位置”：

找到文件以后单击右键选择“属性”，查看所在系统位置：

属性中的“目标”就是软件所在的系统位置，复制到注册表中便可：

MacOS

在Windows系统中，咱们能够经过注册表来定义打开应用的协议，那么在MacOS中是否也能够经过修改Info.plist来进行配置呢？

以Teambition为例，咱们将如下配置加入它的Info.plist文件中：

<key>CFBundleURLTypes</key>
    <array>
    	<dict>
    		<key>CFBundleURLName</key>
    		<string>teambition</string>
    		<key>CFBundleURLSchemes</key>
    		<array>
    			<string>teambition</string>
    		</array>
    	</dict>
    </array>
复制代码

从新运行该应用，报错提示以下：

在safari中输入teambition://尝试打开，提示以下：

阿欧，配置失败了，咱们没有权限去修改MacOS上的应用。

如何判断自定义协议是否存在

参考指路：使用JS检测自定义协议是否存在

总结

当前端页面须要打开本地应用时，须要先查询本地应用是否有配置协议，若是未配置，在Windows环境下能够经过注册表进行添加，MacOS环境则没法添加。每一个使用者都须要在本身的电脑中进行注册表的配置，局限性较大。

参考文档：

MacOS 开发 - 使用 safari 打开Mac应用

MacOS 给本身的 app 添加 URL Scheme