为什么我的 Angular PWA 独立显示在 Android 上的 Chrome 中不工作？

Question

我目前正在开发 Angular PWA，但由于某些原因，display="standalone" 设置似乎不适用于 Chrome on 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 中一切正常。有没有人可以帮我找出问题所在？

干杯！

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

Answer 1

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

在清单中再添加一个 144*144 图标。
尝试使用可用的 "Audits"（灯塔）来诊断您的问题来自 Chrome Dev Tools Audits 选项卡。

尝试运行"Progressive Web App"手机审核，结果应该会为您提供需要修复的线索。
如果您在代理中，请尝试运行代理环境之外的应用。

Answer 2

所以我已经能够通过使用这个答案来解决这个问题：

部署时似乎需要使用默认端口:443，否则PWA无法独立显示打开

为什么我的 Angular PWA 独立显示在 Android 上的 Chrome 中不工作？

Why is my Angular PWA standalone display not working in Chrome on Android?

html

progressive-web-apps

manifest.json

angular