Card
ASP
Saturday, 30 May 2020
Kamal Habibi
(0) Comments
Share
Download

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.

  1. In you project, install the package called:

WebEssentials.AspNetCore.PWA

PWA package

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

  1. Adding a manifest.json file in the root of the wwwroot folder and add below code and customize it based on your website:

pwa manifest

{

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

 

pwa

Click on Add HomeScreen

pwa