What is the correct way to do async initialisation logic inside a Blazor (Wasm) Service?

I am trying to create a Connection Service singleton in my Blazor Wasm project. It uses JS Interop to listen for the online and offline events, keep track of connection status and make the information available to multiple components throughout the project. While the following does work, invoking an async function and discarding the ValueTask in the constructor feels very wrong.

public class ConnectionService : IAsyncDisposable
{
	private readonly IJSRuntime JsRuntime;
	public bool IsOnline { get; set; } = true;
	public event Action ConnectionStatusChanged;

	public ConnectionService(IJSRuntime jsRuntime)
	{
		JsRuntime = jsRuntime;
		_ = Initialize();
	}

	public ValueTask Initialize()
	{
		return JsRuntime.InvokeVoidAsync("Connection.Initialize", DotNetObjectReference.Create(this));
	}

	[JSInvokable("Connection.StatusChanged")]
	public void OnJsConnectionStatusChanged(bool isOnline)
	{
		if (IsOnline == isOnline) return;
		IsOnline = isOnline;
		ConnectionStatusChanged?.Invoke();
	}

	public async ValueTask DisposeAsync()
	{
		await JsRuntime.InvokeVoidAsync("Connection.Dispose");
	}
}

However, I'm struggling to find the correct way to initialise the service. I can't do this for example, because it needs the JSRuntime to initialise:

var connSingleton = new ConnectionService();
await connSingleton.Initialize();
builder.Services.AddSingleton<ConnectionService>(connSingleton);

You shouldn't do this:

 _ = Initialize();

Without handling the exceptions that may occur.

There's now no owner of the task, and I believe any runtime exceptions will propagate all the way up to the application and may crash it.

The problem is constructors are synchronous: you can't run async code within a synchronous context.

The way to do this is assign the Task to a class variable/property. Then check the Task is complete before trying to use whatever data it is retrieving.

Use a Task, not a ValueTask in this context. ValueTask is not designed to be re-entrant.

Here's a generic demonstration using the WeatherForecastService where the service gets the data in it's constructor.

public class WeatherForecastService
{
    private List<WeatherForecast>? _weatherForecasts;

    // Public read only so we can await it or check the load status externally if we wish.
    public Task Loading { get; private set; } = Task.CompletedTask;

    public WeatherForecastService()
    {
        // assign the Task to Loading which we can do in sync code
        Loading = GetWeatherForecastsAsync();
    }

    public async ValueTask<IEnumerable<WeatherForecast>> GetForecastsAsync()
    {
        // We only await if the task is still running.
        // If it's a completed task we just waltz on through
        await Loading;
        return _weatherForecasts ?? Enumerable.Empty<WeatherForecast>();
    }

    private async Task GetWeatherForecastsAsync()
    {
        // Fake an async process
        await Task.Delay(1000);

        DateOnly startDate = DateOnly.FromDateTime(DateTime.Now);

        _weatherForecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        }).ToList();
    }

    private static readonly string[] Summaries = new[]
    { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
}

Change FetchData

@code {
    private IEnumerable<WeatherForecast>? forecasts;

    protected override async Task OnInitializedAsync()
        => forecasts = await ForecastService.GetForecastsAsync();
}

One way to handle it is to make a small change in your Program.cs.

In your Program.cs:
Change the default below line (usually the last line of code)

await builder.Build().RunAsync();

To

var host = builder.Build();

// Now get any services that need async initialization before app loads 
// and Init them
// Tasks here will prevent page rendering until completed
var connSingleton = host.Services.GetRequiredService<ConnectionService>();
await connSingleton.Initialize();

// Now we can call RunAsync to render the first page component
await host.RunAsync();

This is a simplified version of how I do it for my Blazor WASM services that need to be initialized asynchronously before the app loads. Be cautious of long running Initialization tasks.