SpeedOf.Me API - Windows Integration

This example demonstrates how to integrate the SpeedOf.Me speed test API into a Windows WPF application using WebView2.

How It Works

The SpeedOf.Me API is JavaScript-based, so Windows apps use WebView2 to:

  1. Load an HTML page containing the speed test
  2. Receive results via WebMessageReceived event

Files

Prerequisites

Quick Start

1. Create a New WPF Project

In Visual Studio: File > New > Project > WPF Application

2. Install WebView2 NuGet Package

Install-Package Microsoft.Web.WebView2

3. Configure API Credentials

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

4. Set HTML as Content

<ItemGroup>
    <Content Include="speedtest.html">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
</ItemGroup>

Architecture

WPF Application
   └── SpeedTestWindow (WPF Window)
           └── WebView2 Control
                   └── speedtest.html
                           └── SomApi.js
                                   ▼
                   window.chrome.webview.postMessage(json)
                                   ▼
                   CoreWebView2.WebMessageReceived event

JavaScript-to-C# Communication

The HTML page sends messages via:

window.chrome.webview.postMessage(JSON.stringify({
    type: 'completed',
    data: result
}));

C# receives them:

SpeedTestWebView.CoreWebView2.WebMessageReceived += (sender, e) => {
    string json = e.WebMessageAsJson;
    // Parse and handle
};

Loading Options

Option 1: Local File

string htmlPath = Path.Combine(
    AppDomain.CurrentDomain.BaseDirectory,
    "speedtest.html"
);
SpeedTestWebView.CoreWebView2.Navigate($"file:///{htmlPath}");

Option 2: Remote URL

SpeedTestWebView.CoreWebView2.Navigate("https://your-domain.com/speedtest.html");

WebView2 Runtime

Check availability:

try {
    string version = CoreWebView2Environment.GetAvailableBrowserVersionString();
    // Runtime is available
} catch {
    // Prompt user to install from:
    // https://developer.microsoft.com/microsoft-edge/webview2/
}

WinForms Alternative

using Microsoft.Web.WebView2.WinForms;

public partial class SpeedTestForm : Form {
    private WebView2 webView;

    private async void InitializeWebView() {
        webView = new WebView2();
        webView.Dock = DockStyle.Fill;
        Controls.Add(webView);

        await webView.EnsureCoreWebView2Async();
        webView.CoreWebView2.WebMessageReceived += OnWebMessageReceived;
        webView.CoreWebView2.Navigate("https://your-domain.com/speedtest.html");
    }
}

Production Considerations

  1. WebView2 Runtime: Include Evergreen Bootstrapper or Fixed Version in installer
  2. User Data Folder: Specify custom location for WebView2 data
  3. Error Handling: Handle initialization failures gracefully
  4. Updates: WebView2 Evergreen updates automatically with Edge

Troubleshooting

Links