WebAPK忽略在本地网络上运行的PWA的display:standalone标志 [英] WebAPK ignores display:standalone flag for PWA running on local network

问题描述

我正在开发一个PWA，我希望该PWA具有独立显示模式下的添加到主屏幕"(a2hs)功能.

I am developing a PWA for which I want to have "add to home screen" (a2hs) functionality in standalone display mode.

在开发过程中，我的PWA运行在只能从本地网络(而不是外部Internet)访问的服务器上.

During development, my PWA is running on a server which is accessible from within my local network only (not from outer internet).

在Android版Chrome上测试a2hs时，遇到以下奇怪行为.

When testing a2hs on Chrome for Android, I encounter the following strange behavior.

简单添加到主屏幕 将我的PWA作为常规快捷方式添加到主屏幕后，一切正常.单击快捷方式将以独立显示模式打开PWA(不显示Chrome UI).

Simple add to home screen When my PWA is added to the home screen as a normal shortcut, then everything works fine. Clicking on the shortcut will open the PWA in standalone display mode (without Chrome UI visible).

高级添加到主屏幕(WebAPK) 当PWA作为WebAPK快捷方式添加到主屏幕时，我的Web清单中的独立标志将被忽略.单击快捷方式将在浏览器选项卡中打开PWA(可见Chrome UI).

Advanced add to home screen (WebAPK) When the PWA is added to the home screen as a WebAPK shortcut, then the standalone flag in my web manifest is ignored. Clicking on the shortcut will open the PWA within a browser tab (with Chrome UI visible).

这种错误行为的原因可能是什么?我的猜测是Google的服务器需要能够访问我的PWA清单以正确组装WebAPK.由于无法从互联网访问我的清单，因此WebAPK组装不正确.不过这只是猜测.有人可以确认或描述这种奇怪行为的原因吗?

What could be the reason of this incorrect behavior? My guess is that Google's servers need to be able to access my PWA's manifest in order to properly assemble the WebAPK. Since my manifest is not accessible from internet, the WebAPK is not correctly assembled. This is just guessing though. Can someone confirm or describe the reason for this strange behavior?

推荐答案

如果使用的是自定义端口，请尝试使用默认端口.
其他人也报告了相同的奇怪行为.

If you are using a custom port, try using the default port.
Others have reported the same odd behaviour.

使用默认端口已解决此问题.
部署在node.js中的PWA在Android和iOS上以独立模式运行

This issue was fixed by using the default port.
PWA deployed in node.js running in Standalone mode on Android and iOS

这篇关于WebAPK忽略在本地网络上运行的PWA的display:standalone标志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！