PWA - атрибут манифеста "display": "автономный" не работает на Android

Question

Я заметил действительно странное поведение моего PWA. Я могу запустить его в "автономном" режиме в Windows, но когда я пытаюсь сделать то же самое на своем устройстве Android, он игнорирует значение "автономный" и открывает URL-адрес в Chrome (Android 7.0, Chrome-Android v62.x), Это также не работает в Chrome-Android Beta v63.x (в связи с этим постом, что относится к ошибке в Chrome 62.x). Я проверил файл манифеста с Валидатором манифеста и Маяком. Оба инструмента проверили файл и не показывают мне никаких ошибок / проблем. Диалоговое окно "Добавить на главный экран" отображается напрямую (при каждом первом запуске), и я могу добавить PWA на свой главный экран. Работник сервиса работает как положено, и у меня нет проблем с запуском приложения в автономном режиме (на Windows и Android).

Я тестирую на своем устройстве Android с прокси на моем ноутбуке (на всякий случай это может быть актуально). Я также пробовал разные устройства Android, но возникает та же проблема.

Примечание: разные PWA работают как положено, например, 2048 как PWA

Вот мой манифест.json:

{
  "icons": [
    {
      "src": "assets/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image\/png"
    }
  ],
  "short_name": "My short name",
  "name": "My not sooooo short name",
  "theme_color": "#337ab7",
  "start_url": "/index.html",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait"
}

Файл манифеста связан в заголовке моего index.html с дополнительным мобильным телефоном:

<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#337ab7">
<link rel="manifest" href="manifest.json">

Веб-приложение построено с помощью angular2 (angular-seed), на случай, если кто-то столкнется с подобными проблемами.

Спасибо за ваше время и комментарии!

ОБНОВЛЕНИЕ 1:

Когда я не использую прокси для доступа к своему PWA с моего мобильного устройства и вместо этого получаю доступ к нему через открытый порт из моей локальной сети, автономная функция работает просто отлично (но регистрация работника службы не удается...). Я до сих пор не уверен, почему эта "ошибка" происходит с прокси.

ОБНОВЛЕНИЕ 2:

Мой настоящий вопрос: почему это происходит? И другой вопрос: как я могу на самом деле проверить поведение и ощущения моего PWA на реальном мобильном устройстве, если все найденные решения имеют компромиссы? По поводу среды разработки..

Мои способы тестирования на устройстве Android:

• откройте порт моей записной книжки и войдите в мою локальную сеть через IP-адрес своей записной книжки (работники службы не работают, поскольку не https и не localhost, но pwa запускается в автономном режиме -.-)
• установить прокси на устройстве Android на ip моего ноутбука (сервисный работник работает, автономный режим не работает)

Answer 1

Я нашел решение для тестирования моего PWA на любом мобильном устройстве без перечисленных компромиссов. Сейчас я использую ngrok, что позволяет мне создать туннель для моего локального хоста, чтобы сделать его доступным через https из любого места. Таким образом, я могу тестировать на любом смартфоне, планшете или эмуляторе. Ngrok можно скачать здесь, и его очень легко настроить. С помощью одной команды вы можете создать туннель для определенного порта (например, 8080):

ngrok http 8080

Тем не менее, я до сих пор не уверен, почему не работает полноэкранный режим при настройке прокси на моем устройстве Android.

Answer 2

{
  "name": "name",
  "short_name": "name",
  "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"
    }, {
      "src": "images/icons/icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "./index.html",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2",
  "display": "standalone"
}