Blazor  

How to Build a Blazor WebAssembly App with Offline Support

Introduction

Building modern web applications today is not just about UI and performance—it’s also about reliability. Users expect apps to work even when internet connectivity is slow or completely unavailable. This is where Progressive Web Apps (PWA) and offline support become extremely important.

Blazor WebAssembly in .NET 10 allows developers to build powerful client-side applications using C#. With built-in support for PWA features, you can create apps that load fast, work offline, and behave like native applications.

In this article, we will learn how to build a Blazor WebAssembly app with offline support and PWA capabilities in simple steps, using easy language and practical examples.

What Is Blazor WebAssembly?

Blazor WebAssembly is a framework that allows you to run C# code directly in the browser using WebAssembly.

Instead of JavaScript, you can build full frontend applications using:

  • C#

  • Razor components

  • .NET runtime in the browser

This makes it a great choice for .NET developers who want to build modern web apps.

What Is a Progressive Web App (PWA)?

A Progressive Web App is a web application that behaves like a native mobile or desktop app.

Key features of a PWA include:

  • Works offline or with poor internet

  • Can be installed on a device

  • Fast loading using caching

  • App-like experience (fullscreen, icons, splash screen)

Prerequisites

Before starting, make sure you have:

  • .NET 10 SDK installed

  • Visual Studio or VS Code

  • Basic knowledge of C# and Blazor

Step 1: Create a Blazor WebAssembly PWA Project

You can create a new project using the CLI:

dotnet new blazorwasm -o BlazorPWAApp --pwa
cd BlazorPWAApp

The --pwa flag enables Progressive Web App support automatically.

Step 2: Understand the Project Structure

When you create a PWA-enabled Blazor app, you will see additional files:

  • wwwroot/manifest.json → Defines app metadata

  • wwwroot/service-worker.js → Handles caching and offline support

  • wwwroot/service-worker.published.js → Used in production

These files are the core of PWA functionality.

Step 3: Configure the Web App Manifest

The manifest.json file controls how your app appears when installed.

Example:

{
  "name": "Blazor PWA App",
  "short_name": "BlazorPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0d6efd",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

This ensures your app looks like a native application when installed.

Step 4: Enable Service Worker for Offline Support

The service worker is responsible for caching files and enabling offline usage.

Blazor automatically registers it in index.html:

<script>navigator.serviceWorker.register('service-worker.js');</script>

Step 5: Configure Caching Strategy

Inside service-worker.published.js, you can control what gets cached.

Blazor uses a cache-first strategy by default.

Example:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

This ensures the app works even when offline.

Step 6: Add API Data Caching (Optional)

If your app calls APIs, you can cache responses for offline use.

Example:

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api')) {
    event.respondWith(
      caches.open('api-cache').then(cache => {
        return fetch(event.request)
          .then(response => {
            cache.put(event.request, response.clone());
            return response;
          })
          .catch(() => cache.match(event.request));
      })
    );
  }
});

This helps your app continue working even without internet.

Step 7: Test Offline Functionality

To test your app:

  1. Run the application

  2. Open Developer Tools (F12)

  3. Go to Network tab

  4. Enable "Offline" mode

Now refresh the app—it should still work.

Step 8: Install the PWA App

When your app meets PWA requirements, browsers will show an "Install" option.

Users can install it like a native app on:

  • Mobile devices

  • Desktop browsers

Step 9: Optimize Performance

For better performance:

  • Minimize large assets

  • Use lazy loading

  • Optimize API calls

  • Cache only required files

Real-World Example

Imagine a task management app:

  • Users can add tasks offline

  • Data is stored locally

  • Sync happens when internet is available

Blazor + PWA makes this easy to implement.

When Should You Use Blazor PWA?

When You Need Offline Support

Apps like dashboards, forms, and productivity tools benefit from offline capabilities.

When Building Mobile-Friendly Apps

PWA removes the need for separate mobile apps.

When You Want Better Performance

Caching improves load time significantly.

When You Should Avoid It

Real-Time Applications

Apps requiring constant live updates may not benefit much from offline mode.

Very Large Applications

Heavy apps with huge assets may need careful optimization.

Best Practices

  • Cache only necessary files

  • Keep service worker logic simple

  • Handle version updates properly

  • Test offline scenarios regularly

  • Use HTTPS (required for PWA)

Summary

Building a Blazor WebAssembly app with offline support and PWA capabilities in .NET 10 allows you to create fast, reliable, and modern web applications. By using service workers, caching strategies, and web app manifests, you can deliver an app-like experience directly in the browser. This approach improves user experience, reduces dependency on internet connectivity, and makes your application more robust and scalable.

Membership not found