Angularjs PWA在Bowser模式下打开，同时处于独立模式

我们从现有的angular 4项目中构建了一个

渐进式Web应用程序。在我们添加清单文件之前，一切都很顺利。当您从浏览器访问应用程序时，它会提示您将其添加到主屏幕。但添加后，当您从主屏幕单击图标时，它会在
浏览器模式下打开
独立模式的intead

我不知道为什么会这样，也不知道会有什么问题。下面是我的manifest.json文件，请帮助我

{
  "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"
}

应用程序的其他部分可能有问题

清单只是其中的一部分——如果其他部分（如serviceworker JavaScript文件）配置不正确，或者连接到service worker的JavaScript没有指向正确的位置，那么应用程序就不符合完整PWA的所有标准

如果它不符合所有标准，那么它就不一定拥有完整PWA的所有功能

使用Google Lighthouse工具验证您的应用程序配置是否正确：

另一个很好的提示是，当你第一次在Chrome浏览器上浏览网站时，它不会提示你将应用添加到桌面。
此外，如果您手动将其添加到桌面，如果桌面图标中有一个小的Chrome图标，则这也表明它不符合PWA的全部要求。
您是否检查了.json文件，其中（]和（“#43a047”）之间缺少逗号（，）？谢谢，comas已经添加，但仍然不起作用。我正在尝试找出@StampyCode的解决方案。非常感谢您的回答@StampyCode按照灯塔的流程解决我的问题：）