在Electron Framework中使用本机桌面通知 _Framework

本文概述

实现
通知所有
视窗
苹果系统
Electron的已知问题

借助webkit, 你可以根据需要使用CSS自定义应用程序的UI。可以在你的应用程序窗口内创建花式通知, 但是有时你可能想要向用户通知某些内容, 即使该内容不是一开始就使用该应用程序或已被最小化。

文章图片
这就是为什么我们需要访问操作系统的通知系统, 该通知系统允许你在任何情况下都可以向屏幕上的用户发送消息, 尽管他们正在使用其他应用程序。
但是请记住, 多余的东西都是不好的。你可能需要注意向用户显示此消息的频率, 并请求这样做的许可, 因为过度使用本机通知会令人烦恼和恼怒。
可能你会问自己：为什么不使用webkitNotification API？你也可以将此API与Electron一起使用, 但是不适用于Windows。它可以在Linux和MacOS上使用, 但是它的外观和外观并不相同, 因此建议你在Electron应用程序中使用node-notifier插件。
节点通知程序是用于发送跨平台系统通知的Node.js模块。使用Mac的Notification Center, 使用Linux的notify-osd / libnotify-bin, Windows 8/10的Toasters或Windows早期版本的任务栏Balloons。如果这些条件都不满足, 则使用Growl。
实现为了实现我们的目标, 我们将使用可以通过以下命令在你的项目中下载的节点通知程序库：

npm install --save node-notifier

在此处访问项目的官方资源库。成功安装后, 你将使用require(‘ node-notifier’ )访问通知程序。
重要说明：Electron本身(最新版本)为你提供Notification API, 该API在操作系统中发送简单的通知(与节点通知程序相同的方式)。你可以使用以下代码段尝试使用它。
这三个操作系统都为应用程序提供了向用户发送通知的方法。 Electron方便地允许开发人员使用HTML5 Notification API发送通知, 并使用当前运行的操作系统的本机通知API进行显示。
注意：由于这是HTML5 API, 因此仅在渲染器过程中可用。

// You can use console.log(notification); to see more available propertiesvar notification = new Notification('Title', { body: 'Lorem Ipsum Dolor Sit Amet', title:"Hello", icon:'C:/images/icon.png', // To prevent sound //silent:true, }); notification.addEventListener("click", function(){ alert("Clicked"); }, false); notification.addEventListener("show", function(){ alert("Shown :3"); }, false); notification.addEventListener("error", function(e){ alert("Error :c"); }, false); notification.addEventListener("close", function(){ alert("Closed"); }, false);

如果你认为自己想要更多, 请继续阅读节点通知程序的用法。
通知所有现在, 你只需要开始使用通知程序, 以下代码段显示了一条带有声音和图标的简单消息。
注意：notify方法是跨平台的, 如果你阅读文档, 则可以对每个平台进行更深入的自定义。

const notifier = require("node-notifier"); var onError = function(err, response){ console.error(err, response); }; notifier.notify({ message: "This is the body of the notification.", title: "This will be the title of the notification", // Special sound // Case Sensitive string for location of sound file, or use one of OS X's native sounds // Only Notification Center or Windows Toasters sound: true, //"Bottle", // The absolute path to the icon of the message // (doesn't work on balloons) // If not found, a system icon will be shown icon : "C:/images/ocw-logo.png", // Wait with callback (onClick event of the toast), until user action is taken against notification wait:true }, onError); notifier.on('click', function (notifierObject, options) { // Triggers if `wait: true` and user clicks notification alert("Callback triggered"); });

notify方法是跨平台标准用法, 具有跨平台回退。此方法将在所有平台上以某种方式工作。
但是, notifier允许你根据需要根据每个平台进行自定义, 请参见存储库中有关自定义的详细报告。
视窗烤面包机模块仅适用于Windows> = 8。
本机Windows 8通知中的图像有一些限制：该图像必须是PNG图像, 并且不能超过1024× 1024 px或超过200Kb。你还需要使用绝对路径来指定图像。这些限制归因于Toast通知系统。一个很好的技巧是使用类似path.join或path.delimiter之类的东西来进行跨平台的路径操作。
Windows 10注意：你可能必须激活横幅通知才能显示烤面包。

const WindowsToaster = require('node-notifier').WindowsToaster; var notifier = new WindowsToaster({ withFallback: false, // Fallback to Growl or Balloons? customPath: void 0 // Relative path if you want to use your fork of toast.exe }); notifier.notify({ title: "Title", message: "Message", icon: "c:/path/image.png", // Absolute path to Icon sound: true, // true | false. wait: false, // Wait for User Action against Notification }, function(error, response) { console.log(response); });

对于早期的Windows版本, 将使用任务栏气球(除非激活了后备功能并且正在运行Growl)。
苹果系统 【在Electron Framework中使用本机桌面通知】Native Notification Center需要Mac OS X 10.8或更高版本。如果你使用的是较早的版本, 那么Growl将是你的后备。如果未安装Growl, 则回调中将返回错误。

const NotificationCenter = require('node-notifier').NotificationCenter; var notifier = new NotificationCenter({ withFallback: false, // Use Growl Fallback if < = 10.8 customPath: void 0 // Relative path if you want to use your fork of terminal-notifier }); notifier.notify({ 'title': "Hello world", 'subtitle': void 0, 'message': void 0, 'sound': false, // Case Sensitive string for location of sound file, or use one of OS X's native sounds (see below) 'icon': 'Terminal Icon', // Absolute Path to Triggering Icon 'contentImage': void 0, // Absolute Path to Attached Image (Content Image) 'open': void 0, // URL to open on Click 'wait': false // Wait for User Action against Notification }, function(error, response) { console.log(response); });

声音可以是以下之一：巴索, 打击, 瓶子, 青蛙, 放克, 玻璃, 英雄, 莫尔斯, ??砰, 砰, 流行, 咕r声, 纯水, 潜艇, 叮叮当。如果声音完全正确, 则使用Bottle。
请参阅特定的通知中心示例。
Electron的已知问题在Electron打包中如果将Electron应用程序打包为asar, 则会发现node-notifier将无法加载。由于asar的工作方式, 你无法从asar内部执行二进制文件。作为一个简单的解决方案, 将应用程序打包为asar时, 请确保– unpack node-notifier的供应商文件夹, 以便该模块仍然可以访问通知二进制文件。为此, 你可以使用以下命令来这样做：