オンライン/オフラインイベント検出

概要

オンラインおよびオフラインイベントの検出は、標準HTML5 APIの一部であるnavigator.onLine属性を使用してレンダラープロセスで実装できます。

navigator.onLine属性は、

すべてのネットワークリクエストが確実に失敗する場合（例：ネットワークから切断されている場合）はfalseを返します。
その他すべての場合はtrueを返します。

多くの場合で`true`が返されるため、`true`の値がElectronがインターネットにアクセスできることを常に意味するとは限らないため、偽陽性の状況には注意が必要です。たとえば、コンピューターが「常時接続」状態の仮想イーサネットアダプターを持つ仮想化ソフトウェアを実行している場合などです。そのため、Electronのインターネットアクセス状態を判断したい場合は、このチェックのための追加の手段を開発する必要があります。

例

HTMLファイル`index.html`から始めて、この例では、`navigator.onLine` APIを使用して接続状態インジケーターを作成する方法を示します。

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Connection status: <strong id='status'></strong></h1>
    <script src="renderer.js"></script>
</body>
</html>

DOMを変更するために、`'online'`および`'offline'` `window`イベントにイベントリスナーを追加する`renderer.js`ファイルを作成します。イベントハンドラーは、 `navigator.onLine`の結果に応じて`<strong id='status'>`要素のコンテンツを設定します。

renderer.js
const updateOnlineStatus = () => {
  document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline'
}

window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)

updateOnlineStatus()

最後に、ウィンドウを作成するメインプロセス用の`main.js`ファイルを作成します。

main.js
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const onlineStatusWindow = new BrowserWindow({
    width: 400,
    height: 100
  })

  onlineStatusWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Electronアプリケーションを起動すると、次の通知が表示されます。

Connection status

注：接続状態をメインプロセスに伝える必要がある場合は、IPCレンダラー APIを使用してください。

概要​

例​

概要

例