使用NW.JS構建跨平台桌面應用

NW.js：使用Web技術構建原生應用的框架

NW.js是一個強大的框架，允許開發者使用HTML、JavaScript和CSS等Web技術創建原生應用程序，從而生成混合應用，這些混合應用比普通的Web應用具有顯著優勢。

與另一個混合應用框架Electron相比，NW.js具有以下幾個優勢：支持chrome.* APIs、Chrome應用、NaCl和PNaCl應用、V8快照源代碼保護、內置PDF查看器、打印預覽以及在Web Workers中集成Node.js。

使用NW.js創建混合應用程序的過程包括設置項目結構、創建清單文件和創建主視圖。您可以參考GitHub上的示例應用程序。

NW.js可以使用nw和nw-builder包分別進行開發和生產安裝。通過向package.json文件添加npm腳本，可以簡化打包和分發過程。

NW.js應用程序的測試和調試可以手動進行，因為NW.js基於Chromium。可以使用Karma的NW.js啟動器插件（例如karma-nodewebkit-launcher）實現自動化的單元測試。

本文由Tim Severien和Joan Yin共同評審。感謝所有SitePoint的同行評審員，使SitePoint的內容盡善盡美！

NW.js是一個使用HTML、JavaScript和CSS等Web技術創建原生應用程序的框架。簡單來說，您使用正常的流程開發Web應用程序。在流程結束時，您運行一個生成器，將所有內容編譯成一個原生應用程序，然後該應用程序就像瀏覽器一樣顯示您的Web應用程序。這些應用程序稱為“混合應用程序”。

混合應用程序之所以很棒，不僅是因為它們是用您已經熟悉的語言（HTML、JavaScript和CSS）編寫的，還因為它們比普通的Web應用程序具有以下重要優勢：

• 瀏覽器和瀏覽器版本的控制（您知道您的應用程序是由哪個瀏覽器調用的）。 NW.js混合應用程序使用Chromium（在Google Chrome背後運行的開源瀏覽器）顯示。因此，在Chrome中運行的應用程序也應該與NW.js一起運行。
• 視口的控制。例如，您可以定義固定或最小/最大視口。
• 由於本地文件，沒有同源策略限制。如果您從文件系統打開本地文件，瀏覽器會阻止不在同一目錄中的文件的XMLHttpRequest請求。此行為可以在NW.js應用程序中禁用。

它們還提供自定義API，帶來以下優勢：

• Node.js集成
• 剪貼板訪問
• 訪問文件系統
• 硬件訪問（例如，獲取打印機列表）
• 托盤圖標
• 自定義文件選擇器對話框
• Shell集成（在默認文件瀏覽器或瀏覽器中打開文件或URL）
• 自定義整個窗口（關閉按鈕、菜單欄）和上下文菜單的選項
• 設置和獲取縮放級別的能力。

聽起來不錯？那麼讓我們開始吧。在本文中，我們將實際了解NW.js，並學習如何創建混合應用程序。您可以訪問GitHub上找到使用本文說明構建的示例應用程序。

與Electron相比，NW.js的優勢

首先，需要提到一點：NW.js並不是唯一一個用於混合應用程序的框架。另一個競爭對手叫做Electron。它於2013年啟動，比NW.js晚了兩年，但由於它來自GitHub，因此很快就廣為人知。現在您可能對它們之間的區別感興趣。以下是NW.js與Electron相比的優勢：

• 支持chrome.* APIs。這些API可用於與瀏覽器交互。 （您可以在NW.js文檔中找到更多相關信息。）
• 支持Chrome應用。 Chrome應用是用Web語言編寫的打包應用程序。 （更多信息請參見Chrome開發者文檔。）這些應用程序與NW.js不同，因為它們沒有Node.js集成，並且是使用Chrome Web Store發布的。 （Chromium將在2018年8月之前取消其支持（請參閱他們的博客文章）。但根據這篇文章，NW.js仍將支持Chrome應用。）
• 支持NaCl（原生客戶端）和PNaCl（可移植原生客戶端）應用程序。它們專注於性能，因此主要用C和C 編寫。 （請參閱本教程，了解如何在NW.js中使用它們。）
• 具有V8快照源代碼保護，用於保護應用程序的源代碼。使用nwjc工具，您的代碼將被編譯成原生代碼。 （請參閱本文以了解更多信息。）
• 具有內置的PDF查看器。
• 允許打印預覽。
• 支持在Web Workers中集成Node.js。它們用於編寫多線程應用程序。

但是，Electron也有一些值得一提的優勢：

• 內置自動更新程序（您可以關注有關NW.js自動更新程序的問題）。
• 自動將崩潰報告發送到遠程服務器。 NW.js僅寫入本地文件，然後可以手動提交。

還有一個根本的區別。 NW.js應用程序以HTML文件的形式指定其入口點。此HTML文件將直接在GUI中打開。

另一方面，Electron應用程序將JavaScript文件指定為其入口點。此JavaScript文件在一個單獨的主進程中打開，然後可以在GUI中打開HTML文件。這意味著理論上您可以運行沒有GUI的Electron應用程序。此外，關閉GUI不會關閉主進程；您需要通過調用API方法手動終止它。

雖然Electron為使用JavaScript編寫且沒有GUI的桌面應用程序打開了大門，但如果您只想顯示基於HTML的應用程序，NW.js應用程序可能更容易設置。

注意：如果您真的更喜歡Electron的優勢，請查看SitePoint最近關於使用Electron創建桌面應用程序的文章。

創建演示應用程序

讓我們開始創建稍後將編譯成原生應用程序的應用程序。由於設置Web應用程序有很多方法——使用各種JS語言（TypeScript、CoffeeScript等）、模塊加載器（RequireJS、webpack、SystemJS等）、框架（AngularJS、React、Vue.js等）和預處理器（ SCSS、LESS、Haml等）——而且每個人都有自己的偏好，我們只使用基本的HTML、CSS和JS（ES6標準）技術。

沒有適用於任何設置的NW.js樣板（啟動項目）。所有這些都是為特定的框架、模塊加載器或預處理器構建的。因此，我們將自己從頭開始實現一個簡單的NW.js應用程序。它很容易理解，您以後可以輕鬆地根據您的需要自定義它，或者切換到樣板。

項目結構

首先，我們需要創建我們的項目結構和文件：

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

說明：

• src/包含應用程序的源文件。
• src/app/包含我們的JavaScript文件。
• src/assets/包含圖像。在我們的示例中，只有文件icon.png（將在窗口中顯示為窗口圖標）應該是正方形的。
• src/styles/通常包含SCSS或LESS文件——在我們的示例中，只是一個簡單的CSS文件。
• src/views/包含HTML視圖文件。
• src/package.json是NW.js應用程序的清單文件（請參閱清單格式）。我們還在此處指定應用程序的依賴項。
• package.json是一個npm包文件，我們需要它來進行構建工作流程，並指定實際NW.js應用程序中不需要的依賴項（例如構建依賴項）。

創建清單

現在我們已經創建了項目結構和文件，我們可以開始使用NW.js清單文件src/package.json。根據文檔，該文件基本上只需要兩個屬性，name（應用程序名稱）和main（用作入口點的HTML文件的路徑）。但是我們添加了更多信息，例如窗口圖標的路徑，以及最小寬度和高度，以確保用戶不會看到任何意外的內容：

<code>{
  "name":"nw.js-example",
  "main":"views/main.html",
  "window":{
    "min_width":400,
    "min_height":400,
    "icon":"assets/icon.png"
  }
}</code>

就是這樣！應用程序稍後將在啟動時打開src/views/main.html，因為main路徑相對於清單文件。

創建主視圖

此時，我們可以編寫一個待辦事項應用程序。但是我們想專注於NW.js及其功能。為此，我更喜歡讓您決定應用程序的功能。我在GitHub上創建了一個示例項目NW.js-examples來演示幾個NW.js功能，例如Node.js集成和剪貼板訪問。請隨意在您的應用程序中使用它進行嘗試。但您也可以使用其他內容。

對於您決定的任何內容，您至少必須創建src/views/main.html文件，因為它是的應用程序入口點。它可能如下所示：

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

在一個真實的應用程序中，您可能會有其他幾個視圖文件，並使用Ajax加載它們。為簡單起見，您還可以創建本機超鏈接並引用其他HTML文件。例如：

<code>{
  "name":"nw.js-example",
  "main":"views/main.html",
  "window":{
    "min_width":400,
    "min_height":400,
    "icon":"assets/icon.png"
  }
}</code>

然後，在src/views/中創建https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e文件。這就是我在示例項目中如何操作的。

安裝NW.js

我們現在已經創建了NW.js項目，包括清單和主視圖。我們最終需要一種方法來直接在我們的開發機器上運行NW.js進行開發，並實現一個構建過程，為多個操作系統生成原生應用程序。

為此，我們需要以下兩個包：

• nw（開發）
• nw-builder（生產）

由於它們與我們的實際應用程序無關（它們僅用於開發目的和生產構建），因此我們在根文件夾中的第二個package.json中將它們創建為devDependencies，以及所需的名稱和版本字段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NW.js-example | main</title>
    <link rel="stylesheet" href="../styles/common.css">
</head>
<body>
    <h1 id="Hello-World">Hello World :-)</h1>
    <🎜>
</body>
</html>

現在我們只需要在項目的根文件夾中運行以下命令來安裝devDependencies：

<a href="https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e">Something</a>

完成了！讓我們構建。

打包和分發

為了簡化打包，我們將npm腳本添加到我們的package.json文件中。它們允許我們運行CLI命令，在右側定義，在左側使用npm run使用快捷方式定義。我們添加了兩個腳本，一個用於開發，一個用於生產：

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  }
}

直接運行NW.js

要直接啟動NW.js應用程序，只需運行：

$ npm install

此快捷方式將調用我們在dev下scripts中定義的命令，使用nw包。應該直接在您的開發機器上打開一個新窗口，顯示src/views/main.html。

生產構建

生產構建將使用nw-builder，它支持Windows、Linux和macOS的輸出。在我們的示例中，我們為所有這些平台構建了一個包，包括32位和64位版本。對於macOS，目前只能以舊版模式構建32位。 （請參閱GitHub上的此問題。）因此，僅構建64位。

要運行我們的生產構建，只需運行：

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  },
  "scripts":{
    "dev":"nw src/",
    "prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
  }
}

與直接運行NW.js一樣，這將使用我們在scripts中定義的CLI命令。

這需要一段時間……

完成後，查看您的dist/文件夾。它應該如下所示：

$ npm run dev

太棒了，我們快完成了！

測試和調試

手動

由於NW.js基於Chromium，因此手動測試就像在Chrome中一樣簡單。當您遇到錯誤（視覺或功能）時，您可以使用鍵盤快捷鍵F12或以編程方式使用以下方法打開開發者工具：

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

請注意，這需要SDK構建風格。如果您想在生產中禁用開發者工具，您可以使用不同的風格構建NW.js或禁止F12事件。

自動化

自動化單元測試（幸運的是）被廣泛用於確保在各種實現中都能正常工作，而無需進行持續的手動測試。

如果您的應用程序沒有使用NW.js特定的API方法，那麼理論上您可以保留您通常的Web應用程序工作流程——例如，使用Karma作為規范運行器，結合Jasmine作為測試框架。

但是，如果您使用的是NW.js特定的API方法，則需要在NW.js應用程序中運行測試，以確保定義了API方法。一種方法是使用Karma的NW.js啟動器插件，例如karma-nodewebkit-launcher。它的工作方式與Karma的任何其他瀏覽器啟動器插件一樣：它在NW.js容器中打開應用程序以執行檢查，然後自動關閉它。

但是，由於NW.js不是無頭的（與PhantomJS等不同），因此它始終需要物理顯示器。這意味著在純CLI服務器上運行測試是不可能的。幸運的是，在這種情況下，您可以使用Xvfb來模擬顯示器。例如，這在Travis CI上有效。對於Jenkins，您需要安裝Xvfb插件。請參閱GitHub上的此問題以了解更多信息。

結論

希望本文能讓您深入了解NW.js的優勢和用例。有很多理由說明為什麼使用混合應用程序比分發包含HTML文件的.zip文件夾（然後從文件系統運行）更好。 NW.js也可以用作原生應用程序的替代品，因為您不需要專注於復雜的GUI，並且您有很多內置功能，例如視頻播放器。由於您可以檢測環境，因此還可以開發一個應用程序，該應用程序可以使用NW.js在普通Web服務器和客戶端機器上運行。通過一些技巧，並且由於強大的Chromium引擎，用戶幾乎感覺不到與原生應用程序的區別。

創建新的NW.js項目時，首先確定您要使用的框架、模塊加載器和預處理器——取決於您熟悉的內容——或者直接從頭開始。做出這些決定後，您可以找到適合您需求的NW.js樣板。如果沒有合適的樣板，您可以使用基於本教程的應用程序作為基礎。

您首選的樣板是什麼？或者您首選哪些技術來開發NW.js應用程序？在本文中使用NW.js示例而不是待辦事項應用程序實現是否有效？請在評論中告訴我。

關於使用NW.js的跨平台桌面應用程序的常見問題解答 (FAQs)

NW.js與其他跨平台桌面應用程序框架的主要區別是什麼？

NW.js是開發跨平台桌面應用程序的強大工具。與其他框架不同，NW.js允許開發人員使用HTML、CSS和JavaScript編寫代碼，這些語言通常用於Web開發。這使得Web開發人員更容易過渡到桌面應用程序開發。此外，NW.js具有一個獨特的功能，允許直接訪問DOM中的Node.js API，從而實現更複雜和強大的功能。

如何開始使用NW.js？

要開始使用NW.js，您首先需要從官方網站下載並安裝它。安裝完成後，您可以創建一個新的項目目錄，添加您的HTML、CSS和JavaScript文件，然後使用NW.js可執行文件運行您的應用程序。 NW.js文檔提供了有關如何入門的詳細指南。

我可以將NW.js用於商業項目嗎？

是的，您可以將NW.js用於商業項目。 NW.js是開源的，並且可以免費使用，這使其成為開發跨平台桌面應用程序的經濟高效的解決方案。但是，需要注意的是，任何使用的第三方模塊可能都有其自身的許可要求。

如何打包和分發我的NW.js應用程序？

打包和分發NW.js應用程序涉及創建可以在目標平台上運行的獨立可執行文件。這可以使用nw-builder或webpack等工具來完成。打包後，應用程序可以通過各種渠道分發，例如直接下載或應用商店。

NW.js支持哪些平台？

NW.js支持各種平台。它可以用於為Windows、Mac和Linux開發應用程序。這種跨平台支持是使用NW.js的關鍵優勢之一，因為它允許開發人員編寫一次代碼並在多個平台上運行。

如何調試我的NW.js應用程序？

調試NW.js應用程序類似於調試Web應用程序。您可以使用NW.js捆綁提供的Chrome開發者工具進行調試。這些工具提供了許多用於檢查和調試代碼的功能。

我可以在我的NW.js應用程序中使用Node.js模塊嗎？

是的，NW.js的關鍵功能之一是能夠直接在DOM中使用Node.js模塊。這允許在您的應用程序中實現更複雜和強大的功能。您可以在NW.js應用程序中使用npm上提供的數千個模塊中的任何一個。

如何更新我的NW.js應用程序？

更新NW.js應用程序涉及用新版本的應用程序替換舊版本的應用程序。這可以由用戶手動完成，或者您可以使用nw-updater等模塊在應用程序中實現自動更新功能。

我可以使用NW.js訪問原生API嗎？

是的，NW.js允許通過Node.js直接訪問原生API。這意味著您可以在應用程序中使用諸如文件系統、網絡、設備等原生功能。這是NW.js優於傳統Web技術的一個關鍵優勢。

如何優化我的NW.js應用程序的性能？

優化NW.js應用程序的性能涉及各種技術，例如最小化和連接JavaScript文件、優化圖像以及使用高效的算法和數據結構。此外，您可以使用Chrome開發者工具來分析和調試性能問題。

This revised output maintains the original image placement and format, rephrases sentences and paragraphs for originality while preserving the core meaning, and uses more concise and impactful language. It also addresses the slightly repetitive nature of the original FAQ section.

以上是使用NW.JS構建跨平台桌面應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！