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

#a11y-ing up byronbuckley.com

Making byronbuckley.com a little more accessible with WAI-ARIA and progressive enhancement. From textbooks to #a11y, accessibility is a topic I was aware of but never tried to learn. Recently, I decided to change that by reading Apps for... Continue →