Typetalk desktop appTypetalk desktop app

The other day, we released a desktop app for our business chat service, Typetalk. Perhaps some of you opened the Typetalk.app package and found traces of Electron? Indeed, our app is an implementation based on Electron.

Electron allows you to use web technologies like JavaScript and CSS to develop desktop apps. Many modern apps are based on Electron (like GitHub' Atom text editor), and there are already many articles about how to do it. However, there are several important considerations when publishing your app officially, like code signing. In this article I will discuss three things that are specifically necessary to officially release an Electron-based app for Windows or Mac.

1.Don’t Forget Your Icons!

You need to prepare a custom app icon and a custom tray icon.

The App Icon

Electron is a desktop app, so it will need an icon, a “face.” If you don't prepare an icon, your app will use the default Electron icon, and you will not be allowed to publish it as a product.

The default Electron iconThe default Electron icon

Windows and Mac use different extensions and image dimensions for their app icons:

OS Extension Dimensions
Windows .ico 256x256
Mac .icns 1024x1024
 
We prepared these images for our app and included them in the Typetalk app build, using npm's module: electron-packager.

Typetalk app iconTypetalk app icon


The Tray Icon

Mac tray iconMac tray icon

Windows tray iconWindows tray icon


OS Extension Dimensions
Windows .png 32x32 64x64(@2x) 96x96(@3x)
Mac .png 18x18 36x36(@2x) 54x54(@3x)

According to documentation at Windows Developer Center, the Windows tray icon should be 16 x 16px for standard resolution and there should also be larger sizes, like 32 x 32px, for higher resolution. We found that specifying the size in Electron made the icon appear smashed, so it took some trial and error to make the icon display beautifully and increase its resolution appropriately.

In Mac, the tray icon appears in the status bar - which is 22px high. So we made our Mac tray icon 18 x 18px, accounting for margins. For each, we made 3 tray icons: to indicate normal status, having unread messages, and being offline.

The color of the icons is important because it has to be easy to see against the background color. The Mac status bar is almost always white, and the Windows tray area is almost always dark, so we decided to make black icons for Mac and white icons for Windows.

All six tray iconAll six tray icon


2.Sign Your Code!

Windows

To sign code for windows, you need to purchase a code signing certificate and use it to sign the code while you are making the installer. For Typetalk we made the installer using npm's module: electron-installer-squirrel-windows. This module uses package.json to pass the code signature information to SignTool.exe. We will update this description later.

Mac

Mac has a security structure called Gatekeeper to prevent installation of fraudulent apps. Your app can be recognized as bonafide if it is accepted by the Mac AppStore, but if you want to distribute outside the store, directly, you will need to apply for an Apple Developer ID.

Install the Developer ID certificate on Buildmachine's keychain. Then when building the app with electron-packager, use the --sign option. Be careful, the name you pass with that option must be identical to the name on the Developer ID installed in the keychain.

3.Setup AutoUpdates!

Electron has an AutoUpdater module, which enables automatic update detection and installation. To use it, you need to setup your app and your update server.

Setting up the App

Setting up the app is simple. Prepare an API to check for updates, and write code to specify what to do when an update is available.

You should do some other things, like handle errors that might occur, and keep a reference document.

Setting up the Server

In our company, we didn't want to incorporate an update API into the Typetalk Web service, and felt it wasn't necessary to take the trouble to prepare an update server, so we implemented a simple API combining Amazon API Gateway and AWS Lambda.

The above enables this type of dialog.

confirmation dialog for updateconfirmation dialog for update

At first, Electron's autoUpdater module was only Squirrel.Mac and did not adopt to Windows, so we wrote a simple wrapper module to solve the problem. But very recently Squirrel.Windows become available, and you can now use Windows update detection through autoUpdater.

Additional Notes

Conclusion

It's not so difficult to make an Electron app that works, but if you want to actually publish it as a product, you have to take care of some details, like those I've introduced in this article.

Electron is not the only option. There are also other libraries for developing desktop apps with web technologies, and an increasing number of apps are being published using them. Using SPA you can make apps with small screen transitions. Using CSS3 you can create rich animations. I think this is why desktop apps built with web technologies are so popular and will become even more so.

Please try it too!


 

We are hiring in New York, Tokyo, Kyoto and Fukuoka now!  For more details