(Editor's Note: This post was originally created on January 30, 2020, and has been updated to be accurate with the new Blazor Framework developments and features.)
Curious about using Blazor WebAssembly in Progressive Web Apps? Check out our sample app and what we learned developing it.
Progressive Web Apps (PWAs) can be great, and we wanted to see how building a PWA using Blazor would work. Experience is the best teacher, so we got to work, and are excited to share the results with you.
PWAs have been around for a while, and they can be pretty amazing. If you are not familiar with the term – it means Progressive Web Application, and the shortest intro I can do about PWAs is that they:
For further reading, you can go to the plethora of resources Google offers (they were the ones who advocated heavily for it, so it makes sense to go to them for info): https://developers.google.com/web/progressive-web-apps.
A Progressive Web App is basically a web app with a few extras, so we started out by having a design and creating the layouts, logic and everything else. You know, like you would usually do with any app. We just knew that we need this to run entirely on the client, so we chose the WASM Blazor flavor (I never get tired of saying this together, it’s like a small poem).
Now, to make it into a PWA, what you need is:
Doesn’t look too hard, or too long, I trust.
UPDATE: To make this even easier, you can you can use the Microsoft Project Template to generate this for you. You can read more about it in the MSDN: Blazor PWA article.
In order to focus on building the app itself, we dogfood-ed our own components to better see how native components that work in a server-side Blazor app work in a WebAssembly Progressive Web App. Everything went smoothly here, and the Telerik components are, indeed, production-ready and work the same way between WebAssembly and Server scenarios.
We used the following key things for a financial app:
Don’t take my word for it – try it out for yourself. Below is a QR code for easy scanning on your mobile:
Here’s what you can expect (yes, no phone is that tall, you’ll have to scroll a little):
Check out the full source code at https://github.com/telerik/blazor-stocks and download a free trial to try it by yourself (if you have a commercial license already, just upgrade the app).
This is just a sample application, so it does not have a full-blown backend, of course – we just decided to have the services generate some data to get the app off the ground. Feel free to rip that out and do your own REST API calls, the Blazor way.
It was mostly smooth sailing, yet there are a few things that I want to share with you, which will make your experience in building your first PWA better:
Now that we know the Telerik UI for Blazor components work seamlessly in a PWA app, you can go and build your own PWA. Or just transform the existing app you have to a progressive one. In a real app, however, you may need to implement caching for data responses and for offline changes, or at least to disable editing features when the app is offline (the “online” and “offline” JS events let you do that, just raise a flag in your app with them).
If you have any other tips, tricks or tools that help you make PWAs with Blazor, put them in the comments down below, or even open a pull request in the source code of ours.
Last but not least – download a free trial now and explore the PWA app and the capabilities we bring yourself.
Marin Bratanov is a Principal Technical Support Engineer in the Blazor division, after starting out in WebForms and going through Kendo UI. Ever since he joined Telerik in early 2011 as a novice, his main focus has been improving the services and customer care the company offers. Apart from work, Marin is an avid reader and usually enjoys the worlds of fantasy and Sci-Fi literature. You can find him on Twitter, Goodreads, LinkedIn and Facebook.
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.