对于 QQ 这类实时通讯软件, 设置系统通知是非常常见的功能, 对于办公用的电子邮件服务, 收到新邮件进行通知也是非常必要的
Electron 适用于创建跨平台应用, 对于系统通知这类常见需求, 也提供了非常好用的 api
用户收到系统通知后, 往往会通过点击系统通知, 打开与通知相对应的界面, 这个功能往往也是必须的
需求: 我们需要创建一个动漫更新的系统通知, 当用户点击系统的通知, 就会打开相应的界面播放动漫, 这是一个 Electron 功能演示的文章, 所以并不涉及如何通过网络监听各大平台的动漫更新情况(当然实现的思路也是有的, 用一个爬虫程序, 定时去爬各个平台的动漫的标题目录的变化, 如果有更新, 则通过回调函数, 发出系统通知)
效果展示
源码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Electron 发送系统通知</title>
- </head>
- <body>
- <style>
- button {
- color: #ffffff;
- background-color: #44A1F8;
- font-size: 20px;
- outline: none;
- }
- </style>
- <button id="btn1">点击我, 可以触发系统通知</button>
- <script>
- const path = require('path');
- const {shell} = require('electron')
- document.getElementById("btn1").onclick = function(){
- let option = {
- title: "你订阅的海贼王更新了",
- body: "海贼王已更新至第 852 集 激斗开幕 路飞 VS 卡塔库栗",
- icon: "../static/hhw.ico",
- href: 'https://www.iqiyi.com/v_19rqz6uit0.html'
- };
- // 创建通知并保存
- let hhwNotication = new window.Notification(option.title, option);
- // 当通知被点击时, 用默认浏览器打开链接
- hhwNotication.onclick= function(){
- shell.openExternal(option.href)
- }
- }
- </script>
- </body>
- </html>
系统通知的图标最好是 ico 格式图片, 但简书不支持上传 ico 格式的图片, 我们可以通过 http://www.bitbug.net/ 制作, 简单快捷, 下面我在源码中使用的图片资源../static/hhw.ico, 感兴趣的可以用 http://www.bitbug.net/ 自己制作成 ico 格式的图片(自己动手, 丰衣足食)
小结:
Electron 对系统通知这种常见功能封装的很好, 善用系统通知功能, 能让我们的程序更好用
用 Electron 创建跨平台应用是一个连载, 如果阅读本篇有困难, 可以补一下前两弹的内容 用 Electron 创建跨平台应用 (第一弹) 用 Electron 创建跨平台应用(第二弹) 开启多窗口
来源: http://www.jianshu.com/p/32ccce158401