Electron定制mac上的通知栏效果

Electron项目中的通知栏功能使用了node-notifier，在另起炉灶，修改了项目名称和logo后，发现通知栏的icon和标题仍是原来的，深入研究后，发现修改通知栏并不那么简单...

在mac上，node-notifier是通过调用封装好的terminal-notifier实现，虽然，通过提供的nodejs接口，我们可以传递通知消息的title, message等内容，但显示的图标和应用名称仍是terminal-notifier的。

terminal-notifier效果

我们需要重定制一个terminal-notifier的mac应用。

参考

相关讨论：Issue #71 for more info

流程

1. clone xcode项目

   先clone terminal-notifier的源码，https://github.com/mikaelbr/terminal-notifier

   打开后缀为.xcodeproj的文件（确保已安装后Xcode）

2. 修改项目名

   这一步是为了通知栏显示的应用名为我们需要的。修改如下图两处：

   

   修改项目名称

3. 修改icon

   项目下Terminal.icns是通知栏图标加载的应用，.icns是mac应用使用的图片的格式，如果已经有过打包Electron项目的经验，这里应该知道如何生成.icns文件。这里推荐在线转换网站iconverticons。

   用我们的icns文件替换项目下的Terminal.icns，同时修改项目配置：

   

   修改icon

4. 编译

   完成自定义的配置后，编译项目（Cmd + Shift + B）。

   编译成功后，得到uplink.app文件，右击进入其Finder中位置。双击运行，弹出通知栏如下，已经满足我们的需求：

   

   自定义的效果

   将该app复制到node-notifier的vendor目录下。

5. 修改引用js

   完成以上步骤，发现Electron调起的依然是之前的通知栏，并没有出现我们重编译的效果。分析源码后，我们还需要修改·node-notifier·的源码，让其默认调用我们新编译的app。

   node-notifier/notifiers/notificationcenter

   var utils = require('../lib/utils');
   var Growl = require('./growl');
   var path = require('path');
   var notifier = path.join(
     __dirname,
     // '../vendor/terminal-notifier.app/Contents/MacOS/terminal-notifier'
     '../vendor/uplink.app/Contents/MacOS/uplink'
   );
   

以上。