網頁如何喚醒桌面應用

設想一個場景，當咱們在瀏覽一個網頁而且須要下載某個資源時，你的電腦可能常常會跳出一個提示框，詢問你是否須要打開「迅雷」。當咱們點擊「是」，則會喚醒該本地應用進行下載任務。
針對這個場景產生了一個疑問，網頁是如何打開PC端應用的呢？

本文針對Windows系統進行討論。

自定義協議

註冊表是Microsoft Windows中的一個重要的數據庫，用於存儲系統和應用程序的設置信息。

它是Windows操做系統中的一個核心數據庫，其中存放着各類參數，能夠直接控制一些Windows應用程序的運行。

在Windows環境中，咱們能夠經過註冊表來定義打開軟件的協議。

Windows系統中自帶了註冊表編輯器，經過Windows+r打開運行，輸入"regedit"，打開註冊表編輯器。

咱們須要的有關打開應用的註冊表配置就存在HEY_CLASSES_ROOT下。

HKEY_CLASSES_ROOT根鍵中主要包含的是全部啓動應用程序須要的信息，其中包括：

• 全部擴展名及應用程序和文檔之間的關聯信息。
• 全部驅動程序的名字。
• 看成指針的字符串，指向它們表明的實際文件。
• 類標識CLSID，這點在訪問子健信息的時候很是重要，由於Windows中訪問了子健的信息都是用CLSID來代替的。這裏的標識在Windows XP系統中是惟一的。
• DDE和OLE信息。對於每一個文件關聯均可以使用DDE和OLE功能。
• 應用程序和文檔使用的圖標

以vscode爲例，當安裝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]
@="\"D:\\軟件\\Microsoft VS Code\\Code.exe\" --open-url -- \"%1\""

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

• @="URL:vscode"表示打開應用的協議是vscode
• @="\"D:\軟件\Microsoft VS Code\Code.exe\" --open-url -- \"%1\""表示應用存儲的位置

根據這兩個配置，前端網頁能夠經過vscode://協議來打開本地的vscode應用。

在瀏覽器地址欄中輸入vscode://能夠直接代開vscode應用

可是在網頁中想打開桌面應用通常不會在當前頁或者新打開一個頁簽在地址欄輸入協議，其實可使用一個隱藏的iframe或者設置一個隱藏的a，手動觸發

const src = `vscode://xxx?xxx=xxx`;
const iframe = document.createElement('iframe');
iframe.src = src;
iframe.style.display = 'none';
document.body.appendChild(iframe);

喚醒是如何作到免登陸

假設有這麼一種場景，用戶A在電商平臺上看準了商家B掛的貨物，但但願在價格方面跟商家B溝通一下，現不考慮手機、微信以及其餘的一些通信方式，用戶A只能經過電商平臺提供的通信桌面應用跟商家B溝通，如今的問題是用戶A觸發喚醒通信桌面應用跟商家B溝通時須要登陸，這個登陸環節特別的多餘，令人體驗很差。

其實能夠這樣，用戶A在觸發喚醒時向網關服務受權層請求受權，拿到臨時憑證code，將code做爲參數加入到喚醒協議連接中，桌面應用客戶端收到code便向服務端請求token，拿到登陸狀態token後就能夠免登陸，請求受保護資源

大體流程以下：

若是喚醒協議連接中須要攜帶不少參數，那就須要進行hash處理，將參數對象映射成hash值，由於喚起客戶端的協議連接是有長度限制

網頁喚醒應用並傳參實踐

參考文章：
前端網頁如何打開一個PC本地應用
React + Electron 搭建一個桌面應用