Service worker allowing app name to change in angular 7

Question

I have added the PWA to my existing angular app, after which browser is allowing to add my app to home screen with mentioned app icon, name, description etc. The issue is while adding app to home screen it allows the user to change the app name which I want to restrict as Myntra and other products out there are doing. I am attaching the screen shots of my app and Myntra. Thanks in advance.

Manifest.json -

 {"name": "PwaDemo",
  "short_name": "PwaDemo",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Answer 1

You are testing the Add To Home Screen (A2HS) menu item on a site that is not HTTPS.
That menu link is available for all sites, not just PWAs.
When doing that, a user can modify the name of the Icon.

First
1. Deploy your website to a HTTPS host (REQUIRED)
2. Verify with the Chrome Lighthouse tools that you have an installable PWA

Then when a user clicks on the A2HS link they will NOT be able to modify the name.

Lighthouse will give you many great hints on how to get things right.