Electron uses node notifier pop-up prompt

Time:2020-10-20

Background

useElectronWhen doing cross platform client development, whether it is the application of development tools or chat class, message reminder is a common requirement.

Electron providesManner of notification。 You can use the HTML5 notification API directly to send notifications.

node-notifierIt is cross platform Node.js Cross platform message sending module, this paper introduces the process of electron integrating node notifier, as well as the problems encountered and solutions. And because the current main use of Mac OS, so the following content is mainly for the MAC system.

Environment construction

  1. useelectron-webpack-quick-startInitialize projectelectron-notifier
  2. add tonode-notifierDependence:yarn add node-notifier
  3. Demo code

    // main/index.js
    import { ipcMain } from "electron"
    const notifier = require("node-notifier");
    
    ipcMain.on("notify", (evt, data) => {
        const { title, message } = data;
        console.log("notify:", title, message);
        notifier.notify(
          {
            title,
            message
          },
          (err, res) => {
            if (err) {
              console.log("error:", err);
            }
          }
        );
    });
    
    // renderer/index.js
    const { ipcRenderer } = require("electron");
    ipcRenderer.send("notify", {
      tite: "title",
      message: "This is a message"
    });
  4. functionyarn run devPop up message prompt:Electron uses node notifier pop-up prompt
  5. functionyarn run distPack it, get it packed.dmgFile, open run, found no message prompt.

Troubleshooting

  1. Because it is necessary to record the log information of the packaged application, theelectron-log

    // main/index.js
    const log = require("electron-log");
    //If you override the method of console, the log will be output on the console and output to a local file. Please refer to official documents for specific usage
    Object.assign(console, log.functions);
    //Get local log file path
    console.log ('log file:', log.transports.file .getFile())
  2. Re execute the package command, and run the package generated application to get the corresponding log information
  3. The file path printed through the console or~/Library/Logs/{app name}/{process type}.logIn the directorymain.logTo see what’s in it. You can see the corresponding error message:

    error: Error: Command failed: ... com.electron.electron-notifier.bcYDBs -title "title" -message "message" -timeout "10" -json "true" ...
    
    No Info.plist file in application bundle or no NSPrincipalClass in the Info.plist file, exiting
    ...
  4. Wrong interpretation:

    • The parameter passed in is a previous callnode-notifier
    • Lack ofapplication bundleOfInfo.plistDocuments orInfo.plistMissing from fileNSPrincipalClassfield
  5. Troubleshooting

    • Through the “show package content” to view the packaged application, it is found thatInfo.plistAlready exists
    • reference resourcesApple developer documentationThe nsprincipalclass field defines the name of the main class of a bundle. For an application, this name is the name of the application by default. My understanding here is that package.json The name in already specifies the name of the app
  6. Based on the above analysis, the preliminary judgment of the problem is not the “lack of” as mentioned in the promptNSPrincipalClass
  7. Here’s a Google link. It doesn’t work on tests

  8. However, I can only read more official documents

  9. According to the interpretation of the document,asarCannot run after packagingnode-notifierThis directory needs to be done at package timeunpackThe original text is as follows:

    Due to the way asar works, you cannot execute a binary from within an `asar`. As a simple solution, when packaging the app into an asar please make sure you `--unpack` the `vendor/` folder of `node-notifier`, so the module still has access to the notification binaries.
  10. Because it’s used in the projectelectron-builderPack it and look at itfile, add the following code: viaasarUnpackSpecifies not to package toasarIf it is packaged according to the official document of electron, you can use:asar pack app app.asar --unpack ./node_modules/node-notifier/vendor/**

    // package.json
    "build": {
        "appId": "com.codinglife.electron-notifier",
        "asar": true,
        "asarUnpack": [
          "./node_modules/node-notifier/vendor/**"
        ]
      }
  11. To rerun the package command, you canapp.asarSee the correspondingunpackedcatalog.Electron uses node notifier pop-up prompt
  12. Running the packaged application can perfectly pop up the corresponding message prompt
  13. In addition, it can also be done without packagingasarThe configuration is as follows:

    "build": {
        "appId": "com.codinglife.electron-notifier",
        "asar": false
    }
  14. In the packaged application, all source files are placed in theappDirectory.Electron uses node notifier pop-up prompt

summary

  1. asarIs a compressed file that electron uses to speed up the require code and hide the source code. Electron implements part of the Node.js API method is used to operate ASAR files, but there are several problems as follows:

    • asarThe file in is read-only
    • Some APIs need to be decompressed to the temporary directory to use the files, which increases the overhead
    • Cannot execute binary files in it
  2. More documents, more Google
  3. electron-builderWith the processing of electron application packaging, configuration, upgrade and other operations, it solves most of the problems in the process of packaging, upgrading and installation

Reference documents