1

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

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

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

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).

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).

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?

Fatih Coşkun
  • 243
  • 2
  • 8
  • 2
    Is your local network HTTPS? Are you using a port? Others have reported issues with the PWA not opening as a standalone with a port. When they removed the port the standalone worked. – Mathias Aug 08 '18 at 14:06
  • Yes my server is serving HTTPS on a custom port (8443). The port might be a reason, but seems unlikely since the standalone flag works when the PWA is added to home screen without WebAPK. It will only stop working when the WebAPK is installed. In both cases the PWA is served on the custom port. – Fatih Coşkun Aug 08 '18 at 14:23
  • 1
    Try using the default port if you can. It worked for this issue. https://stackoverflow.com/questions/51677716/pwa-deployed-in-node-js-running-in-standalone-mode-on-android-and-ios – Mathias Aug 08 '18 at 14:25
  • PWA A2HS is a work in progress. Many people are trying many things that the Chrome team have probably not tried. – Mathias Aug 08 '18 at 14:27
  • 1
    You were right. Using default port now, and it started working. A parallel chromium group discussion confused me a bit: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/ebh9p7M7P5o . The answer that is given there seems to be false. – Fatih Coşkun Aug 09 '18 at 08:48

2 Answers2

1

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

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

Mathias
  • 4,243
  • 4
  • 25
  • 34
  • 1
    Indeed, it started working with default port. Whether the PWA is running inside a private or public network does not seem to be relevant for WebAPK. – Fatih Coşkun Aug 09 '18 at 11:49
0

Your PWA can be in complete private network(we have one) and still work as an installable (WebAPK) PWA. Only reason you would be seeing the Chrome UI is, one of the PWA criteria is not met. Run lighthouse report and make sure everything under PWA is passed. Post your audit report if you need help with it.

Anand
  • 9,672
  • 4
  • 55
  • 75
  • 1
    I THINK the PWA criteria was probably met. If it was not, the WebApk would not have been installed. Is my thinking wrong? – Mathias Aug 08 '18 at 16:37
  • 1
    If I simply say "yes, your thinking is wrong" would it help you? It doesn't help the community either when you don't provide some minimum debug info. Getting chrome PWA audit report would hardly takes a min. Just little over assuming . – Anand Aug 08 '18 at 16:40
  • Yes, it would help me. It would change my beliefs/assumption about the WebApk. I'm just trying to learn from those that may know more than me. Which is many people. :-) – Mathias Aug 08 '18 at 16:43
  • You didn't mention how your app is added to home screen as well to tell whats the role of webapk here. Using install banner or Chrome's menu A2HS option are two different ways you can add to home screen. – Anand Aug 08 '18 at 16:43
  • I didn't tell about the way I trigger a2hs because the outcome is the same. I tried it with Chrome's menu a2hs option as well as install banner. In both cases, the WebAPK is installed... but the standalone flag is ignored. @Mathias assumption is right also: the PWA criteria is met, otherwise it would not install as a WebAPK but instead would be added as as simple shortcut to the homescreen. Yes, I audited via lighthose also, and it shows all green. – Fatih Coşkun Aug 09 '18 at 08:44
  • "Only reason you would be seeing the Chrome UI is, one of the PWA criteria is not met" You cannot rely on this, as my tests show. All criteria were met, and it still did not work. The reason was my PWA did not run on default ports. – Fatih Coşkun Aug 09 '18 at 08:49
  • "You PWA can be in complete private network(we have one) and still work as a installable (WebAPK) PWA." Unfortunately this is not the case! The hidden requirement is that internet must be available on the device (private network has bridge to internet). This is required since the WebAPK is built using play store services. @Fatih, the answer to your google discussion is correct here: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/ebh9p7M7P5o In your case it probably worked since maybe your device had internet connection (bridged) while installing the PWA. – Nabster Aug 31 '20 at 02:48