Electron — Getting the tray right

Electron has been coming up as the choice of frame work to be used when porting a project which was formerly a web app to a desktop app (or adding additional functionalities when using the web app over on desktop — the case we handled at P2P.inc)

Problems with the default setup

The tray in electron serves as a quick access to the application’s functionalities without necessarily fiddling around with the application window itself.

However, the actual usage goes much deeper than the above mentioned definition and is often overlooked until teams start running into major issues because of not configuring their tray correctly!

Nonfunctional keyboard shortcuts — Mac

You might be surprised to know that unless you configure your tray code correctly, the general accelerators like CMD+C CMD+V to certain mac specific accelerators like CMD+Q and CMD+W won’t work at all.

It’s funny to think, but we need to explicitly define these in order to make sure simple events like copy paste work fine

Things that show up on mac will not show up on windows

While this is a no brainer at the first look, there are many things that will not show up the same way they do on mac vs on windows! This further emphasizes the fact that development teams need to ensure that they use a variety OS’s while developing/performing QA even if electron has a general perception of being set-it-up once and run it on any OS. We ran into this while adding a visual view to the working timer that employee's run while working - this timer gets displayed and refreshed by the tray's title - an API only available on mac!

These were the things I came across while developing a cross-platform app using electron! Hope this proves helpful to your team!

Originally published at https://viral98.github.io on January 25, 2021.