What is the purpose of a manifest.json file in an Angular project

Question

First of all I didn't know anything about the potential existence of such file in the context of an Angular 5+ Project. I have a running Angular 5 project which doesn't have this manifest.json file in it. I decided to add service worker facility to improve the performance of the application. The service worker didn't get activated and I did a little research on the problem and came across the following open github issue in which some people mentioned they fixed the issue using a manifest.json. What is this file? Why couldn't it be part of the Angular CLI config? On what condition would you require one? Where is the potential documentation?

Solution 1

The Manifest file is used for the project name, icons, metadata etc to Home screen.

{
"name": "Project Example",
"short_name": "project",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}

Solution 2

From the MDN documentation :

The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.

It seems to be a critical part of creating a PWA (Progressive Web Application)

In this manifest you will be able to define for example Service Workers :

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.

To create a PWA you need those two aspects