關於web桌面應用的集成解決方案
- 2021 年 9 月 25 日
- 筆記
- Web Client, 大前端
背景
毫無疑問，面對一個新的項目需求，我們首先想到的就是web。
確實，web太方便了，基於瀏覽器對OS的適配，我們可以很快速的實現某個需求的頁面UI，而無需考慮OS的兼容差異。
再經過jq、bootstrap、vue等框架（庫）的加持，web簡直太酷了！
但瀏覽器（主要是V8）在成全web起飛的同時，由於安全沙箱的先天限制，web應用只能在瀏覽器的授信範疇內活動，而無法與OS直接通訊。
當需要web應用訪問本地的攝影機、讀卡器、掃碼槍、印表機等智慧硬體時，總是會顯得無能為力。
因此，在開發超市收銀、業務大廳、IC卡管理等系統時，我們還是需要傳統桌面應用與OS直接通訊的那種能力。
模式
按照我們的習慣，還是在web中實現主要的頁面UI及業務邏輯，而在需要與OS通訊的部分，可以藉助於桌面應用來跟OS的API打交道，並將最終結果返回給web。
這樣一來，就可以打破瀏覽器安全沙箱的限制，將web的能力無限延申從而達到與本地OS相互通訊的目的。
方案
在上面的圖片中，web頁面是藉助桌面應用來與作業系統進行通訊。
我們知道桌面應用和作業系統之間的通訊是很簡單的，不管是C++、C#或者JAVA都擁有這個能力，主要問題還是web與桌面應用之間的通訊方式。
在遠古時代，常用的辦法有ActiveX、Java Applet和Flash等方式，主要是在web頁面中嵌入dll或swf插件，通過這些插件來實現web本身無法做到的事情。
遺憾的是在現代瀏覽器中，這幾種方式都逐漸不被支援，尤其從Chrome45版本以後，原來的NPAPI方式已被淘汰，新的PPAPI方式需要一定的門檻，對普通的web開發人員來說難度不小。
所以，就有很多人想到了另外一種方式，編寫一個桌面應用，並在其中添加一個webview控制項，就可以模擬成一個簡化版的瀏覽器環境，然後通過js來實現雙方的通訊。
這種方式實現起來很方便，各種開發語言中都有webview控制項，同時還實現了web應用的桌面駐留，使它看起來更像一個桌面應用。
選型
實現web桌面化的技術方案中，目前主流的有以下兩種：
- Electron：源於Github，是一個使用JavaScript, HTML和CSS等Web技術創建原生程式的框架，文檔比較全面，社區也很活躍，發展到目前已經很成熟了；
- Cef系列：主要是CefSharp，是面向winForm或wpf環境下，對嵌入式Chromium框架的封裝，通過C++/CLI的方式來調用CEF類庫，目前的版本更新很頻繁，優點是上手簡單，跟Chrome的兼容非常好。
以上兩種技術方案都有大量的使用者，一般的技術問題都能從搜索引擎找到答案。
嘗試
我本人通過對CefSharp的簡單封裝，實現了一個叫 EDesk 的玩應，主要進度如下：
- 屏蔽右鍵菜單
- 自定義首頁
- Form標題跟隨Web標題自動更新
- 重寫新窗口（target=_blank）
- 重寫彈窗（alert/confirm）
- 快捷鍵：F5刷新頁面
- 快捷鍵：Ctrl + F5強制刷新頁面
- 快捷鍵：F11全螢幕/恢復
- 快捷鍵：F12打開控制台
- 自定義UserAgent：EDesk/1.0.0
- 增加JS對象注入：EDesk
- 增加JS對象自動綁定函數：EDeskReady
- 攝影機操作API
下一步計劃實現身份證閱讀器的操作API，便於在web中實現對身份證的讀取、檢測以及讀取身份證照片的功能。
目前該項目已在gitee上開源，地址：//gitee.com/itez/edesk
歡迎感興趣的朋友一起交流。
