Change application name in Electron notification

Asked

Viewed 19 times

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.

inserir a descrição da imagem aqui

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"
  }
}
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.