PWA Openning in Bowser mode while being in Standalone mode

Question

We built a Progressive Web App from an existing angular 4 project. everything worked well till we added the manifest file. When you access the App from the browser it prompt you to add it to the home screen. But after add it, when you clicked on the Icon from the home screen it open in the Browser mode intead of the Standalone mode.

I don't know why it is behaving so and what can be the problem. Bellow is my manifest.json file please help me.

{
  "name": "Mobile Application",
  "short_name": "Mobile App",
  "icons": [
    {
      "src": "assets/icons/android-icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "assets/icons/android-icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "assets/icons/android-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "assets/icons/android-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "assets/icons/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "assets/icons/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    }
  ]
  "background_color": "#43a047",
  "theme_color": "#43a047",
  "display": "standalone",
  "start_url": "/index.html",
  "orientation": "portrait"
}

Answer 1

There's probably something wrong with some other part of your application.

The manifest is just one part - if the other parts, such as the serviceworker JavaScript file aren't configured correctly, or the JavaScript that connects to the service worker aren't pointing in to the right place, then the app doesn't meet all of the criteria to be a full PWA.

If it doesn't meet all of the criteria, then it won't necessarily be given all of the functionality of a full PWA.

Use the Google Lighthouse tool to verify your application is configured correctly: https://developers.google.com/web/tools/lighthouse/

Another good hint that it isn't correctly configured, is that when you navigate to the website for the first time on a Chrome browser, it doesn't prompt you to add the app to your desktop. Also, if you manually add it to your desktop, if the desktop icon has a small Chrome icon inside it, then this is also an indication it doesn't meet the full requirements of a PWA.