前端網頁如何打開一個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