Electron问题记录01:关于electron的notification在win10下不显示问题
0.问题描述
在学习electron官网的notification例程时, 使用官网的代码运行时无法按照预期弹出窗口,在查询官网时发现以下解决方法.
官网解决方法:在 Windows 10 上，您的应用程序的快捷方式必须安装到启动菜单中，包含一个 Application User Model ID. 这可能会在开发过程中被过度杀死，因此将 node_modules\electron\dist\electron.exe 添加到您的开始菜单中也做到了 的技巧。 在Explorer, 右键单击和“Pin 开始菜单”中导航到文件。 然后您需要添加 app.setAppUserModelId(process.execPath) 到主进程才能看到通知。
说实话, 没看太明白, 所以在网上找解决方法, 发现一位网友的解决方法链接
1.解决过程
首先确定运行环境:
- Electron: v21.3.1
- Node.js: v16.16.0
- NPM: v8.11.0
(1)首先确定系统权限有没打开
如果系统限制了通知显示，那么后续的操作都是无用的，所以先确定下是否都已开启
(2)将Electron主程序添加到开始屏幕
在运行Electron程序时, 打开任务管理器, 找到Electron
右键 → 打开文件所在的位置
右键 → 固定到"开始"屏幕发送到桌面快捷方式
右键 → 发送到桌面快捷方式
这样我们就能在开始菜单和桌面上看见Electron的图标了
(3)在main.js中做以下修改
const { app, BrowserWindow } = require("electron");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile("index.html");
}
app.whenReady().then(() => {
createWindow();
if (process.platform === "win32") {
app.setAppUserModelId(process.execPath);
}
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
关键代码如下图:
index.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
</head>
<body>
<h1>Hello World!</h1>
<p>
After launching this application, you should see the system notification.
</p>
<p id="output">Click it to see the effect in this interface.</p>
<script src="renderer.js"></script>
</body>
</html>
renderer.js代码
const NOTIFICATION_TITLE = "Title";
const NOTIFICATION_BODY =
"Notification from the Renderer process. Click to log to console.";
const CLICK_MESSAGE = "Notification clicked!";
new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY }).onclick =
() => (document.getElementById("output").innerText = CLICK_MESSAGE);
终端运行:
npm start
弹出效果:
按下弹窗后效果:
Electron问题记录01:关于electron的notification在win10下不显示问题的更多相关文章
- Tars | Win10下Docker部署TarsJava(SpringBoot)全过程及踩坑记录
@ 目录 前言 1. 相关环境版本: 坑点一:VMware与Win10 Docker冲突 坑点二:20.版本TarsJava(SpringBoot)依赖文件缺失 2. Docker安装: 坑点三:Do ...
- Electron 使用 Webpack2 预编译 Electron 和 Browser targets
Electron 使用 Webpack2 预编译 Electron 和 Browser targets 前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用,但是有时候我们希望使 ...
- 《Javascript高级程序设计》阅读记录（六）：第六章 下
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...
- electron 开发记录
判断是否开发环境 安装 electron-is-dev npm install electron-is-dev // main.js const isDev = require('electron-i ...
- Electron学习（一）——— electron的安装
前言 本人是做java开发的(菜鸟),做web项目的朋友们基本上都会遇到同样一个,永远不知道客户会怎么样使用,或者说永远不知道客户会用什么浏览器打开我们做出来的应用,就算你跟他说明了一定得用某某某浏览 ...
- npm run dev启动项目，electron提示throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
npm run dev 项目,提示 throw new Error('Electron failed to install correctly, please delete node_modules/ ...
- React 实践记录 01 组件开发入门
Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的 ...
- "利用python进行数据分析"学习记录01
"利用python进行数据分析"学习记录 --day01 08/02 与书相关的资料在 http://github.com/wesm/pydata-book pandas 的2名字 ...
- Apache OFBiz 研究记录01
作为Apache 的顶级项目: Apache OFBiz,功能十分强大,一般开发者很难用到全部功能. 这次笔者的研究主要集中在电子商务平台这一块,一步一步解构. OFBiz下载地址:http://of ...
- 初学ios遇到问题记录01
刚刚接触IOS,花了一段时间看我基础部分的OC后 就想试着弄个小程序,于是看到 http://www.cnblogs.com/LooDo/p/3907064.html博文中的小程序,博主分析的很详细, ...
随机推荐
- docker-compose 文件
安装 curl -L https://get.daocloud.io/docker/compose/releases/download/v2.4.1/docker-compose-`uname -s` ...
- vue高级进阶( 二 ) 8种组件通信详解
vue高级进阶( 二 ) 8种组件通信详解 猛兽总是独行,牛羊才成群结队. -------鲁迅 vue组件通信的重要性无需多言...但是你肯定没有全部掌握,所以这第二篇文章应运而生 props和$ ...
- linux下第三方库的配置和链接——以opencv为例
安装OpenCV(可参考链接) 下载source到 /usr/local/路径下 新建 /build/ cmake 编译 添加库路径 vim /etc/ld.so.conf 该目录作用参考链接 输入: ...
- R7-7 调查电视节目受欢迎程度
R7-7 调查电视节目受欢迎程度 分数 15 全屏浏览题目 切换布局 作者 颜晖 单位 浙大城市学院 某电视台要调查观众对该台8个栏目(设相应栏目编号为1~8)的受欢迎情况,共调查了n位观众(1≤n≤ ...
- under display camera
https://yzhouas.github.io/projects/UDC/udc.html https://zhuanlan.zhihu.com/p/389863230 MIPI 2022 Cha ...
- 如何修改vagrant系统的root用户密码
1. 先使用vagrant 用户登录. 2. $sudo passwd root #按照提示输入两次新的密码,并加以确认. 然后就可以修改root用户密码
- Msp430 编写交通灯程序
题目:我想想... 红灯亮,按下按键后倒计时10秒,倒计时十秒后,绿灯点亮,红灯熄灭,进入绿灯的15秒倒计时,在只剩下3秒的时候,绿灯闪烁. 代码如下,有点麻烦 当时这么写的 就不改了 #includ ...
- Java-面向对象基础 构造方法
public class Dog {// 定义属性 String nick; String color; int age; // 定义构造方法 public Dog(String nick,Strin ...
- HDLbits——Exams/2014 q4b
题目要求 使用verilog描述如图所示得移位寄存器: Write a top-level Verilog module (named top_module) for the shift regist ...
- Python3 文件处理相关脚本
对文件相关处理是脚本中最常见的,下面列举几种实用的案例: 批量删除: (1)删除指定目录,指定后缀文件 例:删除目录J:/start下的 .log与.tmp结尾文件 def del_files(pat ...