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. 【Ubuntu】设置桌面文件夹路径

    Ubuntu 系统会将桌面文件夹路径默认设置为 $HOME/Desktop,包括文档.下载.图片等文件夹路径都有各自的默认路径.若想更改这些文件夹路径,可参考『此链接』. 首先到希望更改的路径下建立桌 ...

  2. k8s_namespace

    namespace 可以认为namespaces是kubernetes集群中的虚拟化集群.在Kubernetes集群可以拥有多个命名空间,它们在逻辑上彼此隔离. 多数的Kubernetes中的集群默认 ...

  3. 关于 echarts 使用 geo 制作地图 tooltip 不显示问题（转）

    原文地址 我之前遇到过这问题,单独设置 tooltip 没效果,geo 下面也有 tooltip 属性,但是也不管用,网上查了一下说 geo 不支持 tooltip 提示框显示,就自己根据 echar ...

  4. go web编程学习记录

    学习 https://segmentfault.com/a/1190000013297625的记录 简单demo package main import "github.com/gin-go ...

  5. maven 简易入门笔记

    教程:http://www.yiibai.com/maven/  http://maven.apache.org/ 第一步:下载安装maven. 配置环境变量. 第二步: 设置mirror 中央存储仓 ...

  6. Oracle11gR2安装

    https://blog.csdn.net/newbie_907486852/article/details/80716275

  7. H5 判断当前浏览器环境是 微信还是支付宝

    let ua = window.navigator.userAgent.toLowerCase(); //判断是不是微信 if (ua.match(/MicroMessenger/i) == &quo ...

  8. docker持久化数据存储

    一.把数据存储到本地/opt/data目录下面,容器挂载到/data目录下面 [root@docker-1 ~]# docker run -itd --name www -v /opt/data:/d ...

  9. WPFGroupBox控件自定义

    先上效果图 直接上代码(直接在Window.Resources里面添加这段代码) <Style TargetType="GroupBox"> <Setter Pr ...

  10. windows下判断程序是否内存泄漏

    在main函数第一行写 _CrtSetDbgFlag(_CRTDBG_ALLOC_MEM_DF | _CRTDBG_LEAK_CHECK_DF); 程序退出后如果有泄漏会有打印