Progressive Web App (PWA) Manifest File in Blazor

-

This article is going to explain what a manifest file is and how to use it in the PWA Blazor application. You can easily configure the manifest in your Blazor app. Let's see how to do it.

What is a Manifest File?

Manifest is a single JSON file that tells the browser what kind of application it is, What is the name of the application? Where is the application icon? What background color and etc. The manifest file name must be manifest.json

While creating the Blazor application, it will automatically create the manifest.json file under wwwroot folder.

The following is a default manifest.json code.

{
  "name": "SamplePWABlazorApp",
  "short_name": "SamplePWABlazorApp",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#03173d",
  "icons": [
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

name: The name of the application. This will be displayed in the title bar of the application, under the icon and in the Start menu.

short_name: This short name will appear under the app icon. But it only appears when the name is too long to display.

start_url: This allows you to set the page to be opened when the user clicks on the icon. “./” will open an index page.

display: It helps to set the display mode of the application.

  • "display": "standalone" - This will make your application look like a native application
  • "display": "browser" - This will open the application in the browser.
  • "display": "fullscreen" - This will open the web application without any browser and take up the entire display area available.
  • "display": "minimal-ui" - It gives the same look as the standalone, but it does have navigation controls.

background_color: This helps to set the background color of the application

theme_color: It helps to set the theme color of the application. I have changed the default theme color #03173d to #03c740 (green) to illustrate the theme color. You can see the title theme color changes to green in the following screeningshot

icons: The icon is an array of objects that represent different sizes of an icon. The application will use the icon based on the device you are using. The following code snippets explain how to add multiple icons.

  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]

There are three properties.
  • src - Image source
  • type - Type of the image
  • size - Size of the image

In the browser, you can check the details of your application manifest file. The following is a Chrome browser devTools screenshot. Right-click -> Inspect -> Application -> Manifest (left hand side)

Let us now see how the manifest file is included in the Blazor application. Under wwroot folder you can find index.html, in the file inside the header tag, you can find the link to the manifest.json file.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>SamplePWABlazorApp</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>

I hope this helps you. Keep coding.

Comments

Post a Comment

Popular posts from this blog

Entity Framework Core (EF) with SQL Server LocalDB

-
Image
This blog is going to illustrate how to implement Entity Framework (EF) Core with SQL Server LocalDB. The Entity Framework Core enables access to data from the database. This allows developers to avoid having to write most of the data access code. And the SQL Server LocalDB works similarly to the SQL SERVER with few features. You can get the LocalDB when you install visual studio or visual studio express. You can find the .mdf and _log.ldf files in the C:/Users/{user} directory. Let see how to create a SQL Server LocalDB and implement Entity Framework Core Step 1: The first step is to add a connection. In the menu -> click Tools and select Connect to Database It will display the Add Connection window. Enter (localdb)\mssqllocaldb in the server name textbox. Then in the Select or enter a database, select master and click ok Now in the server explorer, you can find the master DB containing Tables, Views, Stored
Read more

Creating a C# Azure Function with Visual Studio: Step-by-Step Guide

-
Image
Azure Functions is a serverless computing service provided by Microsoft Azure, enabling developers to create applications without worrying about server maintenance and infrastructure. Using Azure Functions, developers can create event-driven, scalable, and highly available applications. In this blog, we will explain how to create an Azure function using Visual Studio 2022 with C# as the programming language. Before we begin, there are some prerequisites to consider. You will need an active Azure account subscription, Visual Studio 2022, and Azure Functions and Azure Storage extensions for Visual Studio. Step 1: Creating a new Azure Functions project in Visual Studio To create a new project, open Visual Studio 2022 and click on "Create a new project". In the "Create a new project" window, search for "Azure Functions" and select "Azure Functions" from the list of project templates. Next, enter the project name, which
Read more

Exploring EventCallback in Blazor: Building Interactive Components

-
Image
Introduction: Blazor is a powerful framework for building web applications using C# instead of JavaScript. It allows developers to create interactive and dynamic user interfaces with ease. One of the key features in Blazor is the EventCallback<T> pattern, which enables communication between components through events. In this blog post, we will explore how to use the EventCallback<T> pattern in Blazor by building a simple example. Creating the Event-Driven Component: Let's start by creating a Blazor component called MyComponent. This component will raise an event when a button is clicked. Here's the code for the MyComponent.razor file: MyComponent.razor < h3 > My Component < / h3 > < button @onclick = " RaiseEvent " > Raise Event < / button > @code { [ Parameter ] public EventCallback < string > EventRaised { get ; set ; } private async Task RaiseEvent ( ) { await EventRais
Read more