PWA-清单属性& quot; display&&quot ;:& quot; standalone& quot;在Android上无法正常工作 [英] PWA - manifest attribute "display": "standalone" not working on Android

问题描述

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

I've noticed a really weird behaviour of my PWA. I can launch it in "standalone" mode on Windows, but when I'm trying to do the same on my Android device it's ignoring the "standalone" value and opens the url in Chrome (Android 7.0, Chrome-Android v62.x). It also doesn't work in Chrome-Android Beta v63.x (relating to this post what refers to a bug in chrome 62.x ). I've checked the manifest file with the Manifest Validator and Lighthouse. Both tools validated the file and don't show me any errors/problems. The "Add to Homescreen" dialog is shown directly (on every first launch) and I can add the PWA to my Homescreen. The service-worker works as expected and I don't have any problems running the app offline (on Windows and Android).

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

I'm testing on my Android device with a proxy on my notebook (just in case this could be relevant). I also tried different Android devices, but the same problem occurs.

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

Note: different PWAs work as expected, e.g. 2048 as PWA

这是我的manifest.json:

Here is my 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的标题中与其他移动设备链接:

The manifest file is linked in the header of my index.html with additional mobile:

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

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

The web app is build with angular2 (angular-seeds), just in case someone faced similar problems..

感谢您的时间和评论！

更新1:

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

When I'm not using a proxy to access my PWA from my mobile device and instead accessing it via an opened port from my local network, the standalone feature works just fine (but service-worker registration fails..). I'm still not sure why this "bug" occurs with a proxy.

更新2:

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

My real question is, why is this happening? And the other one is, how can I really test the behaviour and feeling of my PWA on a real mobile device if all solutions I found have compromises? Concerning the development environment..

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

My ways of testing on an Android device:

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

推荐答案

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

I found a solution to test my PWA on any mobile device without any of the listed compromises. I'm using now ngrok what allows me to create a tunnel to my localhost to make it accessible via https from anywhere. Thereby, I can test on any smartphone, tablet or emulator. ngrok can be downloaded here and is very easy to setup. With a single command you can create the tunnel to a specific port (e.g. 8080):

ngrok http 8080

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

Nevertheless, I'm still not sure why the fullscreen option didn't work when setting a proxy to my android device.

这篇关于PWA-清单属性& quot; display&&quot ;:& quot; standalone& quot;在Android上无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！