Learn how to add auto-update capabilities to your Electron application using tools like Electron Updater. This guide will cover setting up update servers, configuring your app to check for and apply updates, and ensuring that users always have the latest version without manual intervention.
Which Framework is Right for Your Desktop App?
Compare Electron and NW.js (Node-Webkit), two popular frameworks for building cross-platform desktop applications. This post will highlight their differences, advantages, and disadvantages, helping you choose the best framework based on your project requirements and development preferences.
How to Use Electron with React: Building a Modern Desktop App
Combine the power of Electron with React to create modern, interactive desktop applications. This article will guide you through setting up a React project within an Electron app, handling state management, and building a user interface. Ideal for developers familiar with React who want to expand into desktop app development.
Understanding the Main and Renderer Processes in Electron
Delve into the architecture of Electron applications by learning about the main and renderer processes. This post will explain their roles, how they interact, and best practices for managing communication between them using IPC (Inter-Process Communication). Perfect for those looking to understand Electron’s internal workings.
Setting Up Your First Electron Project: A Step-by-Step Tutorial
Follow this detailed tutorial to create your first Electron application from scratch. We’ll walk you through installing Electron, setting up your project structure, and writing your first lines of code. By the end of this guide, you’ll have a simple, functioning Electron app and an understanding of how to start building more complex applications.
Building Cross-Platform Desktop Apps with Web Technologies
Explore the basics of Electron, a framework that allows you to build desktop applications using web technologies like JavaScript, HTML, and CSS. This post will cover Electron’s architecture, its core components, and how it enables you to develop applications that work on Windows, macOS, and Linux with a single codebase. Ideal for beginners who are new to desktop app development.
View
Create and layout native views. Process: Main This module cannot be used until the ready event of the app module is emitted. Class: View A basic native view. Process: Main View is an EventEmitter. new View() Creates a new View. Instance Events Objects created with new View emit the following events: Event: ‘bounds-changed’ Emitted when the view’s bounds have changed in response to being laid out. The new bounds can be retrieved with view.getBounds(). Instance Methods Objects created with new View have the following instance methods: view.addChildView(view[, index]) If the same View is added to a parent which already contains it, it will be reordered such that it becomes the topmost view. view.removeChildView(view) view.setBounds(bounds) view.getBounds() Returns Rectangle – The bounds of this View, relative to its parent. view.setBackgroundColor(color) Examples of valid color values: Note: Hex format with alpha takes AARRGGBB or ARGB, not RRGGBBAA or RGB. view.setVisible(visible) Instance Properties Objects created with new View have the following properties: view.children Readonly A View[] property representing the child views of this view.
WebFrameMain
Control web pages and iframes. Process: Main The webFrameMain module can be used to lookup frames across existing WebContents instances. Navigation events are the common use case. You can also access frames of existing pages by using the mainFrame property of WebContents. Methods These methods can be accessed from the webFrameMain module: webFrameMain.fromId(processId, routingId) Returns WebFrameMain | undefined – A frame with the given process and routing IDs, or undefined if there is no WebFrameMain associated with the given IDs. Class: WebFrameMain Process: MainThis class is not exported from the ‘electron’ module. It is only available as a return value of other methods in the Electron API. Instance Events Event: ‘dom-ready’ Emitted when the document is loaded. Instance Methods frame.executeJavaScript(code[, userGesture]) Returns Promise<unknown> – A promise that resolves with the result of the executed code or is rejected if execution throws or results in a rejected promise. Evaluates code in page. In the browser window some HTML APIs like requestFullScreen can only be invoked by a gesture from the user. Setting userGesture to true will remove this limitation. frame.reload() Returns boolean – Whether the reload was initiated successfully. Only results in false when the frame has no history. frame.send(channel, …args) Send an asynchronous message to the renderer process via channel, along with arguments. Arguments will be serialized with the Structured Clone Algorithm, just like postMessage, so prototype chains will not be included. Sending Functions, Promises, Symbols, WeakMaps, or WeakSets will throw an exception. The renderer process can handle the message by listening to channel with the ipcRenderer module. frame.postMessage(channel, message, [transfer]) Send a message to the renderer process, optionally transferring ownership of zero or more MessagePortMain objects. The transferred MessagePortMain objects will be available in the renderer process by accessing the ports property of the emitted event. When they arrive in the renderer, they will be native DOM MessagePort objects. For example: Instance Properties frame.ipc Readonly An IpcMain instance scoped to the frame. IPC messages sent with ipcRenderer.send, ipcRenderer.sendSync or ipcRenderer.postMessage will be delivered in the following order: Handlers registered with invoke will be checked in the following order. The first one that is defined will be called, the rest will be ignored. In most cases, only the main frame of a WebContents can send or receive IPC messages. However, if the nodeIntegrationInSubFrames option is enabled, it is possible for child frames to send and receive IPC messages also. The WebContents.ipc interface may be more convenient when nodeIntegrationInSubFrames is not enabled. frame.url Readonly A string representing the current URL of the frame. frame.origin Readonly A string representing the current origin of the frame, serialized according to RFC 6454. This may be different from the URL. For instance, if the frame is a child window opened to about:blank, then frame.origin will return the parent frame’s origin, while frame.url will return the empty string. Pages without a scheme/host/port triple origin will have the serialized origin of “null” (that is, the string containing the letters n, u, l, l). frame.top Readonly A WebFrameMain | null representing top frame in the frame hierarchy to which frame belongs. frame.parent Readonly A WebFrameMain | null representing parent frame of frame, the property would be null if frame is the top frame in the frame hierarchy. frame.frames Readonly A WebFrameMain[] collection containing the direct descendents of frame. frame.framesInSubtree Readonly A WebFrameMain[] collection containing every frame in the subtree of frame, including itself. This can be useful when traversing through all frames. frame.frameTreeNodeId Readonly An Integer representing the id of the frame’s internal FrameTreeNode instance. This id is browser-global and uniquely identifies a frame that hosts content. The identifier is fixed at the creation of the frame and stays constant for the lifetime of the frame. When the frame is removed, the id is not used again. frame.name Readonly A string representing the frame name. frame.osProcessId Readonly An Integer representing the operating system pid of the process which owns this frame. frame.processId Readonly An Integer representing the Chromium internal pid of the process which owns this frame. This is not the same as the OS process ID; to read that use frame.osProcessId. frame.routingId Readonly An Integer representing the unique frame id in the current renderer process. Distinct WebFrameMain instances that refer to the same underlying frame will have the same routingId. frame.visibilityState Readonly A string representing the visibility state of the frame. See also how the Page Visibility API is affected by other Electron APIs.
WebContentsView
A View that displays a WebContents. Process: Main This module cannot be used until the ready event of the app module is emitted. Class: WebContentsView extends View A View that displays a WebContents. Process: Main WebContentsView inherits from View. WebContentsView is an EventEmitter. new WebContentsView([options]) Creates a WebContentsView. Instance Properties Objects created with new WebContentsView have the following properties, in addition to those inherited from View: view.webContents Readonly A WebContents property containing a reference to the displayed WebContents. Use this to interact with the WebContents, for instance to load a URL.
WebContents
Render and control web pages. Process: Main webContents is an EventEmitter. It is responsible for rendering and controlling a web page and is a property of the BrowserWindow object. An example of accessing the webContents object: Navigation Events Several events can be used to monitor navigations as they occur within a webContents. Document Navigations When a webContents navigates to another page (as opposed to an in-page navigation), the following events will be fired. Subsequent events will not fire if event.preventDefault() is called on any of the cancellable events. In-page Navigation In-page navigations don’t cause the page to reload, but instead navigate to a location within the current page. These events are not cancellable. For an in-page navigations, the following events will fire in this order: Frame Navigation The will-navigate and did-navigate events only fire when the mainFrame navigates. If you want to also observe navigations in <iframe>s, use will-frame-navigate and did-frame-navigate events. Methods These methods can be accessed from the webContents module: webContents.getAllWebContents() Returns WebContents[] – An array of all WebContents instances. This will contain web contents for all windows, webviews, opened devtools, and devtools extension background pages. webContents.getFocusedWebContents() Returns WebContents | null – The web contents that is focused in this application, otherwise returns null. webContents.fromId(id) Returns WebContents | undefined – A WebContents instance with the given ID, or undefined if there is no WebContents associated with the given ID. webContents.fromFrame(frame) Returns WebContents | undefined – A WebContents instance with the given WebFrameMain, or undefined if there is no WebContents associated with the given WebFrameMain. webContents.fromDevToolsTargetId(targetId) Returns WebContents | undefined – A WebContents instance with the given TargetID, or undefined if there is no WebContents associated with the given TargetID. When communicating with the Chrome DevTools Protocol, it can be useful to lookup a WebContents instance based on its assigned TargetID. Class: WebContents Render and control the contents of a BrowserWindow instance. Process: MainThis class is not exported from the ‘electron’ module. It is only available as a return value of other methods in the Electron API. Instance Events Event: ‘did-finish-load’ Emitted when the navigation is done, i.e. the spinner of the tab has stopped spinning, and the onload event was dispatched. Event: ‘did-fail-load’ Returns: This event is like did-finish-load but emitted when the load failed. The full list of error codes and their meaning is available here. Event: ‘did-fail-provisional-load’ Returns: This event is like did-fail-load but emitted when the load was cancelled (e.g. window.stop() was invoked). Event: ‘did-frame-finish-load’ Returns: Emitted when a frame has done navigation. Event: ‘did-start-loading’ Corresponds to the points in time when the spinner of the tab started spinning. Event: ‘did-stop-loading’ Corresponds to the points in time when the spinner of the tab stopped spinning. Event: ‘dom-ready’ Emitted when the document in the top-level frame is loaded. Event: ‘page-title-updated’ Returns: Fired when page title is set during navigation. explicitSet is false when title is synthesized from file url. Event: ‘page-favicon-updated’ Returns: Emitted when page receives favicon urls. Event: ‘content-bounds-updated’ Returns: Emitted when the page calls window.moveTo, window.resizeTo or related APIs. By default, this will move the window. To prevent that behavior, call event.preventDefault(). Event: ‘did-create-window’ Returns: Emitted after successful creation of a window via window.open in the renderer. Not emitted if the creation of the window is canceled from webContents.setWindowOpenHandler. See window.open() for more details and how to use this in conjunction with webContents.setWindowOpenHandler. Event: ‘will-navigate’ Returns: Emitted when a user or the page wants to start navigation on the main frame. It can happen when the window.location object is changed or a user clicks a link in the page. This event will not emit when the navigation is started programmatically with APIs like webContents.loadURL and webContents.back. It is also not emitted for in-page navigations, such as clicking anchor links or updating the window.location.hash. Use did-navigate-in-page event for this purpose. Calling event.preventDefault() will prevent the navigation. Event: ‘will-frame-navigate’ Returns: Emitted when a user or the page wants to start navigation in any frame. It can happen when the window.location object is changed or a user clicks a link in the page. Unlike will-navigate, will-frame-navigate is fired when the main frame or any of its subframes attempts to navigate. When the navigation event comes from the main frame, isMainFrame will be true. This event will not emit when the navigation is started programmatically with APIs like webContents.loadURL and webContents.back. It is also not emitted for in-page navigations, such as clicking anchor links or updating the window.location.hash. Use did-navigate-in-page event for this purpose. Calling event.preventDefault() will prevent the navigation. Event: ‘did-start-navigation’ Returns: Emitted when any frame (including main) starts navigating. Event: ‘will-redirect’ Returns: Emitted when a server side redirect occurs during navigation. For example a 302 redirect. This event will be emitted after did-start-navigation and always before the did-redirect-navigation event for the same navigation. Calling event.preventDefault() will prevent the navigation (not just the redirect). Event: ‘did-redirect-navigation’ Returns: Emitted after a server side redirect occurs during navigation. For example a 302 redirect. This event cannot be prevented, if you want to prevent redirects you should checkout out the will-redirect event above. Event: ‘did-navigate’ Returns: Emitted when a main frame navigation is done. This event is not emitted for in-page navigations, such as clicking anchor links or updating the window.location.hash. Use did-navigate-in-page event for this purpose. Event: ‘did-frame-navigate’ Returns: Emitted when any frame navigation is done. This event is not emitted for in-page navigations, such as clicking anchor links or updating the window.location.hash. Use did-navigate-in-page event for this purpose. Event: ‘did-navigate-in-page’ Returns: Emitted when an in-page navigation happened in any frame. When in-page navigation happens, the page URL changes but does not cause navigation outside of the page. Examples of this occurring are when anchor links are clicked or when the DOM hashchange event is triggered. Event: ‘will-prevent-unload’ Returns: Emitted when a beforeunload event handler is attempting to cancel a page unload. Calling event.preventDefault() will ignore the beforeunload event handler and allow the page to be unloaded. Note: This will be emitted for BrowserViews but will not be respected – this is because we have chosen not to tie the BrowserView lifecycle to its owning BrowserWindow should one exist per the specification. Event: ‘render-process-gone’ Returns: Emitted when the renderer process unexpectedly disappears. This is normally because it was crashed or killed. Event: ‘unresponsive’ Emitted when the web page becomes unresponsive. Event: ‘responsive’ Emitted when the unresponsive web page becomes responsive again. Event: ‘plugin-crashed’ Returns: Emitted when a plugin process has crashed. Event: ‘destroyed’ Emitted when webContents is destroyed. Event: ‘input-event’ Returns: Emitted when an input event is sent to the WebContents. See InputEvent for details. Event: ‘before-input-event’ Returns: Emitted before dispatching the keydown and keyup events in the page. Calling event.preventDefault will prevent the page keydown/keyup events and the menu shortcuts. To only prevent the menu shortcuts, use setIgnoreMenuShortcuts: Event: ‘enter-html-full-screen’ Emitted when the window enters a full-screen state