为什么我的 Angular PWA 独立显示器无法在 Android 上的 Chrome 中运行？

Question

我目前正在开发 Angular PWA，但由于某种原因，display="standalone" 设置似乎不适用于 Android 上的 Chrome。我的设置如下：

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

ma​​nifest.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 和三星 Internet 中一切正常。有人可以帮我找出问题所在吗？

干杯！

编辑：我忘了提到我已经在 Chrome 中使用了 LightHouse 工具，它为 PWA 返回了 100% 的分数，所以我想这不是问题。

Answer 1

所以我已经能够通过使用这个答案来解决这个问题：https://stackoverflow.com/a/51706405/5798882

部署的时候好像需要使用默认端口:443，否则PWA不会作为独立显示打开。

Answer 2

您使用的清单和标签对我来说似乎是正确的。我建议您可以通过以下操作进一步尝试：

1. 在清单中再添加一个 144*144 图标。

2. 尝试使用可用的“审核”（灯塔）来诊断您的问题 来自 Chrome 开发工具审核选项卡。

   尝试运行“Progressive Web App”移动审核，结果 应该为您提供需要修复的线索。

3. 如果您在代理中，请尝试在代理环境之外运行应用程序。