1. Application
  2. Implementing App Icon Badging, Bouncing and a Progress Bar

Application

Implementing App Icon Badging, Bouncing and a Progress Bar

To provide a native desktop experience, ToDesktop exposes functionality that allows you to manipulate progress bars and the app icon.

Adding Count Badges

INFO

Works on all platforms

You can easily set the counter using the setBadgeCount method. Setting the count to 0 will hide the badge.

        import { app } from '@todesktop/client-core';

app.setBadgeCount(2);

Badge count set to 2 (Mac)

Adding Text Badges

INFO

Works on Mac only

On mac, you have the option to set the set the dock badge to any text you like.

        import { app } from '@todesktop/client-core';

app.dock.setBadge('👋🙊 Hello');

Text badge set to '👋🙊 Hello'

Bouncing dock icon

INFO

Work on Mac only

Bouncing the dock icon has two modes: critical and informational. If no parameters are used then the default is informational.

  • informational — the dock icon will bounce once (for a duration of one second)
  • critical — the dock icon will bounce until either the application becomes active or the request is canceled
        import { app } from '@todesktop/client-core';

// Bounce the dock icon once
app.dock.bounce('informational');

// Bounce the dock icon for 5 seconds
const cancelBounceId = app.dock.bounce('critical');
setTimeout(() => {
  app.dock.cancelBounce(cancelBounceId);
}, 5000);

Showing a progress bar

INFO

Works on all platforms (Windows, Mac and Linux). On Linux, only the Unity desktop environment is supported.

        import { nativeWindow } from '@todesktop/client-core';

// Set progress bar to 75%
nativeWindow.setProgressBar(0.75);

// Set progress bar to intermediate mode. Any value
// greater than `1` will trigger intermediate mode
nativeWindow.setProgressBar(2);

// Remove progress bar. Any value less than `0`
// will remove the progress bar
nativeWindow.setProgressBar(-1);

// Set progress bar to 75% in error mode (Windows only)
nativeWindow.setProgressBar(0.75, {
  // Progress bar modes are only available on Windows.
  // Available modes are: 'indeterminate', 'error', and 'paused'.
  mode: 'error'
});

Progress bar set to 0.75 (Mac)

Putting it all together — An homage to Daft Punk

We made a quick video that puts all the methods together. It's just a bit of fun and not very practical but we hope you enjoy it as much as we enjoyed making it (headphones recommended):

Previous <- Add Custom Code to your Desktop App
Next Add Browser Controls to your Desktop App ->