Products

Solutions

Learn More

Partners

Community

Blog

About

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


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.

Comments

Hans Zassenahaus
Enough already! Let's concentrate on ensuring that the currently deployed technology is solid and error-free. We appear to be a long ways from this goal. Let's just keep pursuing zero-defect deployments; before we approach new technologies. There are always more sun beams just over the horizon.
Hans Zassenahaus Tuesday, March 13, 2018 4:38 PM (link)
David Poindexter
Thank you for your nice and constructive feedback. It is very helpful.
David Poindexter Tuesday, March 13, 2018 5:05 PM (link)
Matt Rutledge
Great work David. I think if we can consider PWA as part of the CMS / Platform that would be great. Keep it up.
Matt Rutledge Tuesday, March 13, 2018 7:03 PM (link)
Mark Buelsing
Great article David. I am excited to hear of your progress of bringing PWA to DNN. Please do tell us how it goes! I'm glad we have forward thinkers like you on the DNN Technology Advisory Group.
Mark Buelsing Wednesday, March 14, 2018 12:15 PM (link)
David Poindexter
Thanks Matt! Thanks Mark! I appreciate the encouragement to be forward-thinking.
David Poindexter Wednesday, March 14, 2018 4:43 PM (link)
Mitch Labrador
This is great David. I for one think Stencil is a fantastic tool, the framework churn kills sustained productivity. If you consider that as of the end of 2017, roughly 51 percent of global web traffic originated from mobile devices, up from 48 percent in the corresponding quarter of the previous year, you can see how PWA can be a big competitive advantage from a platform perspective as web traffic continues to shift into mobile. Where network speeds are often a limiting factor, PWAs caching mechanisms provide relief. For more sophisticated apps, having access to native functions can start to break down some of the walls between installed vs hosted apps.

Great job... thanks for sharing!!
Mitch Labrador Wednesday, March 14, 2018 6:53 PM (link)
David Poindexter
Thank you Mitch - I agree 100% sir. This is worth exploring as we are looking into options for what DNN vNext will look like.
David Poindexter Wednesday, March 14, 2018 8:43 PM (link)
Yoga Alliance
Great Article David. I am very excited to hear about the DNN vNext and running it as a Progressive Web App (PWA). Keep it up.
Yoga Alliance Thursday, March 15, 2018 6:09 PM (link)
David Poindexter
Yoga Alliance - this is all just exploratory at this point and no definitive path has been forged, but I find it encouraging that PWAs could be a possible value-add for DNN vNext.
David Poindexter Thursday, March 15, 2018 8:16 PM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Davies (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (102)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (165)
Daniel Valadas (25)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (79)
Francisco Perez Andres (12)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (1)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (35)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (172)
William Severance (5)

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  

What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out