
How to add PWA (Progressive Web Apps) in ASP.NET Core
PWA (Progressive Web Apps) is one of the most popular technology among web developers in the IT world. In my idea, if you want to create a website you have to make a live interaction between your website and users especially in mobile devices. So, in this topic, I am going to illustrate you how to add PWA in ASP.NET Core.
- In you project, install the package called:
WebEssentials.AspNetCore.PWA
- Open the Startup.cs file and add below service:
services.AddProgressiveWebApp(new PwaOptions
   {
       CacheId = "V_" + VersionID,
       Strategy = ServiceWorkerStrategy.CacheFirst,
       RegisterServiceWorker = true,
       RegisterWebmanifest = true,
   });
In which the VersionID is a variable that gets it's value from the database or you can change it manually. After each change you should change the VersionID.
- Adding a
manifest.json
file in the root of thewwwroot
folder and add below code and customize it based on your website:
{
 "background_color": "#f8f8f8",
 "description": "Cute Codes Website Shows the techniques of programming in ASP, ASP.NET, ASP MVC Core, Blazor, JAVA Scripts, C#, C++ and etc.",
 "dir": "ltr",
 "display": "standalone",
 "icons": [
   {
     "sizes": "192x192",
     "src": "/uploads/favicon/android-chrome-192x192.png",
     "type": "image/png"
   },
   {
     "sizes": "512x512",
     "src": "/uploads/favicon/android-chrome-512x512.png",
     "type": "image/png"
   }
 ],
 "lang": "en",
 "name": "Cute Codes",
 "short_name": "CuteCodes",
 "start_url": "/",
 "theme_color": "#004dda"
}Â Â Â Â
It is done, run your solution and see the result on a mobile device.
Important: PWA only runs on sites that is SSL-encrypted and redirects to HTTPS.
Click on Add HomeScreen