android - PWA - list 属性 "display": "standalone" not working on Android

Question

我注意到我的 PWA 有一个非常奇怪的行为。我可以在 Windows 上以“独立”模式启动它，但是当我尝试在我的 Android 设备上执行相同操作时，它会忽略“独立”值并在 Chrome 中打开 url(Android 7.0、Chrome-Android v62.x) .它也不适用于 Chrome-Android Beta v63.x ( relating to this post what refers to a bug in chrome 62.x )。我用 Manifest Validator 检查了 list 文件和灯塔。这两种工具都验证了文件，没有向我显示任何错误/问题。 “添加到主屏幕”对话框直接显示(在每次首次启动时)，我可以将 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"
}

list 文件链接在我的 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 而是通过我的本地网络的一个开放端口访问它时，独立功能工作正常(但服务 worker 注册失败..)。我仍然不确定为什么代理会出现此“错误”。

更新 2:

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

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

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

Answer 1

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

ngrok http 8080

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