Building a Cross-platform Desktop App with NW.js
- 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:
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
nwjctool, 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.
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%