PWA-清单属性“ display”：“ standalone”在Android上不起作用

Question

我注意到我的PWA的行为很奇怪。我可以在Windows上以“独立”模式启动它，但是当我尝试在Android设备上执行相同操作时，它将忽略“独立”值，并在Chrome（Android 7.0，Chrome-Android v62.x）中打开网址。它在Chrome-Android Beta v63.x中也不起作用（与此帖子相关，指的是chrome 62.x中的错误）。我已经用清单验证器和Lighthouse 检查了清单文件。两种工具都验证了文件，并且没有显示任何错误/问题。“添加到主屏幕”对话框直接显示（在每次首次启动时），我可以将PWA添加到主屏幕。服务人员按预期工作，我在脱机运行该应用程序（在Windows和Android上）没有任何问题。

我正在使用笔记本电脑上的代理在Android设备上进行测试（以防万一这可能是相关的）。我也尝试了不同的Android设备，但是发生了相同的问题。

注意：不同的PWA按预期方式工作，例如2048作为PWA

这是我的manifest.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">

该Web应用程序是使用angular2（角种子）构建的，以防万一有人遇到类似问题。

感谢您的宝贵时间和评论！

更新1：

当我不使用代理从移动设备访问PWA而是通过本地网络中打开的端口访问PWA时，独立功能就可以正常工作（但服务人员注册失败。）。我仍然不确定为什么代理服务器会出现此“错误”。

更新2：

我真正的问题是，为什么会这样？另外一个是，如果我发现的所有解决方案都存在妥协，我该如何在真实的移动设备上真正测试我的PWA的行为和感觉？关于开发环境

我在Android设备上进行测试的方式：

• 打开我的笔记本的端口，并通过我的笔记本的ip地址访问我的本地网络中的内容（由于没有https和没有localhost，服务工作者无法正常工作，但是pwa在独立模式下启动-.-）
• 在Android设备上将代理设置为我笔记本的ip（服务工作器正常运行，独立模式失败）

Answer 1

我找到了一种解决方案，可以在任何移动设备上测试我的PWA，而没有列出的任何妥协措施。我现在正在使用ngrok，它允许我创建到本地主机的隧道，以使其可从任何地方通过https访问。因此，我可以在任何智能手机，平板电脑或模拟器上进行测试。ngrok可以在这里下载，并且非常容易设置。使用单个命令，您可以创建到特定端口（例如8080）的隧道：

ngrok http 8080

不过，我仍然不确定为什么在为我的android设备设置代理时全屏选项不起作用。