Running Your ASP.NET Core Blazor WebAssembly Application As A Progressive Web App (PWA)

As already outlined in my previous article, a Blazor application almost always has to integrate with the JavaScript world, and especially with the DOM layer in the browser. In this article, I am going to quickly show you how to transform your Blazor WebAssembly application into a Progressive Web App (PWA). You will see that it is quite easy to achieve - but you will also see and we will prove that we always need a good share of Web, browser and JavaScript knowledge when working with Blazor.

In this article:

Christian Weyer
Christian Weyer is co-founder and CTO of Thinktecture. He's been creating software for more than two decades.

Note: In this article I am not talking about Blazor Server-side, but only the Client-side hosting model based on WebAssembly. However, the proposed process to get to a Blazor PWA should also work with Blazor Server.

Version information

The data and code in this article are based on these technology versions:
ASP.NET Core Blazor: 3.2.0-preview1.20073.1

Progressive Web Apps (PWA) - modern apps

The Web is ever-evolving and developers and users get the chance to build very native-like applications running in the browser based on the Progressive Web Apps (PWA) Uber-pattern. E.g. PWAs can be installed, offer an improved startup experience and can also run logic in the background, like being able to receive push notifications. All in all, I think the future for modern applications running in and on the Web is bright – and I would like your Blazor applications to participate.

We are not going to cover the basics of PWAs in this article, there are numerous resources out there to get you started.

A proven fact is that you as a Blazor developer will not be able to write the necessary PWA-related artifacts (like application manifest or the service worker implementation) in C#: this will all stay and happen in the JavaScript side of the world. Period.

To prepare your application on its way to PWA goodness, adjust your index.html to include the necessary meta tags (especially the link to the application manifest, manifest.json in our case) as well as the inclusion of the service worker JavaScript file (this will be generated later on with a tool):

				
					<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8" />
    <title>Conf List</title>
    <base href="." />

    <meta name="description" content="Simple conference list app.">

    <link rel="manifest" href="manifest.json" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#1294e0">
    <link rel="apple-touch-icon" href="icon-192.png">
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/MatBlazor/dist/matBlazor.js"></script>

    
<script src="https://www.thinktecture.com/core/cache/min/1/a4f6c4b344abf1b9fc9143d9d49cba2b.js" data-minify="1"></script></body>

</html>

				
			

Application Manifest

The application manifest is the starting point to all-things-PWA. Here we define the application name, short name, the icons to be used, and colors to be applied to our PWA when running. In addition, we are specifying the start URL and the scope of the application, two values that are important for the service worker to work correctly:

				
					{
  "short_name": "ConfTool",
  "name": "Conferences Tool",
  "icons": [
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#1294e0",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#ff584f"
}
				
			

Service Worker with Workbox

While we can always write our service worker by hand, we actually shouldn’t do that. There are really good tools in the community to generate your service worker files which include a high configurability to get various things done. My favorite tool is Workbox, which also has a CLI.

The Workbox CLI takes a configuration file to generate the service worker file for us.

				
					module.exports = {
    globDirectory: "bin/Release/netstandard2.1/publish/BlazorConfListPWA/dist",
    globPatterns: [
        '**/*.{html,json,js,css,png,ico,json,wasm,dll,eot,otf,woff,svg,ttf}'
    ],
    swDest: "bin/Release/netstandard2.1/publish/BlazorConfListPWA/dist/sw.js",
    navigateFallback: "/BlazorPWA/index.html",
    clientsClaim: true,
    runtimeCaching: [{
        urlPattern: "https://api-ttconftool.azurewebsites.net/api/v1/conferences",
        handler: "NetworkFirst",
        options: {
            cacheName: "conferencesApi",
            expiration: {
                maxAgeSeconds: 100,
            },
        },
    }],
};
				
			

Here we are point Workbox to the output of the Blazor publish bundle, and we include all necessary files in the globPatterns. This leads to a service worker file listing all those files in an array which makes it possible to already cache the application files upon the first run of the service worker – thus making the app immediately available offline.

When we execute workbox generateSW in the path of the above config file, we get two files: sw.js and workbox-[some-hash].js.

In the sw.js we can see the explicitly listed files to be included in the application cache:

				
					define("./sw.js", ["./workbox-fa9ea827"], (function(e) {
    "use strict";
    self.addEventListener("message", e => {
        e.data && "SKIP_WAITING" === e.data.type && self.skipWaiting()
    }), e.clientsClaim(), e.precacheAndRoute([{
        url: "_content/MatBlazor/dist/matBlazor.css",
        revision: "f887f122dea68e52fd151f7d348b006b"
    }, {
        url: "_content/MatBlazor/dist/matBlazor.js",
        revision: "c92e6b8a42cd4ef811c1d99d01f6aaa6"
    }, {
        url: "_framework/_bin/BlazorConfListPWA.dll",
        revision: "f1a09d67416f4b0aa58287750c636ebf"
    }, {
        url: "_framework/_bin/MatBlazor.dll",
        revision: "68906b5c0f400cd89516c8765b43d3a4"
    }, {
        url: "_framework/_bin/Microsoft.AspNetCore.Blazor.dll",
        revision: "954c481979e2a46f787d27a649134553"
    }, {
        url: "_framework/_bin/Microsoft.AspNetCore.Blazor.HttpClient.dll",
        revision: "b04448036efb43ad5bdc0365fd429886"
    },
...
				
			

Another important section in the config file above is the runtimeCaching part. By using a NetworkFirst strategy we can cache the response of our HTTPS API calls. In our case, the response data will be put into its cache and the data will be cached for 100 seconds.

OK, with the index.hxml, the application manifest and the service worker files in place, we can now run our Blazor application. There will be this small ‘+’ symbol in the URL bar which allows us to install the Blazor application as a PWA – in this case via Chrome on Windows:

Chrome Audits with Blazor applications

Last but not least, now that we have a basic PWA running, it would be great to see how it behaves when being profiled by https://developers.google.com/web/tools/lighthouse tooling.

Running Lighthouse for a desktop application will result in this:

Not too bad! The 92 for Accessibility comes from the fact that for this sample the background and foreground colors do not have a sufficient contrast ratio – and low-contrast text is difficult or impossible for many users to read. The other categories show full 100 points.

Let’s dive a bit into the Progressive Web Apps section of the Lighthouse report:

As you can see everything is awesome.

Well, almost. There is this performance-related error: this is actually a bug in Lighthouse. The time-to-interactive in our Blazor application is not 27 seconds 😉 It is more like 2.7 seconds. I will go ahead and file an issue with the Lighthouse team on this.

We can see that the de-facto PWA analyzer tool is very happy with our Blazor PWA.

Summary

Here we are: a Progressive Web App with an application manifest, a service worker caching the application files and providing also a cache for calling the HTTPS APIs from inside the application – all based on our ASP.NET Core Blazor C# code.

The source code for the demo application can be found here: https://github.com/thinktecture/blazor-pwa

Free
Newsletter

Current articles, screencasts and interviews by our experts

Don’t miss any content on Angular, .NET Core, Blazor, Azure, and Kubernetes and sign up for our free monthly dev newsletter.

EN Newsletter Anmeldung (#7)
Related Articles
AI
sg
One of the more pragmatic ways to get going on the current AI hype, and to get some value out of it, is by leveraging semantic search. This is, in itself, a relatively simple concept: You have a bunch of documents and want to find the correct one based on a given query. The semantic part now allows you to find the correct document based on the meaning of its contents, in contrast to simply finding words or parts of words in it like we usually do with lexical search. In our last projects, we gathered some experience with search bots, and with this article, I'd love to share our insights with you.
17.05.2024
Angular
SL-rund
If you previously wanted to integrate view transitions into your Angular application, this was only possible in a very cumbersome way that needed a lot of detailed knowledge about Angular internals. Now, Angular 17 introduced a feature to integrate the View Transition API with the router. In this two-part series, we will look at how to leverage the feature for route transitions and how we could use it for single-page animations.
15.04.2024
.NET
KP-round
.NET 8 brings Native AOT to ASP.NET Core, but many frameworks and libraries rely on unbound reflection internally and thus cannot support this scenario yet. This is true for ORMs, too: EF Core and Dapper will only bring full support for Native AOT in later releases. In this post, we will implement a database access layer with Sessions using the Humble Object pattern to get a similar developer experience. We will use Npgsql as a plain ADO.NET provider targeting PostgreSQL.
15.11.2023