[New] Notification on app icon

src/background.custom.js

@@ -3,13 +3,12 @@
 // It doesn't have any windows which you can see on screen, but we can open
 // window from here.
 
-import { app, ipcMain, BrowserWindow } from 'electron';
+import { app, BrowserWindow, ipcMain, nativeImage, } from 'electron';
 import windowStateKeeper from './background/windowState';
 import certificate from './background/certificate';
 import idle from '@paulcbetts/system-idle-time';
 import { checkForUpdates } from './background/autoUpdate';
 
-
 process.env.GOOGLE_API_KEY = 'AIzaSyADqUh_c1Qhji3Cp1NE43YrcpuPkmhXD-c';
 
 let screenshareEvent;
@@ -124,6 +123,11 @@ export function afterMainWindow (mainWindow) {
         event.returnValue = idle.getIdleTime();
     });
 
+    ipcMain.on('update-taskbar-icon', (event, data, text) => {
+        const img = nativeImage.createFromDataURL(data);
+        mainWindow.setOverlayIcon(img, text);
+    });
+
     certificate.initWindow(mainWindow);
 
     checkForUpdates();

src/scripts/start.js

@@ -1,6 +1,6 @@
 /* globals $ */
 
-import { remote, ipcRenderer } from 'electron';
+import { ipcRenderer, remote } from 'electron';
 import i18n from '../i18n/index.js';
 import servers from './servers';
 import sidebar from './sidebar';
@@ -14,7 +14,21 @@ sidebar.on('badge-setted', function () {
     if (process.platform === 'darwin' && badge.showAlert) {
         remote.app.dock.setBadge(badge.count.toString());
     }
+
+    if (process.platform === 'win32') {
+        const mainWindow = remote.getCurrentWindow();
+        if (badge.showAlert) {
+            if (!mainWindow.isFocused()) {
+                mainWindow.flashFrame(true);
+            }
+            mainWindow.webContents.send('render-taskbar-icon', badge.count);
+        } else {
+            mainWindow.setOverlayIcon(null, '');
+        }
+    }
+
     tray.showTrayAlert(badge);
+
 });
 
 export const start = function () {
@@ -123,6 +137,30 @@ export const start = function () {
         validateHost().then(function () {}, function () {});
     });
 
+    ipcRenderer.on('render-taskbar-icon', (event, messageCount) => {
+        // Create a canvas from unread messages
+        function createOverlayIcon (messageCount) {
+            const canvas = document.createElement('canvas');
+            canvas.height = 128;
+            canvas.width = 128;
+
+            const ctx = canvas.getContext('2d');
+            ctx.beginPath();
+
+            ctx.fillStyle = 'red';
+            ctx.arc(64, 64, 64, 0, 2 * Math.PI);
+            ctx.fill();
+            ctx.fillStyle = '#ffffff';
+            ctx.textAlign = 'center';
+            canvas.style.letterSpacing = '-4px';
+            ctx.font = 'bold 92px sans-serif';
+            ctx.fillText(String(Math.min(99, messageCount)), 64, 98);
+
+            return canvas;
+        }
+        ipcRenderer.send('update-taskbar-icon', createOverlayIcon(messageCount).toDataURL(), String(messageCount));
+    });
+
     const submit = function () {
         validateHost().then(function () {
             const input = form.querySelector('[name="host"]');

src/scripts/tray.js

@@ -129,9 +129,9 @@ function showTrayAlert (badge, status = 'online') {
     }
 
     const imageTitle = getImageTitle(badge.title, badge.showAlert, badge.count);
+    const trayImagePath = getTrayIcon(process.platform, badge.showAlert, imageTitle, status);
 
     mainWindow.flashFrame(badge.showAlert, imageTitle);
-    const trayImagePath = getTrayIcon(process.platform, badge.showAlert, imageTitle);
     mainWindow.tray.setImage(trayImagePath);
 
     if (process.platform === 'darwin') {