Offline Champion: Making Blazor WebAssembly Applications Work Without an Internet Connection

Blazor WebAssembly (WASM) has become a popular choice for building interactive web UI with C#. Its ability to run .NET code in the browser using WebAssembly unlocks powerful features for web development. However, a traditional concern with web applications is their reliance on an internet connection. What happens when users lose connectivity? This article dives into Blazor's capabilities for making WebAssembly applications work offline, providing a significant advantage for user experience and application functionality.

Understanding Blazor Webassembly's Offline Potential

Blazor WebAssembly applications by default execute .NET code within the web browser sandbox. This code, along with necessary assets like HTML, CSS, and JavaScript files, is typically downloaded from the server when the application loads. Once downloaded and processed by the WebAssembly runtime, the application can function without further communication with the server, as long as the required resources are available locally.

This inherent characteristic lays the groundwork for enabling offline functionality in Blazor WebAssembly applications. By strategically caching essential application resources and leveraging browser features like Service Workers and IndexedDB, you can create a seamless user experience even when the internet connection becomes unavailable.

Benefits of Offline Blazor WebAssembly Applications

There are several advantages to incorporating offline capabilities into your Blazor WebAssembly applications:

• Enhanced User Experience: Users can continue interacting with the application and accessing data even when offline. This eliminates frustration caused by sudden connectivity loss and improves overall application responsiveness.
• Increased Reliability: Offline functionality makes applications more dependable, especially in scenarios where internet connectivity might be unreliable or unavailable for extended periods.
• Improved Accessibility: Users in areas with limited or no internet access can still benefit from the application's core features.
• Progressive Web App (PWA) Potential: Offline capabilities are a key characteristic of PWAs. By enabling offline functionality in your Blazor WebAssembly app, you pave the way for converting it into a PWA, offering additional advantages like push notifications and home screen installation.

Enabling Offline Functionality in Blazor WebAssembly Applications

Here's a step-by-step approach to enabling offline functionality in your Blazor WebAssembly application:

Caching Application Resources:

• Utilize the ServiceWorker registration mechanism to intercept network requests and cache essential application resources like the .NET WASM binary, HTML, CSS, and JavaScript files.
• Blazor provides built-in support for Service Workers through the ServiceWorkerRegistration class in the Microsoft.AspNetCore.Blazor.ServiceWorker namespace. You can register a service worker in your Program.cs file:

  public static async Task Main(string[] args)
  {
      var builder = WebAssemblyHostBuilder.CreateDefault(args);
      builder.UseServiceWorker("sw.js");
      builder.RootComponents.Add<App>();
      await builder.Build().RunAsync();
  }
  

• In your sw.js file, implement logic to cache resources using the cache API and strategies like cache-first, cache-and-fetch, or network-only based on your requirements.

Persisting Application Data:

• Leverage IndexedDB, a browser API for storing data locally within the user's browser, to persist application data that needs to be accessible offline.

Blazor doesn't provide direct access to IndexedDB, but you can interact with it using interop techniques from your C# code.

public class LocalStorageService
{
    [JSFunction]
    public async Task<T> GetItemFromStorage<T>(string key)
    {
        try
        {
            var jsObject = await JSRuntime.InvokeAsync<object>("localStorage.getItem", key);
            return JsonSerializer.Deserialize<T>(jsObject as string);
        }
        catch (Exception)
        {
            return default;
        }
    }

    [JSFunction]
    public async Task SetItemInStorage(string key, object data)
    {
        await JSRuntime.InvokeAsync<object>("localStorage.setItem", key,

Handling User Interactions Offline:

• When the user interacts with the application while offline, you need to gracefully handle scenarios where data cannot be immediately retrieved from the server.
• Implement logic to differentiate between online and offline states. You can leverage the Connectivity class in the Microsoft.AspNetCore.Blazor.Connectivity namespace to detect the network connection status.

@inject Connectivity connectivity

<div>
    @if (connectivity.Connection == ConnectionStatus.None)
    {
        <p>You are currently offline.</p>
    }
    else
    {
        <p>You are online.</p>
    }
</div>

• For user actions that require data updates, provide informative messages or temporary storage mechanisms (like in-memory data structures) to capture user input and queue it for synchronization when the internet connection becomes available.

Background Synchronization:

• Once the internet connection is restored, implement a mechanism to synchronize any captured offline data with the server.

• Service Workers can be configured to listen for network connectivity changes and trigger background tasks that send accumulated data or perform necessary updates.

  self.addEventListener('connect', event => {
      const port = event.ports[0];
  
      port.onmessage = async (event) => {
          if (event.data === 'sync') {
              // Perform background synchronization logic here
              const dataToSync = await getOfflineData();
              await sendDataToSever(dataToSync);
          }
      };
  });
  

User Interface Considerations:

• When designing the user interface for offline functionality, consider providing visual cues to indicate the application's online/offline state.
• Disable UI elements that require server interaction when offline and provide informative messages to guide the user

Code Example: Simple Offline Blazor WebAssembly Application

This example demonstrates a basic Blazor WebAssembly application with offline data persistence using IndexedDB:

• • WeatherData.cs (Model Class):

    public class WeatherData
    {
        public string City { get; set; }
        public double Temperature { get; set; }
    }
    

  • WeatherService.cs (Service Class):

    public class WeatherService
    {
        private readonly HttpClient _httpClient;
        private readonly IJSRuntime _jsRuntime;
    
        public WeatherService(HttpClient httpClient, IJSRuntime jsRuntime)
        {
            _httpClient = httpClient;
        }
    
        public async Task<WeatherData> GetWeather(string city)
        {
            // Simulate online weather data retrieval
            var response = await _httpClient.GetAsync($"https://api.openweathermap.org/data/2.5/weather?q={city}&appid=YOUR_API_KEY");
            if (response.IsSuccessStatusCode)
            {
                return await response.Content.ReadAsAsync<WeatherData>();
            }
            else
            {
                return await GetWeatherFromStorage(city);
            }
        }
    
        private async Task<WeatherData> GetWeatherFromStorage(string city)
        {
            try
            {
                var serializedData = await _jsRuntime.InvokeAsync<string>("getItemFromStorage", $"weather-{city}");
                if (serializedData != null)
                {
                    return JsonSerializer.Deserialize<WeatherData>(serializedData);
                }
            }
            catch (Exception) { }
            return null;
        }
    }
    

  • Index.razor (Main Component):

    @page "/"
    
    <h1>Weather Forecast</h1>
    
    <div>
        <input @bind="City" placeholder="Enter City Name" />
        <button @onclick="GetWeather">Get Weather</button>
    </div>
    
    @if (weatherData != null)
    {
        <p>City: @weatherData.City</p>
        <p>Temperature: @weatherData.Temperature &deg;F</p>
    }
    else
    {
        <p>No weather data available.</p>
    }
    

• sw.js (Service Worker):

  self.addEventListener('install', event => {
      event.waitUntil(
          caches.open('weather-app')
              .then(cache => cache.addAll([
                  window.location.href,
                  './_framework/blazor.webassembly.js',
                  './app.css',
                  './app.razor'
              ]))
      );
  });
  
  self.addEventListener('fetch', event => {
      event.respondWith(
  caches.match(event.request)
              .then(response => {
                  return response || fetch(event.request);
              })
      );
  });

  This code snippet completes the fetch event listener in the sw.js file. It attempts to match the requested resource in the cache (caches.match(event.request)) and returns it if found. If not found in the cache, it falls back to fetching the resource from the network (fetch(event.request)).

Conclusion

By leveraging Service Workers, IndexedDB, and strategic code design, you can empower your Blazor WebAssembly applications to function effectively even when internet connectivity is unavailable. This enhances user experience, broadens application accessibility, and paves the way for building robust and reliable Progressive Web Apps. Remember to thoroughly test your offline functionalities to ensure seamless operation across various network scenarios.

Additional Considerations:

• Security: When persisting data in IndexedDB, consider implementing appropriate security measures to protect sensitive information. Encryption techniques can be employed to secure stored data.
• Data Synchronization Strategies: Depending on your application's needs, you might choose different strategies for synchronizing offline data with the server upon reconnection. Options include immediate updates, batch processing, or conflict resolution mechanisms for potential data inconsistencies.
• Complex Offline Scenarios: While this article provides a basic foundation, more intricate offline functionalities like complex data manipulation or real-time updates might require additional libraries or frameworks tailored for offline capabilities.

Incorporating offline functionality into your Blazor WebAssembly applications strengthens their overall user experience and adaptability. By following these guidelines and exploring advanced techniques, you can create robust and future-proof web applications that thrive even in the absence of an internet connection.