Skip to content

Instantly share code, notes, and snippets.

@ton77v
Last active August 25, 2020 10:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ton77v/25108a7d7c0da7c98c7e45cbaabf76f5 to your computer and use it in GitHub Desktop.
Save ton77v/25108a7d7c0da7c98c7e45cbaabf76f5 to your computer and use it in GitHub Desktop.
example of Electron splash window @ load
'use strict'
import { app, BrowserWindow, protocol } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
// --- CONTEXT MENU -----
const contextMenu = require('electron-context-menu')
contextMenu({
prepend: (defaultActions, params, browserWindow) => []
})
// 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 win
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors')
async function createWindow () {
function showMainWin () {
splash.destroy()
win.show()
}
const image = require('electron').nativeImage
.createFromPath('./src/assets/icons/png/64x64.png')
// Create the browser window.
win = new BrowserWindow({
titleBarStyle: 'hidden',
width: 460
height: 800,
backgroundColor: '#fff',
icon: image,
webPreferences: {
nodeIntegration: true,
webSecurity: false,
devTools: !!(process.env.WEBPACK_DEV_SERVER_URL),
enableRemoteModule: true
},
show: false // don't show the main window YET
})
win.setMenuBarVisibility(false)
// create a new `splash`-Window
const splash = new BrowserWindow(
{
width: 555,
height: 555,
icon: image,
transparent: true,
frame: false,
alwaysOnTop: true
})
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
splash.loadURL(process.env.WEBPACK_DEV_SERVER_URL + 'splash.html')
win.loadURL(process.env.WEBPACK_DEV_SERVER_URL).then(() => {
// (!!!) otherwise devTools won't work
if (!process.env.IS_TEST) {
setTimeout(() => win.webContents.openDevTools(), 5555)
}
})
} else {
createProtocol('app')
splash.loadURL('app://./splash.html')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
win.once('ready-to-show', () => {
setTimeout(() => showMainWin(), 88)
})
...
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
const vueDT = await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
@Chappie74
Copy link

Have you tried putting await on all four instances like this

if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await splash.loadURL(process.env.WEBPACK_DEV_SERVER_URL + 'splash.html')
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) {
      setTimeout(() => win.webContents.openDevTools(), 5555)
    }
  } else {
    await createProtocol('app')
    await splash.loadURL('app://./splash.html')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }

@nklayman
Copy link

Just adding it here should work I think:

await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)

@ton77v
Copy link
Author

ton77v commented Jul 27, 2020

Have you tried putting await on all four instances like this

if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await splash.loadURL(process.env.WEBPACK_DEV_SERVER_URL + 'splash.html')
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) {
      setTimeout(() => win.webContents.openDevTools(), 5555)
    }
  } else {
    await createProtocol('app')
    await splash.loadURL('app://./splash.html')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }

I've tried. When I add at least one "await" the process freezes without any warnings/errors somewhere after "await win.loadURL..."

Just adding it here should work I think:

await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)

Unfortunately it doesn't, was the first thing I've tried

@nklayman
Copy link

What about this:

win.loadURL(process.env.WEBPACK_DEV_SERVER_URL).then(() => {
  if (!process.env.IS_TEST) {
    setTimeout(() => win.webContents.openDevTools(), 5555)
  }
})

@ton77v
Copy link
Author

ton77v commented Aug 11, 2020

What about this:

win.loadURL(process.env.WEBPACK_DEV_SERVER_URL).then(() => {
  if (!process.env.IS_TEST) {
    setTimeout(() => win.webContents.openDevTools(), 5555)
  }
})

wow, thanks a lot!!! now it finally works 🚀
can't believe I haven't noticed that myself

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment