SpeedOf.Me API - Electron Integration

This example demonstrates how to integrate the SpeedOf.Me speed test API into an Electron desktop application.

How It Works

Electron is unique because it runs a full Chromium browser. The SpeedOf.Me API works directly in the renderer process - no WebView wrapper or JavaScript bridge needed!

Files

Prerequisites

Quick Start

1. Install Dependencies

npm install

2. Configure API Credentials

SomApi.account = "YOUR_API_KEY";
SomApi.domainName = "your-domain.com";

3. Run the App

npm start

4. Build for Distribution

npm run build

Architecture

Electron App
   ├── Main Process (main.js)
   │       └── BrowserWindow
   │               └── preload.js (context bridge)
   │
   └── Renderer Process (index.html)
           └── SpeedOf.Me API (direct)
                   ▼
           Results displayed directly in DOM
           + Optional IPC to main process

Unlike other desktop examples, Electron doesn't need a WebView wrapper because the renderer process IS a browser.

Content Security Policy

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    script-src 'self' 'unsafe-inline' https://speedof.me https://*.speedof.me;
    connect-src https://*.speedof.me https://*.fastly.net wss://*.speedof.me;
    style-src 'self' 'unsafe-inline';
">

IPC Communication (Optional)

Preload:

contextBridge.exposeInMainWorld('electronAPI', {
    onTestCompleted: (result) => {
        ipcRenderer.send('speed-test-completed', result);
    }
});

Main:

ipcMain.on('speed-test-completed', (event, result) => {
    console.log('Speed test completed:', result);
});

Building for Production

# macOS
npm run build -- --mac

# Windows
npm run build -- --win

# Linux
npm run build -- --linux

Production Considerations

  1. API Key Security: Consider fetching from your backend
  2. Auto-Updates: Use electron-updater
  3. Code Signing: Sign your app for distribution (Apple/Windows certificates)
  4. Menu Bar: Add proper application menu

Electron-Specific Features

System Tray:

const { Tray } = require('electron');
const tray = new Tray('/path/to/icon.png');

Notifications:

new Notification({
    title: 'Speed Test Complete',
    body: `Download: ${result.download} Mbps`
}).show();

Troubleshooting

Links

Back to Electron Files All Examples API Portal