- 對(duì)于QQ這類實(shí)時(shí)通訊軟件, 設(shè)置系統(tǒng)通知是非常常見的功能, 對(duì)于辦公用的電子郵件服務(wù), 收到新郵件進(jìn)行通知也是非常必要的
- Electron適用于創(chuàng)建跨平臺(tái)應(yīng)用, 對(duì)于系統(tǒng)通知這類常見需求, 也提供了非常好用的api
- 用戶收到系統(tǒng)通知后, 往往會(huì)通過點(diǎn)擊系統(tǒng)通知, 打開與通知相對(duì)應(yīng)的界面, 這個(gè)功能往往也是必須的
需求: 我們需要?jiǎng)?chuàng)建一個(gè)動(dòng)漫更新的系統(tǒng)通知, 當(dāng)用戶點(diǎn)擊系統(tǒng)的通知, 就會(huì)打開相應(yīng)的界面播放動(dòng)漫, 這是一個(gè)Electron功能演示的文章, 所以并不涉及如何通過網(wǎng)絡(luò)監(jiān)聽各大平臺(tái)的動(dòng)漫更新情況(當(dāng)然實(shí)現(xiàn)的思路也是有的, 用一個(gè)爬蟲程序, 定時(shí)去爬各個(gè)平臺(tái)的動(dòng)漫的標(biāo)題目錄的變化, 如果有更新, 則通過回調(diào)函數(shù), 發(fā)出系統(tǒng)通知)
效果展示
源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electron發(fā)送系統(tǒng)通知</title>
</head>
<body>
<style>
button {
color: #ffffff;
background-color: #44A1F8;
font-size: 20px;
outline: none;
}
</style>
<button id="btn1">點(diǎn)擊我,可以觸發(fā)系統(tǒng)通知</button>
<script>
const path = require('path');
const {shell} = require('electron')
document.getElementById("btn1").onclick = function(){
let option = {
title: "你訂閱的《海賊王》更新了",
body: "《海賊王》已更新至第852集 激斗開幕 路飛VS卡塔庫(kù)栗",
icon: "../static/hhw.ico",
href: 'https://www.iqiyi.com/v_19rqz6uit0.html'
};
// 創(chuàng)建通知并保存
let hhwNotication = new window.Notification(option.title, option);
// 當(dāng)通知被點(diǎn)擊時(shí), 用默認(rèn)瀏覽器打開鏈接
hhwNotication.onclick= function(){
shell.openExternal(option.href)
}
}
</script>
</body>
</html>
系統(tǒng)通知的圖標(biāo)最好是ico格式圖片, 但簡(jiǎn)書不支持上傳ico格式的圖片, 我們可以通過http://www.bitbug.net/ 制作, 簡(jiǎn)單快捷, 下面我在源碼中使用的圖片資源
../static/hhw.ico, 感興趣的可以用http://www.bitbug.net/ 自己制作成ico格式的圖片(自己動(dòng)手, 豐衣足食)
小結(jié):
Electron對(duì)系統(tǒng)通知這種常見功能封裝的很好, 善用系統(tǒng)通知功能, 能讓我們的程序更好用
用Electron創(chuàng)建跨平臺(tái)應(yīng)用是一個(gè)連載, 如果閱讀本篇有困難,可以補(bǔ)一下前兩彈的內(nèi)容
用Electron創(chuàng)建跨平臺(tái)應(yīng)用(第一彈)
用Electron創(chuàng)建跨平臺(tái)應(yīng)用(第二彈)開啟多窗口
