翻譯 | 《JavaScript Everywhere》第18章帶Electron的桌面應用程序javascript

寫在最前面

你們好呀，我是毛小悠，是一位前端開發工程師。正在翻譯一本英文技術書籍。html

爲了提升你們的閱讀體驗，對語句的結構和內容略有調整。若是發現本文中有存在瑕疵的地方，或者你有任何意見或者建議，能夠在評論區留言，或者加個人微信：code\_maomao，歡迎相互溝通交流學習。前端

(σﾟ∀ﾟ)σ..:*☆哎喲不錯哦java

第18章帶Electron的桌面應用程序

我第一次接觸我的計算機是在一個充滿Apple II機器的學校實驗室中進行的。node

每週一次，我和個人同窗被老師帶進教室，給了一些軟盤，並給出了有關如何加載應用程序（一般是Oregon Trail）的粗略說明。在這些課程上，除了記得本身發呆以外，我對其餘事情記不清了。自1980年代中期以來，我的計算機已經走了很長一段路，可是咱們仍然須要依靠桌面應用程序來執行許多任務。git

一般，我可能會訪問電子郵件客戶端、文本編輯器、聊天客戶端、電子表格軟件、音樂流服務以及其餘多個桌面應用程序。通常，這些應用程序具備與Web應用程序等效的功能，可是桌面應用程序的便利性和集成性能夠爲用戶帶來不少好處。可是，多年來，建立這些應用程序的能力一直很是缺少。值得慶幸的是，今天，咱們可以使用網絡技術來構建功能全面的桌面應用程序，並且學習曲線很小。github

咱們正在構建什麼

在接下來的幾章中，咱們將爲Notedly的社交筆記應用程序構建一個桌面客戶端。咱們的目標是使用JavaScript和Web技術來開發桌面應用程序，用戶能夠下載並安裝在計算機上。目前，該應用程序將是一個簡單的實現，它將咱們的Web應用程序包裝在桌面應用程序shell中。以這種方式開發咱們的應用程序將使咱們可以快速將桌面應用程序發送給感興趣的用戶，同時爲咱們提供了之後爲桌面用戶引入自定義應用程序的靈活性。web

咱們將如何構建它

要構建咱們的應用程序，咱們將使用Electron，它是一個開放源代碼的框架，用於使用Web技術構建跨平臺的桌面應用程序。它能夠利用Node.js和Chrome的基礎瀏覽器引擎Chromium來工做。shell

這意味着做爲開發人員，咱們可使用瀏覽器、Node.js和特定於操做系統的功能，而這些功能一般在Web環境中不可用。Electron最初是由GitHub爲Atom文本編輯器開發的，但此後一直用做大小應用程序的平臺，包括Slack，VS Code，Discord和WordPress Desktop。npm

入門

在開始開發以前，咱們須要將項目啓動程序文件複製到咱們的電腦上。

項目的源代碼包含了開發應用程序所需的全部腳本和對第三方庫的引用。

要將代碼克隆到咱們的本地計算機，請打開終端，切換到保存項目的目錄，而後git clone項目存儲庫。若是你已經研究過API和Web章節，則可能已經建立了一個 notedly目錄來保持項目代碼的有條理：

$ cd Projects
$ # type the `mkdir notedly` command if you don't yet have a notedly directory
$ cd notedly
$ git clone git@github.com:javascripteverywhere/desktop.git
$ cd desktop
$ npm install

安裝第三方依賴項

經過製做本書的入門代碼的副本，並在目錄中運行npm install，你無需爲任何第三方依賴項再次運行npm install。

該代碼的結構以下：

/src

這是你隨書一塊兒進行開發的目錄。
/solutions

該目錄包含每章的解決方案。若是你卡住了，這些能夠供你參考。
/final

該目錄包含最終的工做項目。

建立項目目錄並安裝依賴項以後，咱們就能夠開始開發了。

咱們的第一個電子應用程序

將咱們的代碼存儲庫克隆到咱們的電腦後，讓咱們開發咱們的第一個Electron應用程序。若是你在src目錄中查找，則會看到其中有一些文件。index.html文件包含了HTML標記。目前，該文件將用做Electron的「渲染器過程」，這意味着它將是咱們Electron應用程序顯示爲窗口的網頁。

<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8">
   <title>Notedly Desktop</title>
  </head>
  <body>
   <h1>Hello World!</h1>
  </body>
</html>

咱們將在index.js文件中設置咱們的Electron應用程序。在咱們的應用程序中，該文件將包含Electron所謂的「主進程」，它定義了應用程序shell。主要過程經過在Electron中建立一個BrowserWindow實例來工做，該實例用做應用程序shell。

index.js與main.js

在咱們的案例應用中的其餘部分都是用的index.js命名，可是一般在軟件開發中命名main.js來命名「主程序」。讓咱們設置主要過程以顯示包含HTML頁面的瀏覽器窗口。首先，導入Electron的應用程序，而後寫src/index.js中的browserWindow功能：

const { app, BrowserWindow } = require('electron');

如今，咱們能夠定義應用程序的browserWindow並定義應用程序將加載的文件。在src/index.js中，添加如下內容：

const { app, BrowserWindow } = require('electron');

// to avoid garbage collection, declare the window as a variable
let window;

// specify the details of the browser window
function createWindow() {
  window = new BrowserWindow({
   width: 800,
   height: 600,
   webPreferences: {
    nodeIntegration: true
   }
  });

  // load the HTML file
  window.loadFile('index.html');

  // when the window is closed, reset the window object
  window.on('closed', () => {
   window = null;
  });
}

// when electron is ready, create the application window
app.on('ready', createWindow);

有了這個，咱們開始準備在本地運行咱們的桌面應用程序。在終端應用程序中，從項目目錄中運行如下命令：

$ npm start

該命令將運行電子src/index.js，啓動咱們應用程序的開發環境版本（請參閱圖18-1）。

圖18-1。運行啓動命令將啓動咱們的「 Hello World」 Electron應用程序

macOS應用程序窗口詳細信息

macOS處理應用程序窗口的方式與Windows不一樣。當用戶單擊「關閉窗口」按鈕時，應用程序窗口將關閉，但應用程序自己不會退出。單擊macOS擴展塢中的應用程序圖標將從新打開應用程序窗口。Electron容許咱們實現此功能。將如下內容添加到src/index.js文件的底部：

// quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS only quit when a user explicitly quits the application
  if (process.platform !== 'darwin') {
   app.quit();
  }
});

app.on('activate', () => {
  // on macOS, re-create the window when the icon is clicked in the dock
  if (window === null) {
   createWindow();
  }
});

添加此功能後，你能夠經過退出應用程序並使用npm start命令從新運行它來查看這些更改。如今，若是用戶正在使用macOS訪問咱們的應用程序，則他們在關閉窗口時將看到預期的行爲。

開發者工具

因爲Electron基於Chromium瀏覽器引擎（Chrome，Microsoft Edge，Opera和許多其餘瀏覽器），它還使咱們可以使用Chromium的開發人員工具。這使咱們可以執行與瀏覽器環境中相同的全部的JavaScript調試。讓咱們檢查咱們的應用程序是否處於開發模式，若是是，請在應用程序啓動時自動打開開發工具。

要執行此檢查，咱們將使用electronic-util庫。這是一小部分的實用程序，可以讓咱們輕鬆檢查系統條件並簡化常見Electron的樣式代碼。

如今，咱們將使用is模塊，這將使咱們可以檢查咱們的應用程序是否處於開發模式。

在咱們的src/index.js文件的頂部，導入模塊：

const { is } = require('electron-util');

如今，在咱們的應用程序代碼中，咱們能夠在window.loadFile(*index.html*) 加載咱們的HTML文件，當應用程序處於開發環境中時，它將打開開發工具（圖18-2）：

// if in development mode, open the browser dev tools
if (is.development) {
  window.webContents.openDevTools();
}

圖18-2。如今，當咱們在開發過程當中打開應用程序時，瀏覽器開發工具將自動打開。

Electron安全警告

你可能會注意到，當前咱們的Electron應用程序顯示了與不安全的內容安全策略（CSP）相關的安全警告。咱們將在下一章中解決此警告。

經過輕鬆訪問瀏覽器開發工具，咱們爲開發客戶端應用程序作好了充分的準備。

Electron API

桌面開發的優勢之一是，經過Electron API，咱們能夠訪問操做系統級別的功能，而這些功能在Web瀏覽器環境中是不可用的，其中包括：

通知事項
本機文件拖放
macOS暗模式
自定義菜單
健壯的鍵盤快捷鍵
系統對話框
應用托盤
系統信息

你能夠想象，這些選項使咱們可以爲桌面客戶端添加一些獨特的功能並改善用戶體驗。咱們不會在簡單的示例應用程序中使用它們，可是你須要熟悉它們。Electron的文檔提供了每一個Electron API的詳細示例。此外，Electron團隊還建立了electron-api-demos，這是一個功能齊全的Electron應用程序，演示了Electron API的許多獨特功能。

結論

在本章中，咱們探討了使用Electron經過Web技術構建桌面應用程序的基礎。Electron環境爲咱們（做爲開發人員）提供了一個向用戶提供跨平臺桌面體驗的機會，而無需學習多種編程語言和操做系統的複雜性。藉助咱們在本章中探索的簡單設置以及Web開發的知識，咱們爲構建健壯的桌面應用程序作好了充分的準備。在下一章中，咱們將研究如何將現有的Web應用程序合併到Electron Shell中。

若是有理解不到位的地方，歡迎你們糾錯。若是以爲還能夠，麻煩你點贊收藏或者分享一下，但願能夠幫到更多人。

翻譯 | 《JavaScript Everywhere》第18章 帶Electron的桌面應用程序