When you buy this book you support this site! - Thank You for your support!

Oct 16

Written by: Michael Washington
10/16/2019 5:43 AM  RssIcon

You can make your Server Side Blazor applications Progressive Webs Applications (PWA), that allow them to be installed (and uninstalled) on mobile devices without the need to go through the normal application store for those devices.

We can do this easily by simply installing a Nuget Package by SQL-MisterMagoo.

 

image

This started off with a Tweet

 

Creating the PWA App

image

Create a new project using Visual Studio 2019 (or higher).

image

Make it a Blazor Server App.

Note: This also works with Blazor WebAssembly Apps.

 

image

Right-click on the project node and select Manage NuGet Packages…

 

image

Install BlazorPWABlazorPWA.

 

image

Build the App.

 

image

You will see that files will be added to the project.

The ServiceWorker and manifest files are required to allow the Blazor project to be installed on a user’s mobile device or computer.

 

image

Also, if we look at the _Host.cshtml file (this is the first HTML file that is loaded with a user visits the Blazor application)…

 

 image

…we see that it was updated to reference the files added to load the ServiceWorker and manifest files.

 

image

Run the project.

 

image

We see that the user is now presented with the option to install the application.

 

Notes

  • With IOS devices, the users will need to use the Safari web browser to see the notice to install the application

 

Links

SQL-MisterMagoo

SQL-MisterMagoo/Blazor.PWA.MSBuild

Create PWA from Blazor app (customizing Blazor.PWA.MSBuild)

What is a PWA and why should you care?

Blazor.net

Tags: Blazor
Categories:

3 comment(s) so far...


Gravatar

Another Resource

Thanks for the article! I used the nuget package on one of my Blazor projects: https://github.com/bradwellsb/blazor-fire-calculators

You can dig around the code there and find information about how to add customizations using the hooks and properties of Blazor.PWA.MSBuild. If you find it helpful, I'd love a backlink to the C# tutorials site I'm trying to get off the ground.

By Bradley Wells on   10/16/2019 5:35 PM
Gravatar

Re: Making A Server Side Blazor Application a Progressive Web Application

@Bradley Wells - Yes please provide any links to any of your articles that provide information on customizing this :)

By Michael Washington on   10/16/2019 5:37 PM
Gravatar

Re: Making A Server Side Blazor Application a Progressive Web Application

Thank you! Ofc you don't get the offline stuff, but who really cares about that? :)
It's not a reason to not making serverside blazor, PWA.

By Flemming Kentved on   11/11/2019 12:45 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation