Chapter 8. Creating tray applications
This chapter covers
- Building tray-based applications
- Displaying application windows from the tray menu
- Adding menu items to the tray menu
Some apps aren’t as beefy as others and focus on doing something specific and doing it well. They also focus on being accessible to the user without having to switch windows or switch focus from the current app that’s in front of them. As a result, app functionality is made available from the tray bar of the OS, which is located at the bottom of the Windows GUI, at the top of the screen on a Mac, and—depending on what flavor of distribution and graphical desktop environment you use—either the top or bottom on Linux (Gnome tends to be at the top, and KDE tends to be at the bottom).
Tray apps tend to be utility apps like timers, music controls, and instant messaging. They use menus and changing icons to communicate the status of the app. In this chapter, we’ll look at how you can use NW.js’s UI API to make tray apps by creating a small utility tray app with a dropdown menu. We’ll then replicate this example with Electron to compare its tray app functionality.
You’ll build something small and simple, as shown in figure 8.1.
Let’s say you have a simple Hello World NW.js app, and you’d like to give it a tray icon to access it from the OS’s main bar. Figure 8.2 shows what you want to create in the menu bar.