Steve Kinney是SendGrid的首席工程师，也是一名国际演讲者和DinosaurJS会议(在位于科罗拉多州丹佛市举办的技术会议)的组织者。此前，他是软件与设计图灵学院前端工程项目的创始主任，并曾经在纽约市从事过七年教学工作。
如果能够使用Web开发技能创建桌面应用，岂不是美事一桩？Electron正是一个用以实现此类需求的框架。不管是在哪个操作系统上，Electron都能让我们使用和Node创建出简洁、时髦的桌面应用。在基于Electron创建工具、游戏和软件的过程中，我们可以充分感受到Electron的快捷、实用和趣味性。 《Electron跨平台开发实战》讲述如何使用、Node和Electron框架创建跨平台应用。在创建一个读取和渲染Markdown文件的文本编辑器应用的过程中，读者将学会像一名桌面开发者那样去思考。本书还讲解如何为应用添加各种与操作系统有关的功能，包括访问文件系统、定制菜单和访问系统剪贴板，以及如何使用Chromium的工具分发已完工的产品。此外，《Electron跨平台开发实战》还介绍数据存储、性能优化和自动化测试等主题。
第Ⅰ部分 Electron入门知识 第1 章 介绍Electron 3 1.1 什么是Electron 3 1.1.1 什么是Chromium Content Module 5 1.1.2 什么是Node.js 6 1.2 哪些人在使用Electron 6 1.3 阅读本书之前，需要知道些什么 8 1.4 为何要使用Electron 8 1.4.1 重用现有技能 10 1.4.2 访问原生操作系统API 10 1.4.3 更高运行权限，更少功能限制 11 1.4.4 在浏览器环境中使用Node的功能 13 1.4.5 离线优先 14 1.5 Electron的工作原理 14 1.5.1 主进程 15 1.5.2 渲染器进程 15 1.6 对比Electron与NW.js 16 1.7 本章小结 17 第2 章 创建个Electron应用 19 2.1 创建一个书签列表应用 20 2.1.1 组织Electron应用的结构 21 2.1.2 package.json 22 2.1.3 在项目中下载并安装Electron 23 2.2 使用主进程 25 2.3 创建一个渲染器进程 26 2.3.1 从渲染器进程加载代码 30 2.3.2 在渲染器进程中引入文件 31 2.3.3 在渲染器进程中添加样式 32 2.4 实现UI界面 33 2.4.1 在Electron中发出跨域请求 35 2.4.2 解析响应文本 36 2.4.3 使用Web Storage API存储从响应中得到的信息 38 2.4.4 显示请求的结果 39 2.4.5 预防错误 43 2.4.6 一个不期而至的bug 45 2.5 本章小结 49 第Ⅱ部分 使用Electron创建跨平台应用 第3 章 创建一个笔记应用 53 3.1 定义应用的目标 54 3.2 打下基础 55 3.3 初始化并启动应用 56 3.3.1 实现UI界面 57 3.3.2 优雅地显示浏览器窗口 63 3.4 实现基本功能 64 3.5 调试Electron应用 67 3.5.1 调试渲染器进程 67 3.5.2 调试主进程 68 3.5.3 使用Visual Studio Code调试主进程 69 3.6 本章小结 72 第4 章 使用原生文件对话框与实现跨进程通信 73 4.1 触发原生文件对话框 74 4.2 使用Node读文件内容 77 4.2.1 限定允许打开的文件类型 78 4.2.2 在macOS系统中实现工作表对话框 81 4.3 实现跨进程通信 82 4.4 使用跨进程通信调用文件打开功能 87 4.4.1 理解CommonJS模块系统 88 4.4.2 引入其他进程的功能 88 4.5 从主进程向渲染器进程发送内容 90 4.6 本章小结 95 第5 章 创建多窗口应用 97 5.1 创建和管理多个窗口 98 5.1.1 主进程与多个窗口之间的通信 99 5.1.2 将指向当前窗口的引用传给主进程 101 5.2 改进新建窗口的用户体验 103 5.3 与macOS集成 105 5.4 本章小结 108 第6 章 操作文件 111 6.1 跟踪当前打开的文件 113 6.1.1 使用当前文件的名称更新窗口标题 114 6.1.2 检测是否修改过当前文件 116 6.1.3 启用UI界面上的Save File和Revert按钮 118 6.1.4 更新macOS系统的展示文件 119 6.2 跟踪近打开的文件 120 6.3 保存文件 122 6.3.1 导出渲染的HTML内容 123 6.3.2 常用路径 124 6.3.3 从渲染器进程保存文件 125 6.3.4 保存当前文件 125 6.3.5 回滚文件 127 6.4 通过拖曳打开文件 127 6.4.1 忽略无关区域的拖曳操作 127 6.4.2 提供可视化反馈 128 6.4.3 打开拖曳过来的文件 131 6.5 监控文件的变动 131 6.6 丢弃未保存的修改前提示用户 134 6.7 本章小结 138 第7 章 创建应用菜单和上下文菜单 141 7.1 替换并复制默认菜单 143 7.1.1 macOS系统的Edit菜单消失之谜 144 7.1.2 替换Electron默认菜单的隐形代价 146 7.1.3 实现Edit和Window菜单 147 7.1.4 定义菜单项的role属性和键盘快捷键 148 7.1.5 恢复macOS系统的应用菜单 149 7.1.6 添加Help菜单 153 7.2 在菜单中添加应用特有的功能 155 7.3 创建上下文菜单 160 7.4 本章小结 162 第8 章 与操作系统更深入地集成以及动态启用菜单项 163 8.1 在渲染器进程(UI界面)中使用shell模块 164 8.2 在应用菜单中使用shell模块 167 8.3 在上下文菜单中使用shell模块 169 8.3.1 决定将功能放在菜单中还是UI界面上 170 8.3.2 决定将功能放在应用菜单还是上下文菜单中 171 8.4 在适当的时候禁用菜单项 171 8.4.1 动态启用和禁用上下文菜单中的菜单项 172 8.4.2 动态启用和禁用应用菜单中的菜单项 175 8.5 本章小结 181 第9 章 介绍tray模块 183 9.1 开始创建Clipmaster 184 9.2 使用tray模块创建一个应用 185 9.2.1 为macOS和Windows选择不同的图标 187 9.2.2 支持macOS的深色模式 188 9.2.3 从剪贴板读取内容并保存剪贴项 189 9.3 读写剪贴板的内容 191 9.3.1 写入剪贴板 193 9.3.2 处理极端场景 195 9.4 注册全局快捷键 198 9.5 显示通知 201 9.6 在macOS系统中单击菜单栏图标时，切换显示的图标 204 9.7 完整的代码 205 9.8 本章小结 208 第10 章 在应用中使用menubar库 209 10.1 使用menubar开始创建应用 210 10.2 向UI界面添加剪贴项 214 10.3 在应用中操作剪贴项 216 10.3.1 使用事件代理避免内存泄漏 216 10.3.2 删除一个剪贴项 217 10.3.3 将数据写入剪贴板 219 10.4 发布剪贴项 220 10.5 显示通知和注册全局快捷键 223 10.5.1 注册全局快捷键 224 10.5.2 处理从未打开过窗口的极端场景 226 10.6 添加第二个菜单 227 10.7 本章小结 229 第11 章 使用转译器和框架 231 11.1 介绍electron-compile 233 11.2 打造应用的基础 234 11.3 在React中创建UI界面 241 11.3.1 Application组件 241 11.3.2 显示物品列表 244 11.4 添加新的物品 248 11.5 实时重新加载与模块热加载 252 11.5.1 启用实时重新加载 252 11.5.2 实现模块热加载 253 11.6 本章小结 256 第12 章 保存用户数据以及使用Node.js原生模块 259 12.1 在SQLite数据库中存储数据 260 12.1.1 使用electron-rebuild确保编译出正确的版本 261 12.1.2 使用SQLite和Knex.js 262 12.1.3 将数据库功能挂载到React应用 263 12.1.4 从数据库获取所有数据项 265 12.1.5 向数据库中添加数据项 266 12.1.6 更新数据库中的数据项 268 12.1.7 删除数据项 270 12.1.8 将数据库存储在正确的地方 275 12.2 IndexedDB 276 12.2.1 在IndexedDB中创建仓库 277 12.2.2 从IndexedDB获取数据 278 12.2.3 向IndexedDB写入数据 279 12.2.4 将数据库操作连接到UI界面 282 12.3 本章小结 284 第13 章 使用Spectron测试应用 285 13.1 介绍Spectron 287 13.2 使用Spectron和WebdriverIO 289 13.3 设置Spectron和测试运行器 290 13.4 使用Spectron编写异步测试 292 13.4.1 等待窗口加载 293 13.4.2 测试Electron Browser Window API 294 13.4.3 使用Spectron遍历和测试DOM 294 13.4.4 使用Spectron控制Electron API 297 13.5 本章小结 298 第Ⅲ部分 部署Electron应用 第14 章 构建并部署应用 301 14.1 介绍Electron Packager 302 14.1.1 设置Electron Packager 302 14.1.2 配置输出目录 304 14.1.3 配置应用的名称和版本 304 14.1.4 更新应用图标 305 14.1.5 针对多个操作系统进行构建 306 14.2 使用asar档案文件 307 14.3 Electron Forge 310 14.3.1 将一个Electron应用导入Electron Forge 311 14.3.2 使用Electron Forge构建应用 312 14.4 本章小结 313 第15章 发布和更新应用 315 15.1 收集崩溃报告 315 15.1.1 设置崩溃报告 316 15.1.2 设置一台接收崩溃报告的服务器 319 15.1.3 报告未捕获异常 322 15.2 应用签名 324 15.2.1 签署macOS应用 325 15.2.2 在Windows系统中创建安装程序和进行代码签名 328 15.3 自动更新应用 331 15.3.1 在Electron中设置自动升级 332 15.3.2 搭建一台自动更新服务器 334 15.4 本章小结 337 第16 章 通过Mac App Store分发应用 339 16.1 将应用提交到Mac App Store 339 16.1.1 签署应用 340 16.1.2 向Mac App Store注册应用 345 16.1.3 将应用添加到iTunes Connect 346 16.1.4 为Mac App Store打包应用 348 16.1.5 配置应用类别 352 16.1.6 注册应用以打开一种文件类型 352 16.2 验证和上传应用 354 16.3 收尾事项 355 16.4 本章小结 355 附录 Fire Sale和Clipmaster 9000的源代码 357
《Electron跨平台开发实战》的主要目标是帮助你快速着手创建Electron应用。通过将各种基础概念体现于实践代码之中，我们可以更好地学习这些概念。这《Electron跨平台开发实战》不仅介绍Electron的基础知识，还会提供创建新应用的灵感和点子。 《Electron跨平台开发实战》读者对象 《Electron跨平台开发实战》适用于这样一些受众：想要创建功能远远出浏览器功能的桌面应用的人；想要为自己创建一款满足个人需要的桌面应用，但又不希望重新学习一门新的编程语言或框架的人；想要突破自身能力，使用同一份代码创建运行于多个操作系统之上应用的小型团队。而在笔者的内心深处，《Electron跨平台开发实战》既适用于想要为命令行应用创建GUI界面的人，也适用于希望无须在计算机上安装Node.js即可运行应用程序或工具的人。 《Electron跨平台开发实战》假设读者已经熟练掌握了，但是由于读者的技术背景各不相同，有些读者可能只对某个领域比较有经验，所以如果书中讲到了读者可能不熟悉的Web或Node.js知识点，我会对它们进行讲解。 《Electron跨平台开发实战》的组织结构：路线图 《Electron跨平台开发实战》分为16章。各章的内容都前后衔接、循序渐进。如果只想了解如何在你的应用中实现某个特定功能，也可以直接跳到相关章节进行阅读。 第1章将讲述Electron是什么。我们可以看到一些Electron能够做到，而浏览器和Node.js无法独自做到的事情。 第2章将开始创建一个简单的Electron应用。该章的目标是通过自动手实践，让读者了解使用Electron创建一个应用是多么容易。 第3章将介绍《Electron跨平台开发实战》中的一个主要应用—— Fire Sale，这是一个让用户可以打开文件系统中的Markdown文件并对它们进行编辑的应用。 第4章将介绍如何使用原生系统对话框和警示框，用户可以使用对话框从文件系统中选择一个文件并在Fire Sale中编辑它。Fire Sale应用会模糊DOM与Node标准库之间的界线，协调两者以实现对话框功能。 第5章将向应用添加多窗口支持，多窗口会引出一系列单浏览器窗口应用和无窗口Node.js应用不会遇到的问题。 第6章将引入更多的原生操作系统集成功能。我们将把Fire Sale中打开的文档添加到操作系统的近打开文件列表中，创建一个检查当前打开的文件是否已被其他应用修改的器，并根据当前文件是否有未保存的更改，更新窗口标题栏中显示的文本。 第7章将探讨如何创建原生应用菜单和上下文菜单，前者被一个应用的所有窗口共享，后者会在用户右击鼠标时弹出。 第8章将讲解如何基于应用的状态更新应用菜单，包括启用或禁用指定的菜单项。 第9章将创建一种驻留在macOS的菜单栏中或Windows的系统托盘区域的新型应用。Web应用是无法将自己驻留在这些区域的。你在该章会创建Clipmaster应用，这是一个精简的剪贴板管理器，可以从系统剪贴板读取和写入内容，响应全局快捷键，并在完成操作时向用户显示通知。 第10章将使用第三方库，创建一个像Fire Sale那样有UI界面的新版Clipmaster应用。这个新版本的名称是Clipmaster 9000，它可以访问GitHub的Gist API，并且可以通过快捷键把保存的剪贴项发布到另一个Web系统。 之前我们一直在使用标准语言实现Electron应用的功能。在第11章，将展示如何在应用中使用Babel、TypeScript和CoffeeScript等可转译为的语言，以及Sass和Less等可转译为CSS的语言。你在该章会使用React创建一个名为Jetsetter的旅行打包列表应用。 第12章将介绍如何将数据保存到数据库，将演示在客户端代码中，如何使用SQLite数据库实现数据读写操作。除了SQLite之外，还会演示使用基于浏览器的IndexedDB数据库。 第13章将介绍Spectron这个测试工具，它让开发者可以为Electron应用编写Selenium测试代码。我们将为前面章节创建的Clipmaster 9000应用编写一组测试。 第14章将介绍对应用进行打包的工具。使用工具打包应用之后，可以将它们分发给不想仅通过命令行启动应用的用户。其实不光是用户，很多开发者也不太喜欢使用命令行启动应用。 第15章涵盖如何为macOS应用签名，如何创建Windows安装程序，以及如何创建用于收集错误日志和崩溃报告的简单服务器。 第16章将讲解如何把应用发布到Mac App Store。如果你更喜欢自己分发应用，就不必把应用发布到Mac App Store。但是，如果你确实想那样做但又对流程不熟悉，那么该章对你会非常有帮助。 关于代码 《Electron跨平台开发实战》包含许多源代码示例，一些以单独的代码清单形式出现，另一些则直接插入正文。有时，代码会以粗体标出，以表示它们相对于当前章节的前面部分已经发生变化，这通常是由于向原有代码添加新功能导致的。 在许多场景中，原始代码都被重新格式化，我们做了折行处理，并重新规划了缩进，以满足排版需求。在极少的情况下，即使重新格式化代码也仍然不够，所以会用到行连续符号(?)，表示书页上的两行实际上是连续的单行代码。此外，使用文本对代码进行说明时，通常会从代码清单中将注释删除。许多代码清单都带有额外的文字标注，以突出代码里面重要的概念。 《Electron跨平台开发实战》所有代码都可以在出版社网站(www.manning.com/books/electron-in-action)和GitHub(https://github.com/electron-in-action)上找到，也可通过扫描封底的二维码下载。大部分情况下，每一章都会有一个对应的分支。《Electron跨平台开发实战》后半部分的一些章会使用前面某章创建的应用，因此会在那一章开始的时候提供一个起始分支，在那一章结束的时候再提供一个结束分支。如果某章结束时的终代码比较短，则将它直接列在那一章的结尾。如果某章结束时的终代码比较长，则将完整代码放在附录中。2018年5月，GitHub发布了一个Web服务和一个npm包，通过GitHub发布的开源Electron应用可以利用它们轻松实现自动升级(https://electronjs.org/blog/autoupdating-electron-apps)。如果你的应用符合那些条件，可以考虑使用GitHub提供的update-electron-app库。如果你的应用并不符合条件，或者你不想使用update-electron-app库，第15章将讲述如何自己实现自动升级功能。 在《Electron跨平台开发实战》撰写过程中，让笔者心惊肉跳的事是Electron、Node.js或Chromium发布了新版本(即使只是小的版本)，导致书中的某个代码示例无法工作。这种事已经发生过不止一次。 我承诺将不断更新《Electron跨平台开发实战》代码，保持它们有效，并在每章分支的README.md文件中提供勘误。如果书中的代码不能正常工作，请务必查看《Electron跨平台开发实战》的GitHub代码库或图书论坛。 图书论坛 读者可以访问由Manning Publications运营的私人网络论坛，在论坛上发表评论、询问技术问题，并得到来自作者与其他用户的帮助。论坛位于https://forums.manning.com/forums/electron-in-action。有关Manning论坛和行为规则的更多信息，请访问https://forums.manning.com/forums/about。
