1"use strict";(self.webpackChunkelectronjs=self.webpackChunkelectronjs||[]).push([["15410"],{60872(e,n,t){t.r(n),t.d(n,{metadata:()=>i,default:()=>h,frontMatter:()=>r,contentTitle:()=>l,toc:()=>c,assets:()=>a});var i=JSON.parse('{"id":"latest/tutorial/online-offline-events","title":"Online/Offline Event Detection","description":"Online and offline event detection can be implemented in both the main and renderer processes:","source":"@site/docs/latest/tutorial/online-offline-events.md","sourceDirName":"latest/tutorial","slug":"/latest/tutorial/online-offline-events","permalink":"/docs/latest/tutorial/online-offline-events","draft":false,"unlisted":false,"editUrl":"https://github.com/electron/electron/edit/main/docs/tutorial/online-offline-events.md","tags":[],"version":"current","frontMatter":{"title":"Online/Offline Event Detection","description":"Online and offline event detection can be implemented in both the main and renderer processes:","slug":"online-offline-events","hide_title":false},"sidebar":"docs","previous":{"title":"Offscreen Rendering","permalink":"/docs/latest/tutorial/offscreen-rendering"},"next":{"title":"Progress Bars","permalink":"/docs/latest/tutorial/progress-bar"}}'),s=t(74848),o=t(28453);let r={title:"Online/Offline Event Detection",description:"Online and offline event detection can be implemented in both the main and renderer processes:",slug:"online-offline-events",hide_title:!1},l="Online/Offline Event Detection",a={},c=[{value:"Overview",id:"overview",level:2},{value:"Main Process Detection",id:"main-process-detection",level:2},{value:"Renderer Process Example",id:"renderer-process-example",level:2}];function d(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"onlineoffline-event-detection",children:"Online/Offline Event Detection"})}),"\n",(0,s.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,s.jsx)(n.p,{children:"Online and offline event detection can be implemented in both the main and renderer processes:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Renderer process"}),": Use the ",(0,s.jsx)(n.a,{href:"http://html5index.org/Offline%20-%20NavigatorOnLine.html",children:(0,s.jsx)(n.code,{children:"navigator.onLine"})})," attribute and ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Online_and_offline_events",children:"online/offline events"}),", part of standard HTML5 API."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Main process"}),": Use the ",(0,s.jsx)(n.a,{href:"/docs/latest/api/net#netisonline",children:(0,s.jsx)(n.code,{children:"net.isOnline()"})})," method or the ",(0,s.jsx)(n.a,{href:"/docs/latest/api/net#netonline-readonly",children:(0,s.jsx)(n.code,{children:"net.online"})})," property."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"navigator.onLine"})," attribute returns:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"false"})," if all network requests are guaranteed to fail (e.g. when disconnected from the network)."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"true"})," in all other cases."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Since many cases return ",(0,s.jsx)(n.code,{children:"true"}),", you should treat with care situations of\ngetting false positives, as we cannot always assume that ",(0,s.jsx)(n.code,{children:"true"}),' value means\nthat Electron can access the Internet. For example, in cases when the computer\nis running a virtualization software that has virtual Ethernet adapters in "always\nconnected" state. Therefore, if you want to determine the Internet access\nstatus of Electron, you should develop additional means for this check.']}),"\n",(0,s.jsx)(n.h2,{id:"main-process-detection",children:"Main Process Detection"}),"\n",(0,s.jsxs)(n.p,{children:["In the main process, you can use the ",(0,s.jsx)(n.code,{children:"net"})," module to detect online/offline status:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const { net } = require('electron')\n\n// Method 1: Using net.isOnline()\nconst isOnline = net.isOnline()\nconsole.log('Online status:', isOnline)\n\n// Method 2: Using net.online property\nconsole.log('Online status:', net.online)\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Both ",(0,s.jsx)(n.code,{children:"net.isOnline()"})," and ",(0,s.jsx)(n.code,{children:"net.online"})," return the same boolean value with the same reliability characteristics as ",(0,s.jsx)(n.code,{children:"navigator.onLine"})," - they provide a strong indicator when offline (",(0,s.jsx)(n.code,{children:"false"}),"), but a ",(0,s.jsx)(n.code,{children:"true"})," value doesn't guarantee successful internet connectivity."]}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"net"})," module is only available after the app emits the ",(0,s.jsx)(n.code,{children:"ready"})," event."]})}),"\n",(0,s.jsx)(n.h2,{id:"renderer-process-example",children:"Renderer Process Example"}),"\n",(0,s.jsxs)(n.p,{children:["Starting with an HTML file ",(0,s.jsx)(n.code,{children:"index.html"}),", this example will demonstrate how the ",(0,s.jsx)(n.code,{children:"navigator.onLine"})," API can be used to build a connection status indicator."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",metastring:'title="index.html"',children:'<!DOCTYPE html>\n<html>\n<head>\n <meta charset="UTF-8">\n <title>Hello World!</title>\n <meta http-equiv="Content-Security-Policy" content="script-src \'self\' \'unsafe-inline\';" />\n</head>\n<body>\n <h1>Connection status: <strong id=\'status\'></strong></h1>\n <script src="renderer.js"><\/script>\n</body>\n</html>\n'})}),"\n",(0,s.jsxs)(n.p,{children:["In order to mutate the DOM, create a ",(0,s.jsx)(n.code,{children:"renderer.js"})," file that adds event listeners to the ",(0,s.jsx)(n.code,{children:"'online'"})," and ",(0,s.jsx)(n.code,{children:"'offline'"})," ",(0,s.jsx)(n.code,{children:"window"})," events. The event handler sets the content of the ",(0,s.jsx)(n.code,{children:"<strong id='status'>"})," element depending on the result of ",(0,s.jsx)(n.code,{children:"navigator.onLine"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:"title='renderer.js'",children:"const updateOnlineStatus = () => {\n document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline'\n}\n\nwindow.addEventListener('online', updateOnlineStatus)\nwindow.addEventListener('offline', updateOnlineStatus)\n\nupdateOnlineStatus()\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Finally, create a ",(0,s.jsx)(n.code,{children:"main.js"})," file for main process that creates the window."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:"title='main.js'",children:"const { app, BrowserWindow } = require('electron')\n\nconst createWindow = () => {\n const onlineStatusWindow = new BrowserWindow()\n\n onlineStatusWindow.loadFile('index.html')\n}\n\napp.whenReady().then(() =>
1 {\n createWindow()\n\n app.on('activate', () => {\n if (BrowserWindow.getAllWindows().length === 0) {\n createWindow()\n }\n })\n})\n\napp.on('window-all-closed', () => {\n if (process.platform !== 'darwin') {\n app.quit()\n }\n})\n"})}),"\n",(0,s.jsx)(n.p,{children:"After launching the Electron application, you should see the notification:"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"Connection status",src:t(28146).A+"",width:"800",height:"196"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["If you need to check the connection status in the main process, you can use ",(0,s.jsx)(n.a,{href:"/docs/latest/api/net#netisonline",children:(0,s.jsx)(n.code,{children:"net.isOnline()"})})," directly instead of communicating from the renderer process via ",(0,s.jsx)(n.a,{href:"/docs/latest/api/ipc-renderer",children:"IPC"}),"."]})})]})}function h(e={}){let{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},28146(e,n,t){t.d(n,{A:()=>i});let i=t.p+"assets/images/connection-status-5cafe8cb88bae305085f0c7cd5dc1e6d.png"},28453(e,n,t){t.d(n,{R:()=>r,x:()=>l});var i=t(96540);let s={},o=i.createContext(s);function r(e){let n=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.