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

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

因此，我已经能够通过使用以下答案来解决此问题：https://stackoverflow.com/a/51706405/5798882

似乎在部署时需要使用默认端口：443，否则PWA不会作为独立的显示器打开。

Answer 2

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

在清单中再添加一个144 * 144图标。
尝试使用可用的“审计”（灯塔）诊断问题通过Chrome开发者工具的“审核”标签。

尝试运行“ Progressive Web App”移动审核，结果应该为您提供需要解决的线索。
如果您使用代理服务器，请尝试在代理服务器环境之外运行该应用程序。

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

2 个答案: