Search⌘ K

Converting WeatherForcast App to PWA

Explore how to convert a Weather Forecast app built with Blazor WebAssembly into a Progressive Web App. Learn to add essential PWA features such as a manifest file, app icon, service worker, caching strategies, and offline page support to enhance user experience and app reliability.

Adding the logo

We need to add an image to be used as a logo for the app. We will do this by following these steps:

  1. Right-click the wwwroot folder and select the “Add, New Folder” option from the menu.
  2. Name the new folder images.
  3. Add the image below to the images folder.

    Note: We have already copied it in the playground below.

Sun-512.png
Sun-512.png

At least one image must be included in the manifest file for the PWA to be installed. Now, we can add a manifest file.

Adding a manifest file

To convert the web app into a PWA, we need to add a manifest file. We will do this by following these steps:

  1. Right-click the wwwroot folder and select the “Add, New Item” option from the menu.
  2. Enter “json” in the “Search” box.
...