darwin-notifications: Migrate darwin-notifications to electron's native Notifications.

app/main/index.ts

@@ -11,6 +11,7 @@ import * as ProxyUtil from '../renderer/js/utils/proxy-util';
 import {sentryInit} from '../renderer/js/utils/sentry-util';
 
 import {appUpdater} from './autoupdater';
+import {showDarwinNotification} from './ipc-helpers';
 import * as AppMenu from './menu';
 import {_getServerSettings, _saveServerIcon, _isOnline} from './request';
 import {setAutoLaunch} from './startup';
@@ -273,6 +274,10 @@ ${error}`
 		toggleApp();
 	});
 
+	ipcMain.on('create-notification', async (event, notificationOptions: Electron.NotificationConstructorOptions, profilePicURL: string) => {
+		await showDarwinNotification(event, notificationOptions, profilePicURL);
+	});
+
 	ipcMain.on('toggle-badge-option', () => {
 		BadgeSettings.updateBadge(badgeCount, mainWindow);
 	});

app/main/ipc-helpers.ts

@@ -0,0 +1,38 @@
+/**
+ * This file contains the functions which make use of Main process APIs with already functioning code in Renderer process.
+ */
+import {Notification, nativeImage} from 'electron';
+
+import fetch from 'node-fetch';
+
+export const showDarwinNotification = async (
+	event: Electron.IpcMainEvent,
+	notificationOptions: Electron.NotificationConstructorOptions,
+	profilePicURL: string
+) => {
+	const profilePic = await getNativeImagefromUrl(profilePicURL);
+	notificationOptions.icon = profilePic;
+
+	const notification = new Notification(notificationOptions);
+	notification.show();
+	notification.on('reply', (_event, response) => {
+		event.sender.send('replied', response);
+	});
+};
+
+/* TODO: Migrate url->dataUri conversion part to renderer process
+	to make use of browser caching of images.
+*/
+const getNativeImagefromUrl = async (imageURL: string) => {
+	try {
+		const response = await fetch(imageURL);
+		const buffer = await response.buffer();
+		const base64String = buffer.toString('base64');
+		const dataUri = `data:image/png;base64,${base64String}`;
+		const image = nativeImage.createFromDataURL(dataUri);
+		return image;
+	} catch (error) {
+		console.error(error);
+		return null;
+	}
+};

app/renderer/js/notification/darwin-notifications.ts

@@ -1,12 +1,10 @@
 import {ipcRenderer} from 'electron';
 
-import MacNotifier from 'node-mac-notifier';
-
 import electron_bridge from '../electron-bridge';
 import * as ConfigUtil from '../utils/config-util';
 
 import {
-	appId, customReply, focusCurrentServer, parseReply
+	customReply, focusCurrentServer, parseReply
 } from './helpers';
 
 type ReplyHandler = (response: string) => void;
@@ -22,30 +20,21 @@ class DarwinNotification {
 	tag: number;
 
 	constructor(title: string, options: NotificationOptions) {
-		const silent: boolean = ConfigUtil.getConfigItem('silent') || false;
-		const {icon} = options;
-		const profilePic = new URL(icon, location.href).href;
-
+		const profilePicURL = new URL(options.icon, location.href).href;
 		this.tag = Number.parseInt(options.tag, 10);
-		const notification = new MacNotifier(title, Object.assign(options, {
-			bundleId: appId,
-			canReply: true,
-			silent,
-			icon: profilePic
-		}));
-
-		notification.addEventListener('click', () => {
-			// Focus to the server who sent the
-			// notification if not focused already
-			if (clickHandler) {
-				clickHandler();
-			}
-
-			focusCurrentServer();
-			ipcRenderer.send('focus-app');
+		const notificationOptions: Electron.NotificationConstructorOptions = {
+			title,
+			body: options.body,
+			silent: ConfigUtil.getConfigItem('silent') || false,
+			hasReply: true,
+			timeoutType: 'default'
+		};
+
+		ipcRenderer.send('create-notification', notificationOptions, profilePicURL);
+		ipcRenderer.on('replied', async (_event: Electron.IpcRendererEvent, response: string) => {
+			await this.notificationHandler({response});
+			ipcRenderer.removeAllListeners('replied');
 		});
-
-		notification.addEventListener('reply', this.notificationHandler);
 	}
 
 	static requestPermission(): void {
@@ -103,8 +92,8 @@ class DarwinNotification {
 		customReply(response);
 	}
 
-	// Method specific to notification api
-	// used by zulip
+	// Method specific to Zulip's notification module, not the package used to create the same.
+	// If at all the need arises to migrate to another API (or npm package), DO NOT REMOVE THIS.
 	close(): void {
 		// Do nothing
 	}

package.json

@@ -147,6 +147,7 @@
   "dependencies": {
     "@electron-elements/send-feedback": "^2.0.3",
     "@sentry/electron": "^2.0.1",
+    "@types/node-fetch": "^2.5.7",
     "@yaireo/tagify": "^3.20.2",
     "adm-zip": "^0.4.16",
     "auto-launch": "^5.0.5",
@@ -161,12 +162,10 @@
     "i18n": "^0.13.2",
     "iso-639-1": "^2.1.4",
     "nan": "^2.14.2",
+    "node-fetch": "^2.6.0",
     "node-json-db": "^1.1.0",
     "semver": "^7.3.2"
   },
-  "optionalDependencies": {
-    "node-mac-notifier": "^1.1.0"
-  },
   "devDependencies": {
     "@types/adm-zip": "^0.4.33",
     "@types/auto-launch": "^5.0.1",