Building a Cross-platform Desktop App with NW.js

NW.js is a framework for creating native applications using web technologies like HTML, JavaScript and CSS. In the simplest case, you're developing a web application using your normal workflow. At the end of the process, you run a generator that compiles everything to a native application that then just displays your web application like a browser does. These applications are called "hybrid apps".

Hybrid apps aren't just great because they're written in languages you're already familiar with (HTML, JavaScript and CSS), but also because they offer essential advantages over normal web apps:

• Control over browser and browser version (you know which browser your application is called by). NW.js hybrid apps are displayed using Chromium --- an open-source browser running behind Google Chrome. Therefore, apps that are working in Chrome should also work with NW.js.
• Control over viewports. You could, for example, define a fixed or minimum/maximum viewport.
• No same-origin policy restrictions due to local files. If you open a local file from the file system, the browser blocks XMLHttpRequest requests of files that aren't located within the same directory. This behavior can be disabled in NW.js apps.

They also offer custom APIs that bring the following advantages:

• Node.js integration
• clipboard access
• access to the file system
• hardware access (e.g. to get a list of printers)
• tray icons
• custom file chooser dialogs
• shell integration (open files or URLs in default file explorer or browser)
• the option to customize the entire window (close buttons, menu bar) and context menus
• the ability set and get zoom level.

Sounds great? Then let's get started. In this article, we'll become familiar with NW.js in practice and learn how to create a hybrid application. An example application that was built using the instructions from this article can be found on GitHub.

Advantages of NW.js in Comparison to Electron

First, there's one thing to mention: NW.js isn't the only framework for hybrid apps. There's another competitor called Electron. It started in 2013, two years after NW.js, but because it's from GitHub it quickly became well known. Now you might be interested in the differences between them. Here are the advantages of NW.js compared to Electron:

• Supports chrome.* APIs. These APIs can be used to interact with the browser. (You can find more information about this in the NW.js docs.)
• Has Chrome apps support. Chrome apps are packaged applications that are written with web languages. (More info in the Chrome developer docs.) These applications are different from NW.js, because they have no Node.js integration and are published using the Chrome Web Store. (Chromium will remove its support until August, 2018 (see their blog post). But according to this post NW.js will still support Chrome apps.)
• Supports NaCl (Native Client) and PNaCl (Portable Native Client) applications. They focus on performance and are therefore primarily written in C and C++. (See this tutorial about how to use them in NW.js.)
• Has a V8 snapshot source code protection, used to secure your application's source code. Using the nwjc tool, your code will be compiled to native code. (See this article for more information.)
• Has a built-in PDF viewer.
• Allows print previews.
• Supports Node.js integration in Web Workers. They are used to write multi-threaded applications.

However, Electron also has some advantages worth mentioning:

• Built-in auto-updater (you can follow this issue about an auto-updater for NW.js).
• Automatic crash reporting to a remote server. NW.js only writes a local file that can then be submitted manually.

There's also a fundamental difference. NW.js applications specify their entry point in the form of an HTML file. This HTML file will be opened in the GUI directly.

Electron applications, on the other hand, specify a JavaScript file as their entry point. This JavaScript file is opened in a separate main process, and can then open an HTML file in the GUI. This means that you could theoretically run Electron apps without a GUI. Also, closing the GUI won't close the main process; you'll need to terminate it manually by calling an API method.

While Electron opens the door for desktop applications written with JavaScript and without a GUI, NW.js applications are probably easier to set up, in case you just want to display an HTML-based application.

Note: If you really prefer the advantages of Electron, check out SitePoint's recent article on creating desktop apps with Electron.

Continue reading %Building a Cross-platform Desktop App with NW.js%

by Julian Motz via SitePoint