Uses Electron 33 (2024-10-14)
This is a simple Electron application to create a webview.
Features:
- Responsive window
- Remember the window dimensions when reopening
- Menu & keyboard shortcuts for MacOs
- No title bar
- Home button
- Print function
- MacOS, Windows and Linux executable with an app icon
- DMG installer for Mac
This Electron webview application needs just these files:
package.json
- Points to the app's main file and lists its details and dependencies.main.js
- Starts the app and creates a browser window to render website. This is the app's main process.index.html
- A web page to render. This is the app's renderer process.assets/
- Assets for the project (style, scripts, icons)src/
- Sources folder:menu.js
: menu template customizationprint.js
: print functionview.js
: browser view usagewindow.js
: browser window customization
Note: check the offical Electron quick start if you need to learn the basics about Electron.
To run this repository you'll need Node.js (which comes with npm) installed on your computer. From your command line:
# Install dependencies
$ npm install
# Run the app
$ npm start
Since Electron 20 update, @electron/remote is replaced by ipcRenderer and contextBridge, due to @electron/remote many subtle pitfalls.
- Since remote module is deprecated since Electron 12, this boilerplate uses @electron/remote.
- This boilerplate doesn't use
nodeIntegration
nornodeIntegrationInWorker
option inBrowserWindow
anymore as required for security reasons but uses a preload script instead. This is useful for the app print function. If you want to see print function usingnodeIntegration
option, check this printing sample app.
You just need to change the src
attribute of the webview
in index.html
file to display the url you want in your webview.
Alternatively, it's also possible to just load an external URL:
// Comment
//mainWindow.loadURL(`file://${__dirname}/index.html`); // Load custom html file with external content using webview tag
// Uncomment
mainWindow.loadURL("https://github.com"); // Load directly an URL if you don't need interface customization
// Or uncomment if you prefer to use BrowserView:
const view = require("./src/view");
view.createBrowserView(mainWindow);
You can show by default the developer tools by uncommenting in main.js
file: mainWindow.openDevTools();
.
You can hide the title bar of the app by setting frame: false
or titleBarStyle: 'hidden'
when creating the window in main.js
in mainWindow
variable.
If you keep displaying the topbar using titleBarStyle: 'hidden'
setting, you would have to adjust the topbar style.
For example:
#controls {
padding-top: 1.5em;
}
This webview is responsive and supports live dimensions change of the window. This webview remembers the window size you have before quitting the app to use it when you open it again.
If you want to change the window dimensions at the first start, change width
and height
in main.js
file in mainWindow
variable when creating the window.
This webview integrates an Electron menu. It will also make standard keyboard shortcuts, like copy and paste, work on MacOS.
You can modify this menu in src/menu.js
file.
A topbar to show buttons:
- "Home" button to come back to your app if your website has external links.
- "Print" button to print the current url displayed by the webview.
You can activate/deactivate this topbar (activate by default).
// Comment:
// require("./src/print");
// Comment:
// preload: path.join(__dirname, "../preload.js"), // required for print function
<!-- Comment -->
<!-- <link rel="stylesheet" href="assets/css/topbar.css" /> -->
<!-- <div id="controls">...</div> -->
<!-- <script src="assets/js/renderer.js"></script> -->
<!-- Uncomment -->
<link rel="stylesheet" href="assets/css/no-topbar.css" />
// Comment:
// Home button exists
/*
if (document.querySelector("#home")) {
...
}
*/
// Print button exits
/*
if (document.querySelector("#print_button")) {
...
}
*/
- Do the opposite of what you did in the activation chapter above.
- Don't forget to set the homepage of your app in the
data-home
attribute ofwebview
inindex.html
file to make the "Home" button works.
<!-- Webview -->
<webview autosize="on" src="https://www.github.com" data-home="https://github.com"></webview>
To create a MacOS, Windows and Linux executable with an app icon, follow these instructions.
For this we need a 1024x1024 png-icon, a .icns for macs and a .ico for windows. For Linux we only need the pngs.
-
Create your app icon
-
Go to iConvert Icons and upload the PNG and the service will take care of creating the other icon-formats.
-
Add your files in
assets/icons
: put the.icns
file into themac
folder, the pngs in the png folder and the.ico
file in the win folder.
Rename the.icns
and.ico
files inicon
.
On Mac, the .icns
icon converted with iConvert Icons doesn't work.
I recommend using Image2icon, an awesome free app to create and personalize icons from your pictures, available on the Mac Store.
The .icns
icon converted with Image2icon perfectly works on Mac.
"Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution."
$ npm install electron-packager --save-dev
Change the productName
in package.json
MacOS
$ npx electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds
Windows
$ npx electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Webview"
Linux (Ubuntu)
$ npx electron-packager . --overwrite --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds
To make it easier to create new builds, scripts are added in package.json
.
Now you can run:
$ npm run package-mac
$ npm run package-win
$ npm run package-linux
To create a DMG installer for our Electron app we can use the electron-installer-dmg package.
To create a DMG installer you first need to package the app as we saw in the Application chapter above.
$ npm install electron-installer-dmg --save-dev
$ npx electron-installer-dmg ./release-builds/Electron\ webview-darwin-x64/Electron\ webview.app electron-webview --out=release-builds --overwrite --icon=assets/icons/mac/icon.icns
An electron-webview.dmg
file is now created in the release-builds
folder.
To make it easier to create new DMG installer, a script is added in package.json
.
Now you can run:
$ npm run create-installer-mac
Based on: