How to enable PWA feature on existing blazor project

The easiest way is to create a new blazor wasm app with pwa enabled :

dotnet new blazorwasm -o MyNewProject --pwa`

And copy:

• wwwroot/icon-512.png
• wwwroot/manifest.json
• wwwroot/service-worker.js
• wwwroot/service-worker.published.js

Then update {BlazorApp}.csproj to add reference to the service worker:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
...
    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
  </PropertyGroup>

...
  <ItemGroup>
    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
  </ItemGroup>

And update index.html to add link, icon and script

<!DOCTYPE html>
<html>

<head>
...
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>

<body>
...
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

</html>

And update wwwroot/manifest.json to feat your needs

{
  "name": "{Your app name}",
  "short_name": "{Your app short name}",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#03173d",
  "icons": [
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}