Can I create a QR code to install a web app?

Question

I'm a huge begginer in programming and I want help about coding mobile stuff. Actually, I want to create a QR code which allows to add an icon linked to a web app.

For example, I want to add figma web app on my phone. Usually, I would go the website, choose the option "add on my homescreen" and validate my choice. But I want to minimize the steps by just scanning a qr code to directly have the choice to add the web app. To illustrate :

1. figma website

2. go to the options to add an icon of figma on my homescreen

3. validate my choice

4. the app is on my homescreen !

But I want this :

1. scan the qr code

2. Validate the action

3. The app is on my homescreen !

I suppose that it would be different depending the os that I use but if I can configure a QR code for ios and one for android it would be perfect !

I've started to generate QR code and modify the encoded text but I've found nothing interesting. Maybe I just simply don't have the right to do this i don't know ? Is it a story of URI scheme or deep link ?

Anyway thanks for the help, it's still interesting to improve knowledge on something that could work (or not!).

Answer 1

This article is useful, it worth to have a look: https://web.dev/customize-install/ Alright this is the method that I used: The QR code should contain a URL with a parameter that can be used to indicate that the installation flow should start, something like www.myapp.com/dashboard?installPWA=true, once you scan the QR code this will redirect you to that page on your phone, in that page you need to have code to handle the installation, for instance you can have a button that it only shows when the installPWA parameter is true and the PWA is not installed yet, the button could have an event listener that will trigger the install prompt

button.addEventListener('click', function (e) {
          // Show the install prompt
          deferredPrompt.prompt();
        });

using an approach like the button one is important because the prompt must be called with a user gesture (https://developers.google.com/web/updates/2018/06/a2hs-updates)2, this mean the user need to actively click the button, you can just use different ways to promote your app to the user.