Открытие PWA в режиме Bowser в автономном режиме

Question

Мы построили Progressive Web App из существующего углового 4 проекта. все работало хорошо, пока мы не добавили файл манифеста. Когда вы заходите в приложение из браузера, он предлагает добавить его на домашний экран. Но после добавления, когда вы нажали на иконку с домашнего экрана, он открывается в Browser mode Intead из Standalone mode,

Я не знаю, почему он так себя ведет и в чем может быть проблема. Ниже приведен мой файл 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"
}

Answer 1

Возможно, что-то не так с другой частью вашего приложения.

Манифест - это всего лишь одна часть - если другие части, такие как файл JavaScript службы работника, не настроены правильно, или JavaScript, который подключается к работнику службы, не указывают в нужное место, то приложение не соответствует все критерии, чтобы быть полным PWA.

Если он не соответствует всем критериям, ему не обязательно будут предоставлены все функциональные возможности полноценного PWA.

Используйте инструмент Google Lighthouse для проверки правильности настройки приложения: https://developers.google.com/web/tools/lighthouse/

Еще один хороший намек на то, что он неправильно настроен, заключается в том, что при первом переходе на веб-сайт в браузере Chrome он не запрашивает добавление приложения на рабочий стол. Кроме того, если вы вручную добавляете его на рабочий стол, если на значке на рабочем столе есть маленький значок Chrome, это также означает, что он не соответствует всем требованиям PWA.