Back to "Making your ASP.NET Core Website a PWA"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

# Making your ASP.NET Core Website a PWA

<datetime class="hidden">2024-08-01T11:36</datetime>

In this article, I'll show you how to make your ASP.NET Core website a PWA (Progressive Web App).

## Prerequisites

It's really pretty simple see https://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker/tree/master

## ASP.NET Bits

Install the Nuget package

```bash
dotnet add package WebEssentials.AspNetCore.PWA
```
In your program.cs add:

``` csharp
builder.Services.AddProgressiveWebApp();
```

Then create some favicons which match the sizes below [here](https://realfavicongenerator.net/) is a tool you can use to create them. These can really be any icon (I used an emoji 😉)

Save these in your wwrroot folder as android-chrome-192x192.png and android-chrome-512x512.png (in the example below)

Then you need a manifest.json

``` json
{
  "name": "mostlylucid",
  "short_name": "mostlylucid",
  "description": "The web site for mostlylucid limited",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512"
    }
  ],
  "display": "standalone",
  "start_url": "/"
}
```

xxxxxxxxxx
 
# Making your ASP.NET Core Website a PWA​<!--category-- ASP.NET --><datetime class="hidden">2024-08-01T11:36</datetime>​In this article, I'll show you how to make your ASP.NET Core website a PWA (Progressive Web App).​## Prerequisites​It's really pretty simple see https://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker/tree/master​## ASP.NET Bits​Install the Nuget package​```bashdotnet add package WebEssentials.AspNetCore.PWA```In your program.cs add:​``` csharpbuilder.Services.AddProgressiveWebApp();```​​Then create some favicons which match the sizes below [here](https://realfavicongenerator.net/) is a tool you can use to create them. These can really be any icon (I used an emoji 😉) ​Save these in your wwrroot folder as android-chrome-192x192.png and android-chrome-512x512.png (in the example below)​Then you need a manifest.json​``` json{  "name": "mostlylucid",  "short_name": "mostlylucid",  "description": "The web site for mostlylucid limited",  "icons": [    {      "src": "/android-chrome-192x192.png",      "sizes": "192x192"    },    {      "src": "/android-chrome-512x512.png",      "sizes": "512x512"    }  ],  "display": "standalone",  "start_url": "/"}```

501661:1

This is a preview from the server running through my markdig pipeline

ASP.NET

Making your ASP.NET Core Website a PWA

Thursday, 01 August 2024

In this article, I'll show you how to make your ASP.NET Core website a PWA (Progressive Web App).

Prerequisites

It's really pretty simple see https://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker/tree/master

ASP.NET Bits

Install the Nuget package

dotnet add package WebEssentials.AspNetCore.PWA

In your program.cs add:

builder.Services.AddProgressiveWebApp();

Then create some favicons which match the sizes below here is a tool you can use to create them. These can really be any icon (I used an emoji 😉)

Save these in your wwrroot folder as android-chrome-192x192.png and android-chrome-512x512.png (in the example below)

Then you need a manifest.json

{
  "name": "mostlylucid",
  "short_name": "mostlylucid",
  "description": "The web site for mostlylucid limited",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512"
    }
  ],
  "display": "standalone",
  "start_url": "/"
}