目    錄

第Ⅰ部分  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跨平臺開發實戰》假設讀者已經熟練掌握了JavaScript，但是由於讀者的技術背景各不相同，有些讀者可能隻對某個領域比較有經驗，所以如果書中講到了讀者可能不熟悉的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繫統。
之前我們一直在使用標準JavaScript語言實現Electron應用的功能。在第11章，將展示如何在應用中使用Babel、TypeScript和CoffeeScript等可轉譯為JavaScript的語言，以及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。

“以實戰風格講述跨平臺桌面應用開發的權威指南。”
—Ashwin K. Raj, Innocepts

“不僅告訴你Electron為何物，而且還教你編寫復雜的Electron應用程序。”
—Alexey Galiullin, Voiceworks

“讓我能夠快速創建自用的日常工具。”
—Phillippe Charriere，GtLab

“快速閱讀，輕松理解。”
—Jay Kelkar, Kelkar Systems

“終於，JavaScript無所不在！”
—William F. Wheeler, consultant