feat: PWA hint dialog for mobile devices

[Pecacheu]

Split off from #835

A lot of users, including my testers so far, have literally no idea what the heck a Progressive Web App is, and didn't even know they could install the web page like an app. Unlike on desktop (where Chromium browsers for instance show a little 'install' icon in the URL bar), mobile browsers (Android and iOS) don't really display any hint whatsoever on supported sites.

This dialog should pop up for the user after logging in- but only once and only on mobile, with a helpful tip. Once dismissed, it should not appear again.

[Dadadah]

Does this need to be a modal? If it's a modal, we have to rely on finding out if the device is mobile, which is hard to do. I get that users don't know anything about PWAs, but maybe it's better to just put something in the settings screen for it instead? That way it's not invasive and instead allows the user to do it if they look in the settings.

[Pecacheu]

I get that users don't know anything about PWAs, but maybe it's better to just put something in the settings screen for it instead? That way it's not invasive and instead allows the user to do it if they look in the settings.

An option in settings might be an alternative option, but I'm not sure where would be a good place to put it. Maybe as a dismissible banner that appears at the top when you open settings. Otherwise if it's buried under a random menu like Appearance then it defeats the purpose because non-tech-savvy users will have a hard time finding it, but on the other hand if it's front and center with its own category in the sidebar then it'll be annoying to always be in your way if you don't want to install the PWA.

Does this need to be a modal? If it's a modal, we have to rely on finding out if the device is mobile, which is hard to do.

As for the detection method, the User Agent approach I'm using is very reliable and successfully detects any remotely modern Android or iOS device running any browser (and it would have to be decently modern to support PWAs anyway), it also has the advantage of not going off if the user toggles the "Desktop mode" setting on in their mobile browser.

The reason it's often frowned upon in the web design world to use User Agent detection is that narrower scope feature detection is usually better. (Eg. need your UI to adapt to a touch screen? Detect the touch screen, not just that it's a mobile device and assume. Or need a phone-scaled UI? Then trigger it based on the screen size and/or aspect ratio (which is what I'm doing in #835 btw.) But in this case what we're trying to detect is simply that the device isn't a desktop PC, since mobile users are much more "app-brained."

[Pecacheu]

Less wordy dialogue as per Dadadah.

Alternatively, we could go with a "No Thanks" button to make the one-time nature of the popup more clear.

[Misofist]

I agree that this should go in the Settings menu. I don't think it should be a dismiss-able banner, nor should it be buried in a submenu. I think there should be an "Install" button in the settings menu, preferably right near the top of the list.

Tapping on this should immediately fire prompt() in browsers which support beforeinstallprompt. In browsers which do not support this, it can open be a settings page with instructions on how to install it manually.