[enhancement] Add environment variable to set manifest variable "display": "standalone"

[schlagmichdoch]

As discussed in #254 there should be a possibility for admins to set the display mode.

As iOS cannot use PWAs in share menus and QR codes are always opening in the browser, the current default is 'display': 'minimal-ui'.

Maybe set 'display': 'standalone' as default anyway, as it would be an enhancement for UI clarity (hides the address bar).

[MrPropre]

Hello @schlagmichdoch, it would be interesting to implement display_override in the manifest file so PairDrop on Safari could still benefit of the PWA look. Here is a deeper explanation.

It works like this:

{
  "display_override": ["minimal-ui"],
  "display": "standalone"
}

Since Safari doesn't support this property, it will just use standalone as the display mode. On supported browsers (Chrome, Edge, etc.) il will use minimal-ui.

Thank you in advance!

[schlagmichdoch]

Interesting manifest property! I don't think minimal-ui offers any advantages over standalone though as we don't have any page history in the app that would benefit from back and forward buttons, does it? I have just set it to standalone for all clients for v2.0

[MrPropre]

I think the only benefit of keeping minimal-ui is the refresh button. Sometimes the app gets borked or something and it's easier to just refresh it to fix it. Since the "pull to refresh" feature is disabled in PairDrop (with overscroll-behavior in the body), minimal-ui provides a workaround on mobile in this situation. On desktop, there is a refresh button on right click even in standalone mode, that should do the trick.

See more here about overscroll-behavior.

[schlagmichdoch]

I guess we'll just switch over completely to "display": "standalone" without env var. If users really want to, they can adjust their manifest.json manually

[MrPropre]

Okay I agree with you, I just thought you still wanted to keep minimal-ui because of commit c040515

If it does not create any unwanted side effects, standalone mode would be so much better. Right now on iphone it just opens in the browser and there are dozens of pairdrop tabs.

[schlagmichdoch]

Good catch but I have somehow changed my mind. In the end you only have to pair your own devices once anyway and are good to go after that so it's not a big pain to do that on the browser and on the pwa separately. I think the improvement in user experience through a stand-alone pwa is greater than the benefit of having only one db. On desktop browsers that's already the case anyway.

[schlagmichdoch]

@MrPropre Are you open to test this on this instance: https://pairdrop.onrender.com
I'm especially interested in whether the footer is shown correctly after it is installed or whether it is overlayed by the iOS UI.

[MrPropre]

@schlagmichdoch I think it looks good. Here are some screenshots on iOS after installing the PWA.