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-购物车的部分

    定义一个局部组件 分成三个部分 Vue.component('my-cart',{ template: ` <div class='cart'> <cart-title>< ...

  2. 吴恩达老师机器学习课程chapter08——降维

    吴恩达老师机器学习课程chapter08--降维 本文是非计算机专业新手的自学笔记,高手勿喷. 本文仅作速查备忘之用,对应吴恩达(AndrewNg)老师的机器学期课程第十四章. 本章节只有结论,没有任 ...

  3. postgresql 之修改psql log信息级别

    1.修改当前使用的postgresql.conf文件vim /var/lib/pgsql/10/data/postgresql.conf 2.vim 下使用\notice 找到待修改项 client_ ...

  4. python获取主机内网中所有MAC地址

    import osimport subprocessimport socket"""python获取主机内网中所有MAC地址"""def g ...

  5. SpringBoot接口防刷

    一.自定义注解 import java.lang.annotation.Retention; import java.lang.annotation.Target; import static jav ...

  6. [BOM]打包代码前，快速去除前端日志

    一般开发时使用console.log() 方法.于是可以在js文件的最开头加上: console.log = function(){}

  7. DDD（二）聚合、聚合根、领域服务、应用服务、仓储”和“工作单元”、领域事件、集成事件

    DDD(二)聚合.聚合根.领域服务.应用服务.仓储"和"工作单元".领域事件.集成事件 如果觉得样式不好:跳转即可 http://www.lifengying.site/ ...

  8. DDD（一）微服务、领域驱动设计、领域模型

    DDD(一)微服务.领域驱动设计.领域模型 如果觉得样式不好:跳转即可 http://www.lifengying.site/(md文件复制过来有些样式会不一样) 什么是微服务 单体结构项目 优点:结 ...

  9. kiaba启动报 FATAL ResponseError: access_control_exception，ES报：java.lang.SecurityException: access denied ("java.io.FilePermission"“文件地址”)

    查了许多博客,找的头都大了还是没有发现问题的根源,之前以为是插件包文件名改了之后还是一样,当我差点放弃的时候 一位博主的瞬间把我点醒https://www.cnblogs.com/personblog ...

  10. element ui 分页

    修改选中页码的样式: .el-pager .active{ color:red !important;//选中 } .el-pager .number:hover{ color:red !import ...