借助Electron打通平台与用户通知（macOS系统）

简单介绍Electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。

里面用到的三大核心：

主进程（main.js）：处于Node.js环境下，可以与用户电脑系统进行交互
预加载桥（preload.js）：采用IPC通信，作为主进程和渲染进程之间通信的桥梁
渲染进程（浏览器环境）：一般我们可以将我们的主体项目跑在这个进程中

Electron具体使用可学习官网：创建您的第一个应用程序 | Electron

具体通知实现（系统通知+自定义通知）

系统通知

目标效果：渲染进程中的某个操作可以触发系统通知，用户看到系统通知后点击通知中的按钮可以触发渲染进程中的某个操作

主要实现方式：new Notification。官网地址：通知 |电子

复制代码

const notification = new Notification({
    title: '标题',            //通知标题
    subtitle: 'subtitle',    //副标题
    body: userId,            //通知内容
    timeoutType: 'never',
    actions: [               //定义通知中按钮以及按钮文案
      { type: 'button', text: 'buttonText' },
    ],
    closeButtonText: 'Later',
    hasReply: false,
  });

notification.show();

notification.on('action', () => {
//点击按钮后的交互操作，比如可以往渲染进程中发送信息来触发渲染进程中的某些操作
})

总结：主要是借助官方的Notification方案以及把进程间的通信梳理清楚就可以实现，简单一些，不过通知样式跟随系统而定。

自定义通知

目标效果：能够在桌面上悬浮的头像窗口旁边出现一个弹窗来显示通知的消息，并且用户拖动头像窗口移动时，通知窗口也会随着移动

预期效果（粗糙版）：

主要实现方案：进程间通信+新增"通知"窗口及组件

渲染进程中通知主进程去创建一个新的通知窗口来存放通知信息的组件
又在主进程中把通知的具体信息通信传到具体的"气泡"通知组件中
在头像窗口中监听自己的位置，然后把实时位置同步给通知窗口，实现"跟随"效果

总结

总的来说，就是把我们用其他框架比如react、nextjs写的主体项目当作一个渲染进程，通过与主进程之间的通信来：

调用现成的Notification来操作系统通知（系统通知）
创建一个新的通知窗口来存放通知信息（自定义通知）

关于Electron目前也刚学习没多久，如果有理解有误的地方欢迎大家指正~