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. charles小程序抓包

    参考链接:https://www.jianshu.com/p/048b67c5ed00 1. 手机上的程序目前按app的抓包方式,配置代 理,下载证书,打开设备---微信---本地网络,就可以直接抓包 ...

  2. matlab画图之plot画折线图

    Matlab绘制折线图 使用plot(x,y)函数创建折线图时,x,y有以下要求: ①如果 X 和 Y 都是向量,则它们的长度必须相同.plot 函数绘制 Y 对 X 的图. ②如果 X 和 Y 均为 ...

  3. Vulnhub 靶场 DOUBLETROUBLE: 1

    Vulnhub 靶场 DOUBLETROUBLE: 1 前期准备 靶机地址:https://www.vulnhub.com/entry/doubletrouble-1,743/ kali攻击机: 靶机 ...

  4. sqlsugar 更新某列数据 UpdateColumns 与SetColumns 使用区别

    第一种方式 UpdateColumns public int updateLogPath(int TeamID, string logoPath) { Team t = new Team(); t.T ...

  5. FastReport 单元行自动换行 Table Object AutoSize

    FastReport 官方实例138.fr3 有关于单元行自动换行的描述.The table object can grow depends on cells content. Notes:- set ...

  6. PNAS：微生物组分析揭示人类皮肤的独特性

    https://blog.csdn.net/woodcorpse/article/details/87989663

  7. Visual Studio 2010安装

    学校要计算机二级证书,为了准备c语言的二级考试,要装Visual Studio 2010(Visual Studio 2022生成的文件过不了检测) 1-下载安装包 在这个网站上下载安装包 MSDN, ...

  8. 【ZYNQ学习】ZYNQ架构介绍

    在上一篇博客中,主要介绍了ZYNQ的基本信息以及如何在vivado上实现自己的设计,但是在实际应用中,掌握ZYNQ的架构是必要的,因此在这篇博客中主要记录一下ZYNQ的架构 本篇博客的主要参考是ZYN ...

  9. 启动JAVA服务

    # -*- coding: utf-8 -*- import re import sys from subprocess import Popen, PIPE import os import tim ...

  10. Linux基础第十章：系统安全及应用

    目录 一.账户安全措施 1.账户管理 2.锁定配置文件 3.清除历史记录 二.sudo 1.sudo概念及优点 2.使用sudo 3.sudo实操演示 4.设置sudo别名 5.sudo特别注意 一. ...