Adding PWA support to Blazor Server Project

1 min readFeb 17, 2021

Bu makaleyi buradan Türkçe okuyabilirsin.

Do you want to add Progressive Web Application support to your Blazor Server project easily?

You can quickly activate PWA support for your project by following the 3 steps below.

Step #1: Creating a Temporary Blazor WASM Project

One of the default supports of the Blazor WASM project is PWA support. Let’s easily create a temporary Blazor WASM project from the CLI.

dotnet new blazorwasm -o {PROJECT_NAME} — pwa

After creating Blazor WASM project, go and find the files under {PROJECT_NAME}\wwwroot path then move them to your Blazor Server project.

Files

1. manifest.json
2. service-worker.js
3. service-worker.published.js
4. icon-512.png (optional)

Open the _Host.cshtml file. Find blazor.server.js reference at bottom and add serviceWorker registration below.

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

Now add manifest file to head in _Host.cshtml file.

<link rel=”manifest” href=”manifest.json” />

Now PWA support for your Blazor Server project is ready!