Create PWA with Blazor and ASP .NET Core 3 Preview

Early this week, I received news from senior saying that Visual Studio 2019 16.2 GA was finally released. As I was also planning to write an article about building a PWA with .NET and Blazor, so I decided to blog about the journey on doing that with the newly released VS 2019.

“Why PWA?” You may ask.

PWA stands for Progressive Web App. To put it simply, it is basically a mobile app delivered through the web technology. Hence, when a PWA is active in the Internet browser in mobile, we can receive push notification through it or we can add it to home screen for direct access to the app.

The reason why I decided to look into PWA is also because when I delivered the talk about the future of ASP .NET Core 3.0 with Blazor in Microsoft Insider Dev Tour in Kuala Lumpur, I received a question from the audience is whether we can apply Blazor in mobile app development. Well, through PWA, my answer is yes.

Snake Chia, Microsoft MVP, delivered a great keynote in Microsoft Insider Dev Tour in Malaysia. (Image Credit: Microsoft Malaysia)

In fact, there is already a well written article on this topic with .NET Core 2.1 by Konrad in January 2018. Now things have been changed especially with the new SDK and IDE. Hence, this article is basically how we can do that with Blazor and ASP .NET Core 3.0.

Tools

The tools used in the demonstration in this article are as follows.

1. Visual Studio 2019 (16.2 GA);
2. .NET Core 3.0 (SDK 3.0.100 Preview 5-011568);
3. Microsoft.AspNetCore.Blazor.Templates (0.7.0).

Create Project

Let’s start from the very beginning.

Firstly, we need to create an ASP .NET Core Web Application, as demonstrated below. We can name the project “BlazorPwa”.

Creating an ASP .NET Core web app.

Secondly, we will be brought to the following screen where we need to specify the framework as well as the project template.

Creating Blazor WebAssembly App

If we build the solution right after it is successfully created, then we will notice that there are errors.

Oh no, we can’t build the app at all!

One of the errors (the third one in the screenshot above) states that the current .NET SDK does not support targeting .NET Core 3.0. Why do we have this error even after we have installed .NET 3.0 Core SDK? Well, it turns out that we need to explicitly enable the use of .NET Core preview SDKs as shown below. Yes, our .NET Core 3.0 SDK is preview, remember?

By default, VS 2019 16.2 GA does not allow us to use previews of .NET Core SDK.

Finally, after we have enabled it and restarted the IDE, we can proceed to next step.

Run the Program

Since now there is no more error, we can actually start the project by hitting F5. However, before we can do that, we need to understand a few things.

The solution contains the following three projects.

• BlazorPwa.Client: The main project which runs completely client side with WebAssembly;
• BlazorPwa.Server: The backend project which supports server side operations;
• BlazorPwa.Shared: A .NET Standard library that is used to share code between the two projects above.

We must first set the project BlazorPwa.Server as the StartUp Project.

Setting the BlazorPwa.Server as the StartUp Project.

Then after that, we must also make sure to change the runner from IIS Express to the standalone execution option BlazorPwa.Server, as shown in the screenshot below.

Without doing this change, we cannot run the app successfully.

Now, if we press F5, we will get to see a console app stating “Now listening on: http://localhost:52182” (the port may be varied). After 10 seconds, then the app will be displayed on the Internet browser nicely.

Yay, our first app using Blazor!

Create the PWA

Now the app is still not yet a PWA. A PWA needs a few things, especially the following:

• A web manifest containing info about the app;
• Icons for the app;
• A service worker caching our app to work offline.

There are actually a few more items that we need to provide. Google is nice to give us a checklist.

Firstly, we need to put a web manifest in a file called manifest.json located in the wwwroot folder under BlazorPwa.Client project.

The simple manifest file for our PWA.

As stated in the manifest, we need to provide two logo files for our app too.

Branding is important ya.

Finally, in the wwwroot folder, we need to create a new JavaScript file, service-worker.js, that will contain our service worker which is to handle the caching for the PWA in the background.

Remember to update the link to the DLL if you name your solution differently.

How will this JavaScript be used? Well, we need to modify our index.html to be as follows.

Remember to add the link reference to manifest too!

Basically this is the last step to conclude our PWA creation. However, we need an extra step to stop the project BlazorPwa.Client from generating a .pdb file too.

Changing the Debugging Information of BlazorPwa.Client to “Embedded”.

That’s it! So now, if we launch our application on the Microsoft Edge, we will see a new button says “Install” at far right of the address bar, as shown in the screenshot.

Wow, we can now install our web app on desktop!

Anyway, this is just the first step. You can refer to my GitHub repo for this project which I will continue to update from time to time: https://github.com/goh-chunlin/BlazorPwa

Acknowledgement

I’d like to thank Konra Müller for writing the article Create Progressive Web Apps with .NET using Blazor which helps me a lot on getting started. Thanks to the audience in Microsoft Insider Dev Tour Kuala Lumpur for asking the excellent question too which inspired me to look into this topic!