Question

11.1 消息通知

1. Electron 实现消息通知

Electron 里面的消息通知是基于 h5 的通知 api 实现的

文档 https://developer.mozilla.org/zh-CN/docs/Web/API/notification

1. 新建 notification.js

// h5api 实现通知
const path = require('path')

let options = {
  title: 'electron 通知 API',
  body: 'hello poetries',
  icon: path.join('../static/img/favicon2.ico') // 通知图标
}


document.querySelector('#showNotification').onclick = function () {
  let myNotification  = new window.Notification(options.title, options)
  
  // 消息可点击
  myNotification.onclick = function () {
    console.log('click notification')
  }
}

2. 引入

<!--src/index.html-->

<button id="showNotification">弹出消息通知</button>
<script src="render/notification.js"></script>

mac 上的消息通知

11.2 监听网络变化

1. 基本使用

 // 监听网络变化
// 端开网络 再次连接测试
 window.addEventListener('online', function(){
  console.log('online')
 }); 
 
 window.addEventListener('offline', function(){
  console.log('offline')
 });

2. 监听网络变化实现消息通知

// 端开网络 再次连接测试
// 监听网络变化实现消息通知
 window.addEventListener('online', function(){
  console.log('online')
 }); 
 window.addEventListener('offline', function(){
  // 断开网络触发事件
  var options = {
    title: 'QQ 邮箱',
    body: '网络异常，请检查你的网络',
    icon: path.join('../static/img/favicon2.ico') // 通知图标
  }
  var myNotification  = new window.Notification(options.title, options)
  myNotification.onclick = function () {
    console.log('click notification')
  }
 });