Question

我注意到我的PWA真的很奇怪。我可以在＃34; standalone＆＃34; Windows上的模式，但是当我尝试在我的Android设备上执行相同操作时，它忽略了＃34;独立的＆＃34;价值并在Chrome中打开网址（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和Lighthouse检查了清单文件。这两个工具都验证了文件，并没有向我显示任何错误/问题。＆＃34;添加到主屏幕＆＃34;对话框直接显示（每次首次启动时），我可以将PWA添加到我的主屏幕。服务工作者按预期工作，我在离线运行应用程序时没有任何问题（在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标题中与其他手机链接：

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

网络应用程序使用angular2（angular-seeds）构建，以防万一有人遇到类似的问题..

感谢您的时间和意见！

更新1：

当我没有使用代理从我的移动设备访问我的PWA而是通过本地网络中打开的端口访问它时，独立功能工作正常（但服务工作者注册失败..）。我还不确定为什么这个＆＃34; bug＆＃34;与代理人一起发生。

更新2：

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

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

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

Answer 1

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

ngrok http 8080

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

Answer 2

{
  "name": "name",
  "short_name": "name",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "images/icons/icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "./index.html",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2",
  "display": "standalone"
}

PWA - 清单属性＆＃34;显示＆＃34;：＆＃34;独立＆＃34;不适用于Android

2 个答案: