Characteristics and Techniques

In this section we will learn about other features and techniques of Electron.

1. Offscreen rendering

// Modules const {app, BrowserWindow} = require('electron') const fs = require('fs') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let mainWindow app.disableHardwareAcceleration() // Create a new BrowserWindow when `app` is ready function createWindow () { mainWindow = new BrowserWindow({ width: 1000, height: 800, show: false, webPreferences: { nodeIntegration: true, offscreen: true } }) // Load index.html into the new BrowserWindow mainWindow.loadURL('https://electronjs.org') let i = 1 mainWindow.webContents.on('paint', (e, dirty, image) => { let screenshot = image.toPNG() fs.writeFile( app.getPath('desktop') + `/screenshot_${i}.png`, screenshot, console.log ) i++ }) mainWindow.webContents.on('did-finish-load', e => { console.log( mainWindow.getTitle() ) mainWindow.close() mainWindow = null }) // Open DevTools - Remove for PRODUCTION! // mainWindow.webContents.openDevTools(); // Listen for window being closed // mainWindow.on('closed', () => { // mainWindow = null // }) } // Electron `app` is ready app.on('ready', createWindow) // Quit when all windows are closed - (Not macOS - Darwin) app.on('window-all-closed', () => { if (process.platform ! == 'darwin') app.quit() }) // When app icon is clicked and app is running, (macOS) recreate the BrowserWindow app.on('activate', () => { if (mainWindow === null) createWindow() })Copy the code

2. Network Detection

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="script-src 'self'  'unsafe-inline'"> <title>Hello World! </title> </head> <body> <h1>App is: <u id="status"></u></h1> <! -- All of the Node.js APIs are available in this renderer process. --> We are using Node.js <strong><script>document.write( process.versions.node)</script></strong>, and Electron <strong><script>document.write( process.versions.electron )</script></strong>. <script> const setStatus = status => { const statusNode = document.getElementById('status') statusNode.innerText = status ? 'online' : 'offline' } setStatus( navigator.onLine ) window.addEventListener('online', e => { setStatus(true) }) window.addEventListener('offline', e => { setStatus(false) }) </script> </body> </html>Copy the code

3. Notivation

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="script-src 'self'  'unsafe-inline'"> <title>Hello World! </title> </head> <body> <h1>Hello World! </h1> <! -- All of the Node.js APIs are available in this renderer process. --> We are using Node.js <strong><script>document.write( process.versions.node)</script></strong>, and Electron <strong><script>document.write( process.versions.electron )</script></strong>. <script> const { remote } = require('electron') const self = remote.getCurrentWindow() setTimeout(() => { let notification = new Notification( 'Electron App', { body: 'Some notification info! ' }) notification.onclick = e => { if( ! self.isVisible() ) self.show() } }, 2000) </script> </body> </html>Copy the code

4. Preload Scripts

4.1 the index. HTML

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="script-src 'self'  'unsafe-inline'"> <title>Hello World! </title> </head> <body> <h1>Hello World! </h1> <! -- All of the Node.js APIs are available in this renderer process. --> We are using Node.js <strong><script>document.write( versions.node)</script></strong>, and Electron <strong><script>document.write( versions.electron )</script></strong>. <br><textarea id="content" rows="8" cols="80"></textarea> <br><button id="save" onclick="saveText()">Save Content</button> <script> const saveText = e => { const text = document.getElementById('content').value writeToFile( text ) } </script> </body> </html>Copy the code

4.2 the main js

// Modules const {app, BrowserWindow} = require('electron') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let mainWindow // Create a new BrowserWindow when `app` is ready function createWindow () { mainWindow = new BrowserWindow({ width: 1000, height: 800, webPreferences: { nodeIntegration: false, contextIsolation: false, preload: __dirname + '/preload.js' } }) // Load index.html into the new BrowserWindow mainWindow.loadFile('index.html') // Open DevTools - Remove for PRODUCTION! mainWindow.webContents.openDevTools(); // Listen for window being closed mainWindow.on('closed', () => { mainWindow = null }) } // Electron `app` is ready app.on('ready', createWindow) // Quit when all windows are closed - (Not macOS - Darwin) app.on('window-all-closed', () => { if (process.platform ! == 'darwin') app.quit() }) // When app icon is clicked and app is running, (macOS) recreate the BrowserWindow app.on('activate', () => { if (mainWindow === null) createWindow() })Copy the code

4.3 preload. Js

const { remote } = require('electron')
const fs = require('fs')

const desktopPath = remote.app.getPath('desktop')

window.writeToFile = text => {
  fs.writeFile( desktopPath + '/app.txt', text, console.log )
}


window.versions = {
  node: process.versions.node,
  electron: process.versions.electron
}
Copy the code

5. Progress Bar

Renderer.js const {remote} = require('electron') const self = remote.getcurrentwindow () let progress = 0.01let ProgressInterval = setInterval(() => {self.setProgressbar (progress) if (progress <= 1) {progress += 0.01} else { Self. setProgressBar(-1) clearInterval(progressInterval)}}, 75) Juejin, making, smartblue, cyanosis, channing - cyan # contribution theme: https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: juejin ---Copy the code