Search⌘ K
AI Features
Home
Courses
Building Real-Life Applications with Blazor WebAssembly

Working with Manifest Files

Explore the role of manifest files in Blazor Progressive Web Apps by learning to add and configure manifest.json. Understand key properties like app name, icons, start URL, theme colors, and display options. This lesson helps you control how your PWA appears and functions when installed, enabling offline readiness and improved user engagement.

We'll cover the following...

A manifest file provides information about an app in JSON format. It is usually in the root folder of an application. The following code snippet shows how to add a manifest file named manifest.json to the index.html file:

HTML
<link href="manifest.json" rel="manifest" />

Here is a sample manifest file that includes many possible fields:

C++
{
    "dir": "ltr",
    "lang": "en",
    "name": " 5-Day Weather Forecast",
    "short_name": "Weather",
    "scope": "/",
    "display": "standalone",
    "start_url": "./",
    "background_color": "transparent",
    "theme_color": "transparent",
    "description": "This is a 5-day weather forecast.",
    "orientation": "any",
    "related_applications": [],
    "prefer_related_applications": false,
    "icons": [
            {
            "src": "icon-512.png",
            "type": "image/png",
            "sizes": "512x512"
            }
    ],
    "url": "https://bweweather.azurewebsites.net",
    "screenshots": []
 }

As mentioned earlier, a manifest file must include the name of the application and at least one icon. Beyond that, everything else is optional, although is it highly recommended that we include description, short_name, and start_url as a minimum.

Keys in

...