Electron实战：入门、进阶与性能优化

　　《Electron实战：入门、进阶与性能优化》以实战为导向，讲解了如何用Electron结合现代前端技术来开发桌面应用。不仅全面介绍了Electron入门需要掌握的功能和原理，而且还针对Electron开发中的重点和难点进行了重点讲解，旨在帮助读者实现快速进阶。作者是Electron领域的早期实践者，项目经验非常丰富，《Electron实战：入门、进阶与性能优化》内容得到了来自阿里等大企业的一线专家的高度评价。
　　《Electron实战：入门、进阶与性能优化》遵循渐进式的原则逐步传递知识给读者，书中以Electron知识为主线并对现代前端知识进行了有序的整合，对易发问题从深层原理的角度进行讲解，对普适需求以实践的方式进行讲解，同时还介绍了Electron生态内的大量优秀组件和项目。
　　全书一共14章：
　　第1章讲解Electron因何而来，Electron的生态、优势和不足，以及Electron未来的竞争者PWA技术：
　　第2章带领读者新建了一个简单的Electron项目，同时为读者介绍了一些Electron的基础知识；
　　第3章讲解了主进程和渲染进程的相关内容；
　　第4章介绍了如何把现代前端框架引入Electron项目中，集中介绍了webpack、Angular、React和Vue等框架；
　　第5-13章依次详细讲解了界面、数据持久化、操作系统API访问、硬件设备访问、测试、调试、安全、发布等技术及其背后的原理：
　　第1 4章通过一个完整的工程项目串联了Electron的核心技术并展示了Electron项目开发的完整流程。

刘晓伦

资深技术专家，有十余年研发经验，是Electron及其相关技术在企业应用领域的早期实践者，GitHub/Gitee优秀开源项目作者。作者还为Electron项目提交过数个Issue和Pull Request，均被官方接纳。

曾任原远传研发中心负责人、小远机器人研发总监。现在担任一家创业公司的技术负责人，负责的产品以Electron为主要技术方向。

除此之外，作者还有着十余年的前端及C++(Qt)的开发经验，深入研究过Chromium的源码及相关的协议（DevTools Protocol和V8 Debugger Protocol），其主导研发的产品为数家世界五百强企业提供服务。

Electron比你想象的更简单！

如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架。

控制技术栈的复杂度，一直以来都是许多开发者和项目管理人员的追求。Electron 为我们提供了一种舒适且优雅的方案，您只需要使用熟悉的开发工具、熟悉的 Web 开发语言和框架，就可以轻松开发桌面应用。本书基于作者长时间实践的积累，非常系统地介绍了 Electron 的现状、入门知识以及深度开发的各种技巧，同时穿插了各类解决方案的优劣对比

【我为什么要撰写本书】

我在2015年上半年的时候开始关注NW.js和Electron，下半年开始在实际项目中应用NW.js，那个时候两个项目的发展势头同样迅猛，分不出孰优孰劣。后来Electron领域出了几个杀手级应用（Visual Studio Code、Slack等），开发团队和社区维护者越来越积极地维护此项目，很多开发者在做技术选型的时候就更倾向于使用Electron了。

我也不例外，在公司内部做的项目和我业余时间做的项目，只要涉及桌面GUI，我基本都会选择Electron。用Electron开发的应用非常稳定，运行效率可媲美原生C/C++应用，且社区资源丰富，即使是一些冷门的需求也能找到解决方案；Electron维护者非常专业、友善，开发者的Issue和Pull Request回复得也非常及时。

但开发者想进入这个领域并开发出一个成熟、稳定的商业应用并没有那么简单，这主要是以下几方面原因导致的。

●官方文档片面：Electron使用JavaScript、HTML和CSS构建跨平台的桌面应用，但官方文档涉及的JavaScript、HTML和CSS相关的知识并不多，以介绍Electron自身的API为主，另一个重要成员—Node.js几乎未涉及。如何把这些知识与Electron的知识结合起来构建应用，成为开发者入门面临的第一个困难。

●学习资料匮乏：目前国内图书市场中只有两本由国外引入的与Electron相关的书，其中一本花了一半的篇幅讲解NW.js。书中存在无关内容多、关键知识点及周边知识少、与国内开发者实际需求不符、存在过时内容等问题，不利于读者自学。另外，虽然Electron社区中有相关内容，但内容良莠不齐，不具备系统性学习的条件。这是新手面临的第二个困难。

●Electron本身自由度太高，导致“坑多、坑深”：为了保证开发者的自由度和使用的便捷度，Electron提供了丰富的API，使开发者通过Electron可以轻松开发各领域五花八门的应用，但这也给开发者带来了诸多隐患，比如，API使用不当可能导致应用程序存在严重的安全问题（用户计算机控制权被窃取）和性能问题（百倍千倍的性能差异）。这是新手面临的第三个困难，而且可能是他们自己也还不知道的问题。

●用对、用好Electron生态内的资源具有相当大的挑战：在Electron本身迅猛发展的同时，其社区生态也呈爆发式增长，兼之Electron可以复用Web和Node.js

生态内的组件，这使得开发者在组件选型时经常会犯错。比如，我就不推荐在Electron应用内使用jQuery、axios和electron-vue等组件。这是新手面临的第四个困难。

以上这些困难也曾使我备受困扰，为让广大开发者不再重走我的痛苦之路，我决定撰写本书。

【本书主要内容及特色】

★1.本书大部分内容是官方文档中没有的

在书中我用大量篇幅介绍了ES6、HTML5和CSS3是如何与Electron结合的，比如动画效果、Web安全、HTML系统通知、WebSocket通信、音视频设备访问、CSS扩展语言等。

本书还用很大篇幅介绍了Node.js是如何与Electron结合的，比如：Node.js为何擅长处理IO密集型业务；Node.js是如何使用命名管道进行通信的；Node.js是如何完成加密、解密的（其中包括我为什么不推荐使用网上大量传播的加密、解密方法）。

本书用了一整章的篇幅介绍现代前端框架如何与Electron整合，其中包括Vue、React、Angular、webpack。

本书介绍了众多在Electron项目中常用的优秀第三方库，比如electron-builder（打包发布工具）、Debugtron（生产环境调试工具）、Dexie（IndexedDB封装库）、Jimp（图像处理库）等。

★2.本书以更合理的方式组织内容

我在撰写本书时始终秉持以渐进的方式传递知识的理念。因此，我并没单独拿出几章内容枯燥地介绍ES6、HTML5和CSS3等相关知识，而是把这些知识分散到书中各个章节中，以Electron为主线，由浅入深地传递给读者。

我把分散在各个角落的知识点按应用场景组织在一起，比如kiosk本是Electron窗口类的一个API（用于自助服务机），print是webContents类的API（用于控制打印机），我把它们与HTML5访问媒体设备的知识、Electron电源控制的知识整合在一起放在“硬件”章节。类似的知识组合在本书中随处可见。此外对于其他很多官网没有介绍但对Electron应用很有价值的CSS、JavaScript知识，我都做了较合理的整理和编排。读者阅读本书时即能有所体会。

与实战类的图书不同，本书不会试图组织一些实际案例来从头到尾讲它们是如何实现的，而是把实际案例中涉及的问题、难点、易错点剥离出来，讲精讲透。本书最后一章安排了一个真实案例，但也只讲关键环节的内容，不会大量地粘贴与Electron无关的代码。

那些一看就会、一看就懂的Electron知识我没有过多讲解，但诸如如何在Electron中读取访问受限的Cookie、如何保护客户数据等知识，本书都是用一线案例讲解的。

本书并不试图面面俱到地讲解Electron的所有内容，而是只讲解项目一线实战中会涉及的重要内容，比如脚本注入、无边框窗口等。被官网或社区标记为已过时的接口和插件本书不会讲解。在选择第三方社区插件时，我尽量选择了更新较频繁、使用用户较多的来使用。

★3.本书有足够的知识广度和知识深度

本书并不是一本专门讲解Electron的书，除Electron相关知识外，还介绍了大量的JavaScript、HTML、CSS、Node.js、桌面软件开发、多进程控制、安全、社区资源及背景故事等知识。Electron是本书的主线，每章知识全部是为Electron服务的，所以说本书的知识有广度。

本书的知识也有深度。举个例子，初学者可能苦于渲染进程与主进程通信的难度而大量使用remote技术。但初学者不知道的是，remote技术使用不当可能导致某些关键环节有百倍千倍的性能差异，甚至会导致不易排查的错误和安全问题的出现。这些问题背后的原理是怎样的呢？类似这样有深度的知识，在本书中有很多。

【如何阅读本书】

如果把所有技术书的学习难度系数从低到高设为1～10，那么本书难度系数应该在7左右。书中涉及从桌面软件开发到前端网页开发的知识，知识点非常多，虽然不涉及Electron的源码，但对关键点的运行原理都做了介绍。

本书力图每一章讲一个方面的知识，每一小节讲一个知识点，每一小节尽量不安排太多内容，让读者能更轻松地获取知识，以提升阅读体验。

如果几个小节的知识间有关联，我会尽量把基础的、工具类的知识安排在前面。比如，我会讲完主进程与渲染进程之后，马上讲如何引入现代前端框架，因为后面的知识需要用到现代前端框架。

至于广为人知的HTML5、CSS3和ES6，本书不会展开讲解。而一些JavaScript的知识是在ES6之后才被加入标准的，但由于ES6的巨大变革，业内普遍把ES6及以后加入的知识统称为ES6，本书也遵循这一共识。

书中带边框的区域，放置重点内容或扩展阅读的内容，重点内容前面会标记“重点”二字，扩展阅读内容前面会标记“扩展”二字。

书中无边框且有灰色背景的区域放置与内容相关的源代码、命令行指令或命令行输出内容。

【读者要求】

本书假定读者具备一定的前端知识，读者应该有使用HTML、CSS、JavaScript开发网页的经验，能熟练使用JavaScript操作网页中的Dom元素；

对Node.js有一定的了解，能使用Node.js常用的包管理工具npm或yarn创建项目并给项目添加依赖包；

对浏览器的工作原理有一定的认识，知道怎么用开发者工具调试前端代码；

了解HTTP协议，知道如何使用AJAX发起HTTP请求。

●第1章　认识Electron 1

1.1　Electron的由来 1

1.2　基于Electron的应用 4

1.3　Electron的生态 5

1.4　Electron的优势 5

1.5　Electron的不足 6

1.6　未来的竞争者PWA 7

1.7　本章小结 9

●第2章　轻松入门 10

2.1　搭建开发环境 10

2.2　创建窗口界面 13

2.3　启动窗口 14

2.4　引用JavaScript 16

2.5　Electron API演示工具 19

2.6　试验工具Electron Fiddle 20

2.7　本章小结 22

●第3章　主进程和渲染进程 23

3.1　区分主进程与渲染进程 23

3.2　进程调试 25

3.2.1　调试主进程 25

3.2.2　调试渲染进程 27

3.3　进程互访 29

3.3.1　渲染进程访问主进程对象 29

3.3.2　渲染进程访问主进程类型 30

3.3.3　渲染进程访问主进程自定义内容 31

3.3.4　主进程访问渲染进程对象 32

3.4　进程间消息传递 32

3.4.1　渲染进程向主进程发送消息 32

3.4.2　主进程向渲染进程发送消息 34

3.4.3　渲染进程之间消息传递 36

3.5　remote模块的局限性 36

3.6　本章小结 38

●第4章　引入现代前端框架 39

4.1　引入webpack 39

4.1.1　认识webpack 39

4.1.2　配置webpack 40

4.1.3　主进程入口程序 42

4.1.4　渲染进程入口程序 43

4.1.5　自定义入口页面 45

4.1.6　使用jQuery 46

4.2　引入Angular 46

4.2.1　认识Angular 46

4.2.2　环境搭建 47

4.2.3　项目结构 48

4.3　引入React 48

4.3.1　认识React 48

4.3.2　环境搭建 49

4.3.3　项目结构 50

4.3.4　项目引荐 50

4.4　引入Vue 50

4.4.1　认识Vue 50

4.4.2　环境搭建 51

4.4.3　项目结构 52

4.4.4　调试配置 53

4.5　本章小结 55

●第5章　窗口 56

5.1　窗口的常用属性及应用场景 56

5.2　窗口标题栏和边框 58

5.2.1　自定义窗口的标题栏 58

5.2.2　窗口的控制按钮 62

5.2.3　窗口最大化状态控制 63

5.2.4　防抖与限流 65

5.2.5　记录与恢复窗口状态 67

5.2.6　适时地显示窗口 68

5.3　不规则窗口 69

5.3.1　创建不规则窗口 69

5.3.2　点击穿透透明区域 71

5.4　窗口控制 72

5.4.1　阻止窗口关闭 72

5.4.2　多窗口竞争资源 74

5.4.3　模态窗口与父子窗口 75

5.4.4　Mac系统下的关注点 76

5.5　本章小结 78

●第6章　界面 79

6.1　页面内容 79

6.1.1　获取webContents实例 79

6.1.2　页面加载事件及触发顺序 81

6.1.3　页面跳转事件 82

6.1.4　单页应用中的页内跳转 83

6.1.5　页面缩放 84

6.1.6　渲染海量数据元素 85

6.2　页面容器 88

6.2.1　webFrame 88

6.2.2　webview 90

6.2.3　BrowserView 91

6.3　脚本注入 93

6.3.1　通过preload参数注入脚本 93

6.3.2　通过executeJavaScript注入脚本 97

6.3.3　禁用窗口的beforeunload事件 99

6.4　页面动效 100

6.4.1　使用CSS控制动画 100

6.4.2　使用JavaScript控制动画 101

6.5　本章小结 102

●第7章　数据 103

7.1　使用本地文件持久化数据 103

7.1.1　用户数据目录 103

7.1.2　读写本地文件 105

7.1.3　值得推荐的第三方库 106

7.2　使用浏览器技术持久化数据 107

7.2.1　浏览器数据存储技术对比 107

7.2.2　使用第三方库访问IndexedDB 108

7.2.3　读写受限访问的Cookie 110

7.2.4　清空浏览器缓存 112

7.3　使用SQLite持久化数据 112

7.4　本章小结 115

●第8章　系统 116

8.1　系统对话框 116

8.1.1　使用系统文件对话框 116

8.1.2　关于对话框 118

8.2　菜单 119

8.2.1　窗口菜单 119

8.2.2　HTML右键菜单 121

8.2.3　系统右键菜单 124

8.2.4　自定义系统右键菜单 125

8.3　快捷键 126

8.3.1　监听网页按键事件 126

8.3.2　监听全局按键事件 126

8.4　托盘图标 127

8.4.1　托盘图标闪烁 127

8.4.2　托盘图标菜单 128

8.5　剪切板 129

8.5.1　把图片写入剪切板 129

8.5.2　读取并显示剪切板里的图片 130

8.6　系统通知 131

8.6.1　使用HTML API发送系统通知 131

8.6.2　主进程内发送系统通知 132

8.7　其他 133

8.7.1　使用系统默认应用打开文件 133

8.7.2　接收拖拽到窗口中的文件 134

8.7.3　使用系统字体 135

8.7.4　最近打开的文件 137

8.8　本章小结 138

●第9章　通信 139

9.1　与Web服务器通信 139

9.1.1　禁用同源策略以实现跨域 139

9.1.2　Node.js访问HTTP服务的不足 141

9.1.3　使用WebSocket通信 142

9.1.4　截获并修改网络请求 144

9.2　与系统内其他应用通信 146

9.2.1　Electron应用与其他应用通信 146

9.2.2　网页与Electron应用通信 148

9.3　自定义协议（protocol） 150

9.4　使用socks5代理 152

9.5　本章小结 153

●第10章　硬件 154

10.1　屏幕 154

10.1.1　获取扩展屏幕 154

10.1.2　在自助服务机中使用Electron 156

10.2　音视频设备 158

10.2.1　使用摄像头和麦克风 158

10.2.2　录屏 159

10.3　电源 160

10.3.1　电源的基本状态和事件 160

10.3.2　监控系统挂起与锁屏事件 161

10.3.3　阻止系统锁屏 162

10.4　打印机 162

10.4.1　控制打印行为 162

10.4.2　导出PDF 164

10.5　硬件信息 165

10.5.1　获取目标平台硬件信息 165

10.5.2　使用硬件串号控制应用分发 166

10.6　本章小结 170

●第11章　调测 171

11.1　测试 171

11.2　调试 177

11.3　日志 188

11.4　本章小结 193

●第12章　安全 194

12.1　保护源码 195

12.2　保护客户 204

12.3　保护网络 206

12.4　保护数据 211

12.5　提升稳定性 214

12.6　本章小结 216

●第13章　发布 218

13.1　生成图标 218

13.2　生成安装包 219

13.3　代码签名 221

13.4　自动升级 222

13.5　本章小结 224

●第14章　实战：自媒体内容发布工具 225

14.1　项目需求 225

14.2　项目架构 226

14.3　核心剖析 229

14.4　辅助功能 237

14.5　本章小结 240

附录A　Mac代码签名 242