0
How do I change the name of the application that appears in the Windows 10 notification using Electron with React? I highlighted what I want to change with a red square.
My notification is called so:
app.js file (used in Electron.js)
const { ipcMain, Notification } = require("electron");
ipcMain.on("@notification/REQUEST", async (event, message) => {
try {
const { title, body } = message;
const notification = new Notification({
title,
body,
});
notification.show();
} catch (err) {
event.sender.send(
"@notification/FAILURE",
"Houve um erro na criação da notificação"
);
}
});
Electron.js
const electron = require("electron");
require("./app");
const { app } = electron;
const { BrowserWindow } = electron;
const path = require("path");
const isDev = require("electron-is-dev");
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadURL(
isDev
? "http://localhost:3000"
: `file://${path.resolve(__dirname, "..", "build", "index.html")}`
);
// if (isDev) {
// mainWindow.webContents.openDevTools();
// }
mainWindow.on("closed", () => {
mainWindow = null;
});
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});
React page calling notification via Electron icp
import React, { useState, useEffect } from "react";
import crypto from "crypto";
import {
Container,
NewTodo,
NewTodoInput,
TodosList,
Todo,
TodoName,
Button,
AddTodoMessage,
} from "./styles";
const { ipcRenderer } = window.require("electron");
export default function Main() {
const [todos, setTodos] = useState([]);
function handleNewTodo(e) {
e.preventDefault();
const newTodo = e.target.todo.value;
if (!newTodo) return;
const todo = {
id: crypto.randomBytes(256),
name: newTodo,
};
setTodos([...todos, todo]);
const message = {
title: "Um novo todo foi criado",
body: `O todo ${todo.name} foi criado`,
};
ipcRenderer.send("@notification/REQUEST", message);
e.target.reset();
}
function handleRemoveTodo(todoId) {
setTodos(todos.filter((todo) => todo.id !== todoId));
}
function renderTodos() {
return todos.map((todo) => (
<Todo key={todo.id}>
<TodoName>{todo.name}</TodoName>
<Button onClick={() => handleRemoveTodo(todo.id)}>Concluir</Button>
</Todo>
));
}
function handleNotificationFailure(message) {
console.log(message);
}
useEffect(() => {
ipcRenderer.on("@notification/FAILURE", handleNotificationFailure);
return () => {
ipcRenderer.removeListener(
"@notification/FAILURE",
handleNotificationFailure
);
};
}, []);
return (
<Container>
<NewTodo onSubmit={handleNewTodo}>
<NewTodoInput name="todo" placeholder="Novo todo" />
<Button>Adicionar</Button>
</NewTodo>
{todos.length > 0 ? (
<TodosList>{renderTodos()}</TodosList>
) : (
<AddTodoMessage>Adicione um novo todo :D</AddTodoMessage>
)}
</Container>
);
}
My package.json
{
"name": "electron-react-app",
"version": "0.1.0",
"private": true,
"author": {
"name": "Seu nome",
"email": "[email protected]",
"url": "https://seu-site.com"
},
"homepage": "./",
"main": "public/electron.js",
"build": {
"appId": "com.seu-site.seu-app",
"productName": "MyApp",
"copyright": "Copyright © 2019 Seu Nome",
"mac": {
"category": "public.app-category.utilities"
},
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
},
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"electron-is-dev": "^1.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"styled-components": "^5.2.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",
"eject": "react-scripts eject",
"dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\"",
"postinstall": "electron-builder install-app-deps",
"preelectron-build": "yarn build",
"electron-build": "electron-builder -w"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@rescripts/cli": "^0.0.15",
"@rescripts/rescript-env": "^0.0.12",
"concurrently": "^5.3.0",
"electron": "^11.2.2",
"electron-builder": "^22.9.1",
"typescript": "^4.1.3",
"wait-on": "^5.2.1"
}
}