Blazor WASM PWA — Adding a “New Update Available” notification

Disclaimer

Transforming an existing project to PWA

Why do we want a notification?

Let’s do it!

Create the project

dotnet new blazorwasm --pwa --name UpdateSample
cd UpdateSample
dotnet run
Command-line output of dotnet run
Default Blazor WASM Home page

Modify service-worker.js

// Activate the new service worker as soon as the old one is retired.
self.skipWaiting();

Add sw-registrator.js

Modify index.html

<script>navigator.serviceWorker.register('service-worker.js');</script>
<script src="sw-registrator.js"></script>

Create Blazor component

Modify MainLayout.razor

<UpdateAvailableDetector/>

Testing the notification

Screenshot of update notification

Detect while the application is running

setInterval(() => {
registration.update();
}, 60 * 1000); // 60000ms -> check each minute

Wrapping up

--

--

--

Software Engineer and Architect focusing on .NET and Microsoft technologies. Microsoft MVP. Practitioner of clean code. #solid #tdd #ddd #cqrs #es #graphql

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Upgrade to the Firebase Crashlytics SDK in React Native Project

Camera and Photo Gallery in Ionic React app using Capacitor

Camera and Photo Gallery in Ionic React app using Capacitor

Reliance digital customer care number 7319280659;;7764817469

Back-end development ve Javascript Normalde back-end deyince aklimiza hep .Net,

Building Your First (Real) jQuery Web App

21 Useful Open Source Packages for React Native

How to use SVG in React Native

Build a Hand Pose Detector Web App Powered by Machine Learning

A white robot looking at you

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wouter Huysentruit

Wouter Huysentruit

Software Engineer and Architect focusing on .NET and Microsoft technologies. Microsoft MVP. Practitioner of clean code. #solid #tdd #ddd #cqrs #es #graphql

More from Medium

Release the limits of Github Actions with self-hosted runners

Library of RD.xml files for NativeAOT

A better alternative than Signals in Godot with C# + Dependency Injection

Converting between types in increasingly absurd ways