In this article you’ll learn how to add progressive web app support in Blazor Server .NET 8.
What are progressive web apps?
A progressive web app (PWA) is an app that’s built using web platform technologies, but that provides a user experience like that of a platform-specific app.
Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed apps.
You tend to see PWAs mostly in client side applications like Blazor WebAssembly apps or React apps but did you know that you can make your Blazor Server app a PWA too? It doesn’t take much work at all.
These steps should work too for Blazor WebAssembly, but I haven’t tested that yet.
Dev environment
For the IDE, I’ll be using Visual Studio 2022 Community edition. The Blazor version I’ll be using is Blazor Server .NET 8. Make sure you have the ‘ASP.NET and web development’ workload installed in order to do Blazor development.
I’ll show you how to make a blank Blazor Server web app a PWA.
Creating the Blazor Server project
First Create a new project.
Select Blazor Web app and create the project. In .NET 8 it’s called Blazor Web App.
Select Server for the rendering mode.
Getting the files
All you basically need to make this a PWA is a manifest.json and a service-worker.js and some assets to show an icon.
I have prepared some example files:
Go ahead and unzip the files and place them in the wwwroot directory.
Now we need to add a few lines of HTML to App.razor and we’re done.
You can copy and paste it from here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@* PWA TUTORIAL CODE START *@
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="android-chrome-192x192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
@* PWA TUTORIAL CODE END *@
<base href="/" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="BlazorServer.styles.css" />
<HeadOutlet />
</head>
<body>
<Routes />
@* PWA TUTORIAL CODE START *@
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function (error) {
console.log('Service Worker registration failed:', error);
});
}
</script>
@* PWA TUTORIAL CODE END *@
<script src="_framework/blazor.web.js"></script>
</body>
</html>
That’s it. If you boot the app now it should be a PWA.
You can verify if it works by using the red encircled download button.
