在 Windows 平台上启用 Electron 应用通知的粘性行为

Posted 2023-03-22

【中文标题】在 Windows 平台上启用 Electron 应用通知的粘性行为

【英文标题】：Enable Sticky Behaviour of Electron App Notifications on Windows Platform

【发布时间】：2019-01-21 00:41:32

【问题描述】：

我想在电子桌面应用程序中实现通知的粘性行为，直到用户点击通知本身。

我正在使用 node-notifier 来实现此行为，遵循此 documentaion 并使用 ngx-electron 使用 ElectronService 将 main.js 文件导入角度组件文件中。

这是我的 ma​​in.js 文件：

const notifier = require('node-notifier')
exports.notifier = (msg) =>  
  notifier.notify(
  title: 'Notify Me',
  message: msg,
  wait: true,
  timeout: 1500000,
  sound: true,
  icon:  './assets/images/logo.png'
);

app.component.ts：

import ElectronService from 'ngx-electron';
@Component(
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 
  public main_js : any;

  constructor(private _electronService: ElectronService )  
    this.main_js  = this._electronService.remote.require("./main.js");
    this.getTasks();
  

  getTasks() 
    var message = 'New Task Assigned!!!';
    this.main_js.notifier(message);
  

电子应用通知：

目前，我正在 Windows 平台上检查此通知行为，并且通知一直保持不变，直到且除非用户采取任何操作，包括从键盘按下任何按键或任何鼠标移动。

我希望通知一直停留在屏幕上，直到用户单击通知本身的关闭标签，而不是在单击屏幕的任何其他部分时关闭。

【参考方案1】：

好吧，我无法实现通知的粘性行为 电子。但是，我找到了一个很棒的替代方案 Electron_Tray 和 Node-Notifier 的组合 Balloon_Notifications.

最好的部分是它可以在 Windows 和 Linux 上运行 像魅力一样的平台最终赋予了跨平台的功能。我还没有在mac上测试过，也许它可以工作 也有。这是我测试过的代码：

app.component.ts

import ElectronService from 'ngx-electron';
  @Component(
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  )
  export class AppComponent implements OnInit 
    public main_js : any;

    constructor(private _electronService: ElectronService ) 
      this.main_js  = this._electronService.remote.require("./main.js");
      this.getTasks();
    

    getTasks() 
      var message = 'New Task Assigned!!!';
      this.main_js.notifier(message);
  

ma​​in.js

let tray = null

function createWindow () 
  win = new BrowserWindow(
    width: 800,
    height: 600,
    icon: path.join(__dirname, 'dist/assets/images/logo.png')
  )

  // +++++++  TRAY NOTIFICATIONS  +++++++++ //
  var icon_tray = path.join(__dirname,'dist','assets','images','logo.png');

  tray = new Tray(icon_tray)

  const trayMenuTemplate = [
  
    label: 'Maximize',
    click: function () 
      //For Maximizing the Window
      if(!win.isVisible())  win.show() 
    
  ,

  
    label: 'Minimize',
    click: function () 
      //For Minimizing the Window
      if(win.isVisible())  win.hide() 
    
  ]

  tray.setToolTip('I am Notifier!!!')
  let trayMenu = Menu.buildFromTemplate(trayMenuTemplate)
  tray.setContextMenu(trayMenu)
  tray.displayBalloon(
    title: 'Notifier Realm',
    content: 'Greetings!!!',
    icon: icon_tray
  );

  tray.on('click', () => 
    win.isVisible() ? win.hide() : win.show()
  )


exports.notifier = (msg) =>  
// pops out the app window if minimized and show the notification 
  if(win.isVisible())
    // win.hide()
   else 
    win.show()
  
  if(msg != undefined) 
    notifier.notify(
      title: 'Nethues Notify',
      message: msg,
      wait: true,
      icon:  './assets/images/logo.png'
    );
  

现在，每当应用程序窗口最小化并分配新任务时 一个不同的用户，窗口在所有应用程序上方弹出 （屏幕上打开的任何内容）并显示新分配的任务 通知用户。

【讨论】：

我已经更新了答案。也许它可以帮助你了解