Before you go through this article, make sure you have good understanding of Basics of Electron JS and You must have read Packaging and Publishing an Electron App .

Have you seen those tiny notifications appearing somewhere in corner of system screen, stating "Update Available !!". This is where technology made me curious to dig down that How is this all happening ?

In this article we will learn how to configure autoupdate feature for an electron application. Whenever an application updates are available , we will show a notification to the end user and based upon response it should update installed electron app. To have this in place, we need to ship our electron app with app updater module. Electron facilitate developer to use electron-updater to introduce this functionality in our application. We will be using our existing GitHub publishing artifact along with electron-updater to serve the updates.

Installation:

Lets open our project and install npm module electron-updater by using following command.
npm install electron-updater --save

Configuration:

In the next step, Lets add dev-app-update.yml in root of our project and add following details:

owner: owner-name
repo: repo-name
provider: github
token: personal-token
To get help to generate token please refer my previous article . Here I am using publicly accessible github repository to fetch updates and just to highlight it is the same repository that we used to publish our application.

Keynote:
"When we are running our application in development environment electron-updater reads the configuration details from dev-app-update.yml . Once the application is packaged it generates app-update.yml to read the configuration and that is done by packager itself so we do not have to worry about that."

Events:

electron-updater exposes following events, which can be used to streamline or customize the autoUpdater flow.

  • checking-for-update
  • update-available
  • download-progress
  • update-downloaded

Get it worked:

Import autoUpdater, Notification & dialog and add following code snippet in main process index.ts

autoUpdater.checkForUpdates();
autoUpdater.on('checking-for-update', () => {
  console.log("Checking for updates !!");
});
autoUpdater.on('download-progress', (progressObj) => {
  console.log("Downloading updates !!");
});
 
autoUpdater.on('update-available', (info) => {
  console.log('Update available !!');
});
 
autoUpdater.on('update-downloaded', (info) => {
  console.log('Update Downloaded');
  let notification = new Notification({
    title:"Steady Readers",
    body:"Updates are Available !! Click here to install",
    icon:"src/assets/images/light-bulb-icon.ico",
 
                            });
  notification.on("click", ()=> {
                            var res = dialog.showMessageBox(mainWindow,{
        type: "question", 
        title: "Steady Readers"
                            , message: "Would you like to close and install update?", buttons: ["Ok", "Cancel"]
                            });
      res.then((value)=> {
                            if(value.response == 0){
            autoUpdater.quitAndInstall();
                            }
                            });
                            });
    notification.show();
});
 

Once application updates are downloaded, we are going to a display a notification to intimate the user. User can click on notification to install it.

Keynote:
autoUpdater looks for package with latest (github) release tag and get the version information from latest.yml associated with package.

Well, Come back here and tell me about before-and-after. You will definitely have something to say.
Good Bye !! until I write again. Code well, Cook good.