PWA - 清单属性 "display"："standalone" 在 Android 上不工作

Question

我注意到我的 PWA 有一个非常奇怪的行为。我可以在 Windows 上以 "standalone" 模式启动它，但是当我尝试在我的 Android 设备上执行相同操作时，它会忽略 "standalone" 值并打开 [= Chrome 中的 72=]（Android 7.0，Chrome-Android v62.x）。它在 Chrome-Android Beta v63.x（ ). I've checked the manifest file with the Manifest Validator 和 Lighthouse 中也不起作用。这两个工具都验证了文件并且没有向我显示任何 errors/problems。"Add to Homescreen" 对话框直接显示（在每次首次启动时），我可以将 PWA 添加到我的主屏幕。service-worker 按预期工作，我没有任何问题运行应用程序离线（在 Windows 和 Android）。

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

注意：不同的 PWA 按预期工作，例如2048 as 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 的 header 中，附加手机：

<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#337ab7">
<link rel="manifest" href="manifest.json">

Web 应用程序是使用 angular2 (angular-seeds) 构建的，以防万一有人遇到类似问题..

感谢您的宝贵时间和意见！

更新 1：

当我没有使用代理从我的移动设备访问我的 PWA，而是通过本地网络的一个开放端口访问它时，独立功能工作正常（但 service-worker 注册失败。 .).我仍然不确定为什么 "bug" 使用代理时会发生这种情况。

更新 2：

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

我在 Android 设备上的测试方法：

打开我的笔记本的一个端口并通过我的笔记本的 ip 地址访问我的本地网络内部（服务工作者不工作，因为不是 https 也没有本地主机，但是 pwa 以独立模式启动 -.-）
在 Android 设备上设置一个代理到我笔记本的 ip（service worker 工作，独立模式失败）

Answer 1

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

ngrok http 8080

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

PWA - 清单属性 "display"："standalone" 在 Android 上不工作

PWA - manifest attribute "display": "standalone" not working on Android

android

angularjs

service-worker

progressive-web-apps

manifest.json