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. vue 图片转base 64

    // 将图片转换为Base64imageUrlToBase64(img) { // 一定要设置为let,不然图片不显示 let image = new Image(); // 解决跨域问题 image ...

  2. 使用nvm安装不同版本的NodeJS

    下载及安装 下载地址:https://github.com/coreybutler/nvm-windows/releases 配置nodejs的镜像地址 nvm node_mirror https:/ ...

  3. 使用Swagger和OpenAPI 3规范定义API接口并集成到SpringBoot

    1. OpenAPI 3 规范介绍及属性定义 参考官方定义:https://swagger.io/specification/ 2. 使用OpenAPI 3规范定义API接口 官方样例参考:https ...

  4. sshpass免密登录源码剖析

    源码下载地址:https://sourceforge.net/projects/sshpass/ 免密登陆程序sshpass源码解析,短小精悍的程序,非常值得学习!

  5. CSC落榜

    2021年5月31日21:00点,CSC公布结果,未通过.看到这,我感觉空气瞬间凝固,窒息,那一瞬间我无比平静,我以为我会哭,但是,却泣不成声,脑中第一时间想到得是,如何面对认识得人,全世界感觉都知道 ...

  6. CSS3选择器nth-child(n)

    CSS3选择器nth-child(n)实现隔几行选择元素 nth-child(n),n 可以是数字.关键词或公式.选择器匹配属于其父元素的第N个子元素,不论元素的类型. 序号写法:li:nth-chi ...

  7. Unity中的深度测试相关知识与问题

    https://www.jianshu.com/p/f420b55edd0b?utm_campaign=hugo

  8. el-scrollbar 饿了么滚动条不出现 bug

    el-scrollbar 饿了么滚动条不出现 bug 解决方法:el-scrollbar 的直接子元素样式需要设置为 display: inline-block;

  9. DEV GridControl 主从表 (层次表)

    DataTable dtData= DbHelperOra.Query(strSql2.ToString()).Tables[0]; //主表 dtusers.TableName = "病人 ...

  10. Docker 安装流程-CentOS

    0.安装Docker Docker 分为 CE 和 EE 两大版本.CE 即社区版(免费,支持周期 7 个月),EE 即企业版,强调安全,付费使用,支持周期 24 个月. Docker CE 分为 s ...