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.

1. In you project, install the package called:

WebEssentials.AspNetCore.PWA

2. 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.

3. Adding a manifest.json file in the root of the wwwroot 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