Electron網頁調起客戶端(偽協議)

相信大家平時使用瀏覽器時遇到過點選一個連結或者按鈕，瀏覽器會詢問是否開啟客戶端，移動端和桌面端都有這種情況。比如百度網盤，在網頁上點選連結時會拉起百度網盤的客戶端進行下載，實際上這些功能都是通過註冊偽協議來實現的，本篇主要介紹如何通過偽協議調起Electron客戶端，並獲取偽協議傳過來的引數。

實現目標

1. 為Electron新增一個偽協議(URL Scheme 協議)。
2. 在瀏覽器網頁上新增一個偽協議的點選。拉起應用。

Mac的URL Scheme

Mac上每個應用包中都有一個info.plist檔案，這個一般用作於一些訪問許可權的配置及軟體的資訊，ios開發的同學可能比較熟悉，註冊URL Scheme

1. 訪達中找到桌面軟體，比如vscode。
2. 右鍵顯示包內容。
3. 進入Contents資料夾。
   
4. 找到info.plist，直接點選檢視或者用vscode開啟，這個CFBundleURLName就是協議名，CFBundleURLSchemes為協議內容
   
   
5. 瀏覽器輸入對應的URL Scheme，vscode://file/${filePath}，filePath為檔案的pwd路徑,看是否vscode能開啟對應文件。

Windows的URL Scheme

Windows上是通過在登錄檔中新增URL Protocol來實現偽協議的，其實說簡單點也是新增key，value值。同上，我們檢視一下vscode：

1. win+r輸入regedit確定。
2. 找到HKEY_CLASSES_ROOT\\vscode，不好找的可以Ctrl+F勾選資料進行搜尋\'URL:vscode\'，可以找到兩處HKEY_CURRENT_USER\\Software\\Classes\\vscode，當然這兩處值都是一樣的。
   
   

3. 我們可以右鍵vscode目錄將其匯出成一個reg檔案，可以看到關鍵處在兩點，一個URL:vscode，還有一個是vscode的啟動路徑。
   也就是說檢測到vscode://會執行下面的exe命令，%1是喚起軟體的偽協議，瀏覽器開啟vscode://file/${filePath}試試，比如我的vscode://file/F:/work/electron/vue-cli-electron/README.md

   ，看是否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]
   @=\"\\\"E:\\\\Microsoft VS Code\\\\Code.exe\\\" --open-url -- \\\"%1\\\"\"

實現URL Scheme

這裡介紹一下Electron上實現偽協議的兩種方式：

1. 通過setAsDefaultProtocolClient註冊協議

這個要講的不多，看文件的東西連結，在主程序直接寫上就可以：

import { app } from \'electron\'

if (!app.isDefaultProtocolClient(\'vue-cli-electron\')) {
  app.setAsDefaultProtocolClient(\'vue-cli-electron\')
}

打包後安裝軟體，開啟軟體，嘗試在瀏覽器中開啟vue-cli-electron://，看是否有喚起提示。

優點：簡單，快捷。
缺點：首先這個是在主程序中執行的，也就是說首次安裝軟體後必須開啟軟體後才會寫入對應的URL Scheme，軟體解除安裝時Mac的info.plist在包內，一起刪除了，但Windows是寫入登錄檔的，並不會被主動清理，解除安裝軟體後再開啟偽協議還是會有開啟軟體的提示。

1. electron-builder + nsis

使用electron-builder進行配置在可以打包（安裝）時就寫入偽協議，並且可以在解除安裝的拓展巨集裡進行登錄檔的清理，使用此方式的話，方案1的註冊可以除去掉。

• Mac配置：在vue.config.js中的builderOptions新增electron-builder的配置連結：

  protocols: [{
  name: \'vue-cli-electron\',
  schemes: [\'vue-cli-electron\']
  }],

  這裡要注意的是文件展示有點問題，fileAssociations和protocols是屬於同級的，並不是fileAssociations裡面的。這樣我們就完成了Mac系統偽協議的配置。

• Windows配置：在專案根目錄新建installer.nsh，同樣的在builderOptions的nsis中新增include: \"installer.nsh\"

  !macro customInstall
    DeleteRegKey HKCR \"vue-cli-electron\"
    WriteRegStr HKCR \"vue-cli-electron\" \"\" \"URL:vue-cli-electron\"
    WriteRegStr HKCR \"vue-cli-electron\" \"URL Protocol\" \"\"
    WriteRegStr HKCR \"vue-cli-electron\\shell\" \"\" \"\"
    WriteRegStr HKCR \"vue-cli-electron\\shell\\Open\" \"\" \"\"
    WriteRegStr HKCR \"vue-cli-electron\\shell\\Open\\command\" \"\" \"$INSTDIR\\${APP_EXECUTABLE_FILENAME} %1\"
  !macroend
  
  !macro customUnInstall
    DeleteRegKey HKCR \"vue-cli-electron\"
  !macroend

  這裡簡單介紹一下，customInstall是electron-builder提供的NSIS拓展巨集，看名字這個是安裝時執行的，同理customUnInstall是解除安裝執行，其他情況參考連結
  DeleteRegKey是刪除登錄檔
  HKCR即我們上面說的HKEY_CLASSES_ROOT的簡寫，HKCU->HKEY_CURRENT_USER，HKLM->HKEY_LOCAL_MACHINE，HKU->HKEY_USERS
  WriteRegStr是寫入登錄檔
  $INSTDIR是我們選擇的安裝路徑
  ${APP_EXECUTABLE_FILENAME}是軟體exe名

好了，現在我們可以打包安裝，嘗試在瀏覽器中開啟vue-cli-electron://，Windows解除安裝軟體後再在瀏覽器中開啟vue-cli-electron://看還會有提示沒有。
優點：萬金油模式，自由度大，功能全面。
缺點：麻煩，需要一定的nsis知識。

開發環境配置偽協議

上面兩種方式都說完了，這算是一個補充吧，畢竟我們在開發時不可能寫一點就打個包測試，挺費時間的。
我們在開發時一般直接使用setAsDefaultProtocolClient進行偽協議設定，但是設定後在開啟網頁上的偽協議連結時會報一個錯誤，但是打包後又是好好的，這是什麼造成開發和打包之後的差異呢？
這裡就補充一個知識點，我們的開發環境是怎麼啟動的，我們可以列印一下process.argv，這個就是Electron的啟動引數，我們可以看到開發環境是（Mac同理，路徑不同）：

[
  \'F:\\\\work\\\\electron\\\\vue-cli-electron\\\\node_modules\\\\electron\\\\dist\\\\electron.exe\',
  \'dist_electron\'
]

看到這裡大多數同學可能已經明白了，開發環境是啟動一個node包的exe，然後傳入我們webpack構建好的目錄而啟動的服務，而這個引數在打包後則是軟體的exe檔案

xxxxxxxx\\\\electron開發.exe

我們看一下完整的偽協議app.setAsDefaultProtocolClient(protocol[, path, args])，protocol是協議名，path是Electron可執行檔案路徑（也就是exe地址，預設process.execPath），args傳遞給可執行檔案的引數，預設為空陣列。
那麼也就得出答案了：

app.setAsDefaultProtocolClient(\'vue-cli-electron\')
這個註冊時只有protocol和path，故在開發環境通過vue-cli-electron://啟動時，只啟動了那個node包的exe，我們後面的構建目錄並沒有在註冊時寫入。

那麼我們只需要進行一下判斷，把這個目錄追加到args裡即可

if (app.isPackaged) { // 是否處於打包
  app.setAsDefaultProtocolClient(\'vue-cli-electron\')
} else {
  app.setAsDefaultProtocolClient(\'vue-cli-electron\', process.execPath, [
    path.resolve(process.argv[1])
  ])
}

注：如何你開發的協議和打包後的協議名一樣的話，同時都啟動的話，呼叫偽協議可能會啟動到開發的哦，現在試試本地開發能否通過偽協議拉起我們的客戶端。

本來想把如何獲取偽協議連結中的引數也放在這一期的，但是感覺這樣篇幅太長了不利於閱讀，那麼放在下一期更新吧，敬請期待。

本系列更新只有利用週末和下班時間整理，比較多的內容的話更新會比較慢，希望能對你有所幫助，請多多star或點贊收藏支援一下

本文地址：https://xuxin123.com/electron/url-scheme
本文github地址：連結