Почему мой автономный дисплей Angular PWA не работает в Chrome на Android? - PullRequest
Новая
       9

Почему мой автономный дисплей Angular PWA не работает в Chrome на Android?

0 голосов
/ 12 ноября 2018

В настоящее время я работаю над Angular PWA, но по какой-то причине настройка display = "standalone" не работает для Chrome на Android. Мои настройки следующие:

index.html 

<!-- Manifest /PWA -->
<link rel="manifest" href="manifest.json">
<meta name="msapplication-config" content="/assets/browserconfig.xml">
<link rel="shortcut icon" href="favicon.ico">

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="mask-icon" href="/assets/safari-pinned-tab.svg" color="#003865">

<meta name="apple-mobile-web-app-title" content="">
<meta name="application-name" content="">
<meta name="msapplication-TileColor" content="#003865">
<meta name="theme-color" content="#003865">

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-wep-app-capable" content="yes">

manifest.json 

{
"name": "",
"short_name": "",
"description": "",
"icons": [{
  "src": "assets/icon-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    "src": "assets/icon-152x152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "assets/icon-256x256.png",
    "sizes": "256x256",
    "type": "image/png"
  }, {
    "src": "assets/icon-512x512.png",
    "sizes": "512x512",
    "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"
  }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#003865",
  "theme_color": "#003865"
}

Я просто не могу понять, почему это так, поскольку в Safari и Samsung Internet все работает так, как ожидалось. Есть ли кто-нибудь, кто может помочь мне разобраться в чем проблема?

Ура!

Редактировать: Я забыл упомянуть, что уже использовал инструмент LightHouse в Chrome, и он вернул 100% баллов для PWA, поэтому я думаю, что это не может быть проблемой.

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Так что я смог решить эту проблему, используя этот ответ: https://stackoverflow.com/a/51706405/5798882

Похоже, что при развертывании необходимо использовать порт по умолчанию: 443. В противном случае PWA не откроется как отдельный дисплей.

0 голосов
/ 12 ноября 2018

Манифест и теги, которые вы использовали, кажутся мне правильными.Я бы посоветовал вам еще раз попробовать, выполнив следующие действия:

  1. Добавление еще 144 * 144 значков в манифест.

  2. Попробуйте диагностировать вашу проблему, используя «Аудит» (маяк), доступный на вкладке Аудит инструментов Chrome Dev.

    Попробуйте запустить мобильный аудит «Progressive Web App», результаты должны дать вам подсказку, что вынеобходимо исправить.

  3. Если вы используете прокси-сервер, попробуйте запустить приложение вне прокси-сервера env.
...