• Indigenous DNNizen •

DNN vNext as a Progressive Web App (PWA) on ASP.NET Core

DNN vNext as a Progressive Web App (PWA) on ASP.NET Core

Introduction

Have you been following along with the Progressive Web App discussion?  There is a lot of value in leveraging this modern technology. In this blog I’m going to detail the steps I took to update the DNN vNext project to run as a Progressive Web App (PWA) and what that means for the future of DNN.
 

Background

As you are most likely aware, the ecosystem’s DNN Technology Advisory Group (DNNTAG) is working to get DNN running on Microsoft’s latest technology, .NET Core.  Part of this project is to research and provide the best pathway forward for the DNN community.  I am a member of the DNNTAG and it has been really neat to research and learn more about Microsoft’s newest technology stack.  We’ve made some good progress, but we are in the humble beginnings of this journey. Even though we’re early on in the process, the benefits our community will reap from migrating to this modern technology are already quite evident.

While researching modern web technologies the term “PWA”, which stands for Progressive Web App, comes up a lot.  This recent trend in technology seems to be gaining traction in the web community, especially as it relates to the mobile experience.  I found that getting ASP.NET Core apps to run as a Progressive Web App is more straightforward than I initially thought… but what’s a Progressive Web App?
 

What is a Progressive Web App?

Wikipedia defines Progressive Web Apps as ”web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications”.  Google defines Progressive Web Apps as “user experiences that have the reach of the web and are reliable, fast, and engaging”.  That sounds neat, but what does it really mean?

In layman's terms a PWA is a website or web app that is a much better fit for mobile experiences, as PWA’s employ service workers to run faster on mobile.  They take advantage of native (yes, you heard me correctly...native) mobile app features. They are much more performant. And, they can even work offline. If you’re thinking you can load your website faster, access a device’s camera or even detect its motion… you’re exactly right!
 

DNN vNext as a PWA

As we are working on DNN vNext prototypes, it only made sense (to me) to see how we can leverage the advantages offered by progressive web apps in our project.  Turns out, Microsoft’s Mads Kristensen wrote a great article recently that walks through the process of getting ASP.NET Core apps to run as PWAs. I followed Mads’ steps and within minutes the current DNN vNext prototype was up and running as a PWA!

Here’s a video of me walking through the setup and sample of DNN vNext running as a PWA:
 

 

Why This Matters to the DNN Community

So, what does all of this mean and why should you care about it?  If we are able to run DNN vNext as a PWA, then we’ll benefit in a lot of ways.  The features of PWAs are pretty substantial. Being able to cache locally means your website/web-app could potentially run offline.  Being able to take advantage of native mobile features, such as using the phone’s native camera or accelerometer functionality is really awesome!  Think about what module developers could do with these capabilities… the possibilities are impressive.  Learn more at What Web Can Do Today.

Leveraging all of these features and capabilities is great, but one of the biggest wins is in the area of performance, specifically mobile performance.  PWAs are extremely fast in comparison to “normal” responsive websites. However, don’t take my word for it, check out how Pinterest leveraged PWAs to drastically increase engagement.

Next Steps

So, if you’re thinking… where do we go from here?  Well, I’m also having those same thoughts. As for me, my next steps will be to create a custom native web component using Stencil and get that working in a DNN Razor Pages module.  I hope to make a follow-up video of that soon. By the way, native web components can be utilized in ASP.NET Core MVC, ASP.NET Core Razor Pages, React, Angular, Vue.js, plain old JavaScript, and so on.  I for one am excited about breaking free from framework churn.
 

In Sum

As we continue our work to get DNN on Microsoft’s latest technology stack, we are uncovering unique and creative ways to push the envelope.  I feel we are on the brink of something truly special. Each step of the way we are inching closer and closer to re-establishing DNN as a thought leader in the .NET space.  The thought of DNN vNext also running as a PWA could open the eyes of a lot of people!

What are your thoughts about DNN vNext running as a PWA?  Are you interested in shaping the future of DNN? Come join us in the DNN Technology Advisory Group.  It’s an exciting time to be a DNN’er.

Print
blog comments powered by Disqus