（九）electron通知Notification使用

electron自带的Notification模块

从主进程发通知

// background.js
const { app, BrowserWindow, ipcMain, Notification } = require("electron");

const NOTIFICATION_TITLE = "通知title";
const NOTIFICATION_BODY = "通知内容：从主进程来的通知";

const isAllowedNotice = Notification.isSupported();

// 设置通知标题，否则显示electron app.Electron
app.setAppUserModelId("hello world");

const showNotification = () => {
  const iconPath = __dirname + "/assets/car.png";
  if (isAllowedNotice) {
    const options = {
      title: NOTIFICATION_TITLE,
      body: NOTIFICATION_BODY,
      silent: true,
      icon: iconPath,
    };
    new Notification(options).show();
  }
};
// 窗口打开后显示通知
app.whenReady().then(()=>{
 const mainWindow = createWindow();
 showNotification();
})

运行结果：

渲染进程发通知

window对象的Notification模块

// index.vue
<div>
    <el-button @click="notice">通知</el-button>
</div>
<script setup>
import iconPath from '../assets/car.png'
const notice = () => {
  const notice = new window.Notification("通知title", { body: "通知内容：从渲染进程来的通知", icon: iconPath });
  notice.onclick = () => {
    console.log("click notice");
  };
};
</script>

运行结果：

缺点

浏览器自带的通知，样式不能修改，而且mac和windows存在差异