第九章：Electron 消息通知和网络监听

• 效果

• 消息通知

import path from 'path';

const option = {
  title: 'electron 通知',
  body: 'electron 学习内容,学习内容学习内容学习内容学习内容',
  icon: path.join('static/icon_shop_card.png'),
};
const myNotification = new window.Notification(option.title, option);

• 网络变化

window.addEventListener('online', () => {
  console.log('您的网络已经回复');
});

window.addEventListener('offline', () => {
  console.log('您的网络已经断开');
});

• 详细代码

/* eslint-disable no-console */
/* eslint-disable no-shadow */
/* eslint-disable func-names */
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */

// h5通知api实现
/* **************************通知框********************************* */

import path from 'path';

const option = {
  title: 'electron 通知',
  body: 'electron 学习内容,学习内容学习内容学习内容学习内容',
  icon: path.join('static/icon_shop_card.png'),
};
const myNotification = new window.Notification(option.title, option);


// 点击按钮获取通知

const btn = document.querySelector('#btn');

btn.onclick = function () {
  const option = {
    title: 'electron 通知',
    body: 'electron 学习内容,学习内容学习内容学习内容学习内容',
    icon: path.join('static/icon_shop_card.png'),
  };
  const myNotification = new window.Notification(option.title, option);
  myNotification.onclick = function () {
    console.log('点击了');
  };
};

/* **************************监听网络变化********************************* */

// window.addEventListener('online', () => {
//   console.log('您的网络已经回复');
// });

// window.addEventListener('offline', () => {
//   console.log('您的网络已经断开');
// });


/* **************************监听网络通知********************************* */
window.addEventListener('online', () => {
  console.log('您的网络已经回复');
});

window.addEventListener('offline', () => {
  const option = {
    title: 'electron 学习demo',
    body: '网络连接异常,请检查网络',
  };
  const myNotification = new window.Notification(option.title, option);
  myNotification.onclick = function () {
    console.log('点击了');
  };
});

• 设置win系统下通知默认底部描述信息

在主进程中设置

//设置通知栏底部默认标题
app.setAppUserModelId('*******************')