mvysny/vaadin-kotlin-pwa

Install PWA on mobile

Toumani opened this issue · 5 comments

Hello there!

I don't know if I'm missing a thing but the main purpose of this sample project (which is to be an installable app) is just not working. When I navigate to https://vaadin-kotlin-pwa.herokuapp.com/, my mobile browsers (Firefox and Chrome) don't allow me to install the app, unlike regular Vaadin PWA projects such as Bakery App which I could successfully install.
I tried to fork the project and deploy it on Heroku and, although deploy went without issue, I'm still not able to install it.

Am I missing something ?

Hi, hmm it seems to be working for me. This is the screenshot of my Chrome browser when I navigate to https://vaadin-kotlin-pwa.herokuapp.com/

Screenshot from 2021-08-13 09-36-10

I can see exactly the same installation prompt on my Android Chrome browser. Firefox doesn't show any kind of installation prompt though, but that's a deliberate implementation on Firefox's side.

Could it be that you rejected to install the Vaadin-Kotlin-PWA app in the past, and perhaps your browsers do remember this choice?

Also, there used to be an installation prompt developed by Vaadin itself, but it has been removed since Vaadin 14.2; please see vaadin/flow#8038 for more details.

I don't see an installation prompt but this is not a big matter. The problem is that the installation seems different from the one with a regular Vaadin App (see Bakery App). Here are the screenshots to compare them:

Regular Vaadin App (Bakery App):

Bakery App - Install

VoK App:

VoK PWA - Install
As you can see, the regular Vaadin App offers an actual install where the VoK app only adds to home screen.
I don't know it this has something to do with my OS/browser version.

Thank you, I can definitely see that there's something fishy going on in your environment. For me, Chromium suggests the "install" option. Sounds like something is not working, and we need to figure it out. Can you reproduce the same issue with the desktop browser? If yes, then the PWA manifest may be missing - simply verify whether it's being retrieved from the server.
Screenshot from 2021-08-16 14-38-22
If only the mobile browser is having issues, then you'll need to remotely connect to the browser from your desktop browser; then you can inspect the PWA manifest.

Arch! I just found out what I'm doing wrong. Just forgot to access in HTTPS instead of HTTP. Browsers won't allow PWA installation on a non secure connection (except localhost). It worked perfectly fine. Many thanks for the help 😉.

Excellent catch, thank you for letting us know. It's easy to forget about those things. Closing thus as won't fix.