Tutorial Electron: Recibiendo nuevos mensajes mediante notificaciones

En la ocasión anterior estuvimos trabajando la implementación del sistema de login para OpenChat, nuestra aplicación. Prácticamente tenemos la aplicación lista para distribuirla, aunque me gustaría hacer un pequeño inciso antes de empezar a trabajar con los ejecutables y los instaladores e implementar una última característica a nuestra aplicación: Notificaciones.

Crearemos una utilidad muy sencilla en la que se reportarán los nuevos mensajes y la lógica para detectar éstos estará repartido entre los archivos index.js de Electron y como no podía ser de otra manera utilities.js.

Paso 1: Creando la utilidad para enviar Notificaciones

La función que vamos a crear en nuestro archivo de utilidades no es más que la manera de enviar notificaciones desde el ipcMain. Si no recuerdas bien que es el ipcMain te recomiendo volver a revisar la explicación sobre los procesos de Electron.

En el caso de que necesitemos enviar Notificaciones desde el ipcRenderer será necesario usar la API de Notificaciones de HTML5.

Con respecto a la función, tendrá como parámetros sendNotification que es un booleano y el mensaje que tendremos que notificar. Una vez comprobemos si el primer parámetro es true emitiremos la notificación creando una nueva instancia del módulo Notification de Electron. Una vez hayamos creado la instancia de la misma tendremos que desplegarla usando el método .show() a la instancia mencionada.

const notifyMessage = function(sendNotification, msg) {
    if(sendNotification) {
        let notifMsg = new Notification({
            title: 'Nuevo mensaje',
            body: `${msg.userName}: ${msg.message.value}`
        })
        notifMsg.show()
    }
}

Si te fijas, la instancia del módulo Notification lleva un objeto con el título de la notificación y el cuerpo de la misma. Dependiendo del sistema operativo ésta se mostrará de diferente manera, atendiendo a las especificaciones del mismo.

Paso 2: Usando la utilidad de Notificaciones

Una vez la tenemos construida, podremos importarla sin ningún tipo de problema en nuestro archivo index.js de Electron. En este también crearemos el booleano que le tenemos que pasar a la función.

La utilidad del booleano es evitar que cuando recibamos todos los mensajes de nuevo nos notifique de todos ellos, y de esta manera, atendiendo a la implementación que vamos a realizar conseguiremos que nos notifique sólo del último mensaje que haya en la base de datos que será el nuevo que haya mandado otro usuario.

ipcMain.on('requestMessages', (ev) => {
    const docRef = db.ref('messages')

    docRef.on('value', snapshot => {
        let messages = []
        snapshot.forEach(message => {
            messages.push(message.val())
        })
        let lastmsg = messages[messages.length - 1]
        notifyMessage(sendNotification, lastmsg)
        sendNotification = true
        ev.sender.send('receiveMessages', messages)
    })
})

Extra: Cambiando algunos estilos antes de crear los instaladores y ejecutables de nuestra aplicación:

Como comenté al principio de la serie estamos usando Foundation para el desarrollo pero a pesar de ello en el código que hemos estado viendo los estilos no están perfectamente definidos. Para conseguir un diseño pulido he realizado algunos cambios en el diseño. Puedes verlo en este commit por si te interesa aplicar los cambios a tu versión de OpenChat.