Why you should be using Progressive Web Apps?

Progressive Web Apps (PWAs) are Web Apps which combines the best features of Web and Native Apps. In short it can be describe as “The best of the web, plus the best of native apps”. The biggest advantage is the cost saving in terms of app development and maintenance. Because it is assumed that making a website is easier than making native apps for different platforms like Android, iOS and the web. 

With the native apps the hardest problem is distribution. Mobile apps can take up a lot of storage space on your phone. Progressive Web App stake up far less space, on average, and they could save you a significant amount of storage and bandwidth (from downloading apps).

In this post we are going take a look at how we can implement Progressive Web App behavior into existing or new ASP.NET MVC 5 app. If you are new to Progressive Web Apps (PWAs) then Google Developer Web Network has something for you to read.

 Progressive Web Apps are user experiences that have the reach of the web, and are:  
    Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.        
    Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.       
    Engaging – Feel like a natural app on the device, with an immersive user experience.
 This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

Google Developer Web Network

Learn How SphereGen Can Help

 

Configuring and creating Progressive Web Apps (PWAs) using ASP.NET Core 2.0 is pretty straightforward with Visual Studio 2017 as you can add this behavior using NuGet Package WebEssentials.AspNetCore.PWA. But if you are working with ASP.NET MVC 5 then it requires some manual addition of JavaScript and JSON files. This post talks about how to add PWA behavior to ASP.NET MVC 5 app and how to extend it with a simple example.

This article considers your site is served over HTTPS (required for serviceworkers) and pages are responsive on tablets & mobile devices because these are the basic items in baseline progressive Web App checklist. So, we will concentrate on most challenging part of implementing PWA behavior into existing MVC app.

How to implement PWA behavior to ASP.NET MVC 5 app
  • Open your existing ASP.NET MVC 5 solution.
  • Adding icons of different sizes inside Content folder.


  • Now, add manifest.jsonfile in the root of MVC project. You can get more information about manifest.json (or manifest.webmanifest) at MDN Web Docs.

The web app manifest provides information about an application (such as its name, author,icon, and description) in a JSON text file. The manifest informs details for websites installed on the home screen of a device, providing users with quicker access and a richer experience

MDN Web Docs

      Add above code to your manifest.json file and include same file in <head> of _Layout.cshtml file like below.

      Also add theme-color Meta tag with valid colorin _Layout.cshtml file.

  • Now, we need to have an offline page to show onnetwork availability. 
    So, either you can create controller OfflineController and put some informatory text in Index.cshtml or create standalone offline.html and place it in root directory.
  • Add new JavaScript file (seviceworker.js) for service worker in root of the project. Have a look Google Developer Web Network to know more about service workers.

Add above code to your serviceworker.js file and include same file at the end of the <body> in_Layout.cshtml file like below.

Now you can verify by opening the application using Chrome browser open Chrome Developer Tools (Ctrl + Shift + I)under Application Tab, service worker is activated and running with the application. You can use Lighthouse in Chrome Dev Tools to run audit for your PWA.

Done! Your ASP.NET MVC application is now PWA.

Conclusion

We have implemented PWA behavior to our MVC application, although there are many things that can take a PWA from a baseline to exemplary experience. You can find more material on Google Developer Web Network as Google is promoting PWA vastly through Chrome Dev Summit and Google Chrome supports it fully.

Thank you for reading. Keep visiting our blogs and share this in your network. Please put your thoughts and feedback in the comments section.

Contact Us