System notifications in desktop application

Implementing System Notifications in Desktop Applications

System notifications are one of the few channels through which a desktop app communicates with users even when the window is minimized. Implementation depends on the stack: Electron (Node.js Notification), Tauri (tauri-plugin-notification), or browser Notification API for PWA.

Electron: Native Notifications

// main/notifications.ts
import { Notification, nativeImage, app } from 'electron'
import path from 'path'

export interface NotificationOptions {
  title: string
  body: string
  icon?: string
  urgency?: 'normal' | 'critical' | 'low'
  actions?: Array<{ type: 'button'; text: string }>
  timeoutType?: 'default' | 'never'
}

export function sendNotification(opts: NotificationOptions): Notification {
  const iconPath = opts.icon
    ? nativeImage.createFromPath(path.resolve(opts.icon))
    : nativeImage.createFromPath(
        path.join(app.getAppPath(), 'resources', 'icon.png')
      )

  const n = new Notification({
    title: opts.title,
    body: opts.body,
    icon: iconPath,
    urgency: opts.urgency ?? 'normal',
    timeoutType: opts.timeoutType ?? 'default',
    actions: opts.actions,
  })

  n.on('click', () => {
    const { BrowserWindow } = require('electron')
    const win = BrowserWindow.getAllWindows()[0]
    if (win) {
      if (win.isMinimized()) win.restore()
      win.focus()
    }
  })

  n.show()
  return n
}

On Windows 10+, set App User Model ID:

// main/index.ts
import { app } from 'electron'

app.setAppUserModelId('com.yourcompany.yourapp')

IPC: Sending from Renderer

// preload/index.ts
import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('notifications', {
  send: (opts: NotificationOptions) =>
    ipcRenderer.invoke('notification:send', opts),
})

// renderer/hooks/useNotification.ts
export function useNotification() {
  const send = (opts: NotificationOptions) => {
    if (window.notifications) {
      window.notifications.send(opts)
    }
  }
  return { send }
}

Tauri: Notification Plugin

# src-tauri/Cargo.toml
[dependencies]
tauri-plugin-notification = "2"

// src/lib/notifications.ts
import {
  isPermissionGranted,
  requestPermission,
  sendNotification,
} from '@tauri-apps/plugin-notification'

export async function notify(title: string, body: string) {
  let permissionGranted = await isPermissionGranted()

  if (!permissionGranted) {
    const permission = await requestPermission()
    permissionGranted = permission === 'granted'
  }

  if (permissionGranted) {
    sendNotification({ title, body })
  }
}

Browser Notification API (PWA)

// src/services/notification.service.ts
export class NotificationService {
  static async requestPermission(): Promise<boolean> {
    if (!('Notification' in window)) return false
    if (Notification.permission === 'granted') return true
    if (Notification.permission === 'denied') return false

    const result = await Notification.requestPermission()
    return result === 'granted'
  }

  static async send(title: string, options: NotificationOptions = {}): Promise<Notification | null> {
    const granted = await this.requestPermission()
    if (!granted) return null

    const notification = new Notification(title, options)
    if (options.onClick) {
      notification.onclick = () => {
        window.focus()
        options.onClick?.()
      }
    }
    return notification
  }
}

For Service Worker (PWA background):

// service-worker.js
self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? {}
  event.waitUntil(
    self.registration.showNotification(data.title ?? 'Notification', {
      body: data.body,
      icon: '/icons/icon-192x192.png',
      badge: '/icons/badge-72x72.png',
      data: { url: data.url },
      actions: data.actions ?? [],
    })
  )
})

self.addEventListener('notificationclick', (event) => {
  event.notification.close()
  const url = event.notification.data?.url ?? '/'
  event.waitUntil(clients.openWindow(url))
})

Notification Queue

// src/services/notification-queue.ts
export class NotificationQueue {
  private queue: QueuedNotification[] = []
  private shown = new Set<string>()
  private timer: ReturnType<typeof setTimeout> | null = null
  private readonly cooldownMs: number

  constructor(cooldownMs = 3000) {
    this.cooldownMs = cooldownMs
  }

  enqueue(id: string, title: string, body: string) {
    if (this.shown.has(id)) return // deduplication
    this.queue.push({ id, title, body, timestamp: Date.now() })
    this.process()
  }

  private process() {
    if (this.timer) return
    const item = this.queue.shift()
    if (!item) return

    this.shown.add(item.id)
    new Notification(item.title, { body: item.body })

    setTimeout(() => this.shown.delete(item.id), 10_000)

    this.timer = setTimeout(() => {
      this.timer = null
      this.process()
    }, this.cooldownMs)
  }
}

Basic integration: 4 hours. Full implementation with queue, deduplication, custom Toast XML, action buttons, and tests: 1–2 days.