Progressive Web Apps (PWAs) are Web Apps that combine the best features of Web and Native Apps. In short, it can be described 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, in general, making a website is easier than making native apps for different platforms like Android, iOS and the web. Why make the same application for three platforms when you can make one for all of them?
With native apps the hardest problem is distribution. Mobile apps can take up a lot of storage space on your phone. Progressive Web App takes up far less space, on average, and they could save you a significant amount of storage and bandwidth (from downloading apps).
In this blog, we are going to look at how we can implement Progressive Web App behavior into existing or new ASP.NET MVC 5 applications. If you are new to Progressive Web Apps (PWAs) please take some time to familiarize yourself with the concepts of PWA and the different development methodologies
Progressive Web Apps are user experiences that have the reach of the web, and are:
Reliable – Load instantly and never show the chrome dinosaur, even in uncertain network conditions.
Fast – Respond quickly to user interactions with smooth animations and page 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.
Configuring and creating Progressive Web Apps (PWAs) using ASP.NET Core 2.0 is straightforward with Visual Studio 2017 as you can add this behavior using NuGet Package WebEssentials.AspNetCore.PWA. However, if you are working with ASP.NET MVC 5 it requires some manual addition of JavaScript and JSON files.
This section talks about how to add PWA behavior to ASP.NET MVC 5 app and how to extend it with a simple example.
This example assumes your site is served over HTTPS (required for service workers) and pages are responsive on tablets & mobile devices as these are considered the basic items in the baseline Progressive Web App checklist.
- Open your existing ASP.NET MVC 5 solution.
- Adding icons of different sizes inside the 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
Add the above code to your manifest.json file and include the 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 on network 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 the root directory. - Add a new JavaScript file (seviceworker.js) for the service worker in the root of the project. Have a look Google Developer Web Network to know more about service workers.
Add the above code to your serviceworker.js file and include the 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 audits for your PWA.
Done!
Your ASP.NET MVC application is now PWA.
We have implemented PWA behavior to our MVC application, although there are many things that can take a PWA from a baseline to an 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.