Triggering Vue UI Updates from Electron’s Main Process

Solution to a problem I encountered while building Notifyer

Download Notifyer

One of the main features of Notifyer is the ability to schedule quotes (or really any message) to be triggered once daily. In addition to being scheduled, users can trigger a random quote with a shortcut key. As I implemented this feature, I discovered that though the OS’s notification would popup, the application interface was not updated with the new quote.

Download Notifyer

Why wasn’t it working?!?! The scheduling and shortcut key functionality lives in the main process, while just about everything that the user sees and interacts with lives in the render process. The renderer listened to my message from the main process, and called handleRandomNote as instructed but would only run the OS’s native stuff, like notifications.

ipc.png

Source: http://jlord.us/essential-electron/#stay-in-touch

So I sought another solution; if clicking the “Note” button in the app updated the UI and triggered the notification, then maybe I could simulate a button click within the Vue component.

ipc.on('trigger-random-note', function () {
    let cmpNote = vm.$children.filter(child => child.$el.id === 'note')
    cmpNote[0].$refs.btnRandomNote.click()
})

Once the shortcut key event is triggered or the scheduled time occurs, the main process sends a trigger-random-note message that the renderer receives and takes action.

 
0
Kudos
 
0
Kudos

Now read this

Deciding how to Prototype

In my last post, I shared my process for Designing for Persons with Down Syndrome. I was tasked with researching and designing a budgeting application for an under-served user group. The findings of this research would fuel a prototype... Continue →