关于web桌面应用的集成解决方案

背景

毫无疑问，面对一个新的项目需求，我们首先想到的就是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桌面化的技术方案中，目前主流的有以下两种：

1. Electron：源于Github，是一个使用JavaScript, HTML和CSS等Web技术创建原生程序的框架，文档比较全面，社区也很活跃，发展到目前已经很成熟了；
2. Cef系列：主要是CefSharp，是面向winForm或wpf环境下，对嵌入式Chromium框架的封装，通过C++/CLI的方式来调用CEF类库，目前的版本更新很频繁，优点是上手简单，跟Chrome的兼容非常好。

以上两种技术方案都有大量的使用者，一般的技术问题都能从搜索引擎找到答案。

尝试

我本人通过对CefSharp的简单封装，实现了一个叫 EDesk 的玩应，主要进度如下：

1. 屏蔽右键菜单
2. 自定义首页
3. Form标题跟随Web标题自动更新
4. 重写新窗口（target=_blank）
5. 重写弹窗（alert/confirm）
6. 快捷键：F5刷新页面
7. 快捷键：Ctrl + F5强制刷新页面
8. 快捷键：F11全屏/恢复
9. 快捷键：F12打开控制台
10. 自定义UserAgent：EDesk/1.0.0
11. 增加JS对象注入：EDesk
12. 增加JS对象自动绑定函数：EDeskReady
13. 摄像头操作API

下一步计划实现身份证阅读器的操作API，便于在web中实现对身份证的读取、检测以及读取身份证照片的功能。

目前该项目已在gitee上开源，地址：https://gitee.com/itez/edesk

欢迎感兴趣的朋友一起交流。