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下不显示问题的更多相关文章

  1. Tars | Win10下Docker部署TarsJava(SpringBoot)全过程及踩坑记录

    @ 目录 前言 1. 相关环境版本: 坑点一:VMware与Win10 Docker冲突 坑点二:20.版本TarsJava(SpringBoot)依赖文件缺失 2. Docker安装: 坑点三:Do ...

  2. Electron 使用 Webpack2 预编译 Electron 和 Browser targets

    Electron 使用 Webpack2 预编译 Electron 和 Browser targets 前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用,但是有时候我们希望使 ...

  3. 《Javascript高级程序设计》阅读记录（六）：第六章 下

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...

  4. electron 开发记录

    判断是否开发环境 安装 electron-is-dev npm install electron-is-dev // main.js const isDev = require('electron-i ...

  5. Electron学习（一）——— electron的安装

    前言 本人是做java开发的(菜鸟),做web项目的朋友们基本上都会遇到同样一个,永远不知道客户会怎么样使用,或者说永远不知道客户会用什么浏览器打开我们做出来的应用,就算你跟他说明了一定得用某某某浏览 ...

  6. 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/ ...

  7. React 实践记录 01 组件开发入门

    Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的 ...

  8. "利用python进行数据分析"学习记录01

    "利用python进行数据分析"学习记录 --day01 08/02 与书相关的资料在 http://github.com/wesm/pydata-book pandas 的2名字 ...

  9. Apache OFBiz 研究记录01

    作为Apache 的顶级项目: Apache OFBiz,功能十分强大,一般开发者很难用到全部功能. 这次笔者的研究主要集中在电子商务平台这一块,一步一步解构. OFBiz下载地址:http://of ...

  10. 初学ios遇到问题记录01

    刚刚接触IOS,花了一段时间看我基础部分的OC后 就想试着弄个小程序,于是看到 http://www.cnblogs.com/LooDo/p/3907064.html博文中的小程序,博主分析的很详细, ...

随机推荐

  1. oracl ocp认证到底有没有用！！！

    从一个网友听说有个OCP专家认证,我们本地也有,要1万3,问题是我想真的学东西而不是为了考证,不知道这个培训能学到多少呀.

  2. springboot1.x apollo 更改属性值不起作用。 ConfigurationProperties

    1. @ApolloConfigChangeListeners 默认监控命名空间是 application.properties , 如果是自己创建的namespace ,一定要明确指定(包含文件扩展 ...

  3. 循环for in 和for of

    for in 和for of都是前端循环工具 我平时用for in比较多一点 但是今天来看一下两者的区别 先声明一个对象和一个数组 分别使用for in和for of分别查看得到的结果 var arr ...

  4. pytorch学习笔记（5）--神经网络

    (一)神经网络的骨架 nn.Module import torch from torch import nn class Tudui(nn.Module): def __init__(self): s ...

  5. Java-【大数处理】和【日期类】

    [大数类] BigInteger(整数) 和 BigDecimal(小数) 都是Java针对大数提供的类 常用方法: (1)加:add (2)减:subtract (3)乘:multiply (4)除 ...

  6. 如何在超星下载非资料页面的ppt

    首先打开迅雷(没有就复制到网页下载) 点击f12 点击网络,筛查出输入flag,在响应模块中找到ppt,复制网址并下载

  7. 「SOL」E-Lite (Ural Championship 2013)

    为什么这数据能水到可以枚举角度 ac 啊 # 题面 给你 \(n\) 个平面向量 \((x_i,y_i)\),对于每个 \(k=1\sim n\),求「从给出的 \(n\) 个向量中不重复地选择 \( ...

  8. nginx服务器有什么作用？什么叫反向代理？为什么要使用反向代理？

    1 背景介绍 1.1 Nginx是什么? Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.其特点是占有内存少,并发能力强,事实上nginx的并发能力确 ...

  9. spring-nfjh

    Spring Xml 文件报红第一时间检查set .get .构造方法 准备工作 JDK 最低版本17 设置Maven 见[王鹤老师的笔记] 本套Spring教程与其他Spring教程的区别可总结为以 ...

  10. 新手IC617安装NCSU pdk

    新手IC617安装NCSU cdk 以CMOSedu网站为参考:https://cmosedu.com/videos/cadence/tutorial1/cadence_tutorial_1.htm ...