Blazor: Add PWA to a WebApplication


Morph a Blazor WA into a PWA version when PWA is not selected when creating the project.

A Blazor Progressive Web Application (PWA) is a single-page application (SPA) that uses modern browser APIs and capabilities to behave like a desktop app.
Microsoft Learn

When creating a Blazor WebAssembly app you you get three subprojects. The server and the client as well as a shared project that both use for defining common entities. You initially access the app in a web browser making a request to he service. You have the option of enabling the client side to be a Progressive Web Application (PWA) which means that it can be installed locally and used offline.

Note that the PWA functionality can’t be demonstrated during development. The app needs to be deployed to a web server. This can be the local IIS/Default Web Site though.

A comparison was made by creating 2 Blazor WebApplications, one without and one with PWA enabled. Both were created with similar but distinct paths using the same project name, BlazorWA. A comparison was made of both folders using the app Beyond Compare. It was demonstrated that apart from file paths and service ports,both of which can be ignored, the only changes were to add some files to wwwroot of the client app and to make some changes to index.html in that folder, as well as insertions to the client project file.

Comparison of Project Differences

Client Project

PWA Version Additional Files

—————————————————-;

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

—————————————————;

This files are available in a zipfile here. It also includes the modified index.html as below.

PWA Version Modified files

—————————————————-;

  • Client\Properties\launchSettings.json (Ports only)
  • Client\wwwroot\index.html
  • Client\BlazorWA.Client.csproj
  • BlazorWA.sln (Guids only)

—————————————————-;

Modified Client Files

Client\wwwroot\index.html

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWA</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorWA.Client.styles.css" rel="stylesheet" />
x    <link href="manifest.json" rel="manifest" />
x    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
x    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
</head>

<body>
    <div id="app">Loading...</div>

    <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>
x    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

</html>

x: Additional lines

Client.csproj

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

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
x    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.22" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.22" PrivateAssets="all" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\Shared\BlazorWA.Shared.csproj" />
  </ItemGroup>

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

</Project>

x: Additional lines

Server Project

  • Properties/launchSettings.json (Ports only)

Shared Project

  • BlazorWA.Shared.csproj.nuget.dgspec.json {File paths only)}
  • project.assets.json (File paths only)

The Solution File

  • Project specific Guids are the only differences.

Conclusion

It is simple matter to add the 4 files to wwwroot in the client project and to modify index.html their as well as the client project file, to morph a non-PWA Blazor WebApplication app into a PWA version.

 TopicSubtopic
  Next: > Soft-ata
   
 This Category Links 
Category:Web Sites Index:Web Sites
  Next: > Azure Pipelines
<  Prev:   GPS