7

我注意到我的 PWA 有一个非常奇怪的行为。我可以在 Windows 上以“独立”模式启动它，但是当我尝试在我的 Android 设备上执行相同操作时，它会忽略“独立”值并在 Chrome 中打开 URL（Android 7.0，Chrome-Android v62.x） . 它在 Chrome-Android Beta v63.x 中也不起作用（与这篇文章有关，指的是 chrome 62.x 中的错误）。我已经使用Manifest Validator和 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">

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

感谢您的时间和评论！

更新 1：

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

更新 2：

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

我在安卓设备上的测试方式：

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

1 回答 1

5

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

ngrok http 8080

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

于 2017-12-04T11:49:26.423 回答