API to open add to homescreen popup

Right now add to home screen popup it appears only if certain conditions are meet. Popup are in general hated by users, especially if they happen when they do not expect it. I think we should provide more options how we want handle the UX to install the web app.

I think google app provide a good example of how to install an app.

When you land on the page you see a panel with the app, when you click on the panel

f5b0043f-3d5a-4111-9989-062c823d0288.jpg899×1599 97.1 KB

this screen will appear asking you if you wish to install the app

1f57967e-7a55-438c-ba78-c9ccbe796d74.jpg899×1599 128 KB

I think we can take inspiration from that example and make it even better. My suggestion is to have a native install button. The button could have the browser branding like google play does The button cannot be customise you cannot apply any css or js. When you click on the button it open a popup of confirmation asking if you are sure to install the web app. Even if it is a button you can still apply limitation on the use to avoid is abused.

The beforeinstallprompt event already allows you to control when or if the popup is shown.

If you have a button on the footer, the first time the user see the page I cannot show the button because I will not be able to provide the install functionality.

You can show the footer when that event fires, and call the event’s prompt() method when the user presses a custom button.

Yes it is true but immagine how confusing is for a user to sometime see the button and sometimes it does not :). That was one use case but I suppose it could be applied for other type of solution.

I don’t think that’s confusing at all. The default “Add to home screen” bar sometimes appears and sometimes doesn’t, that’s perfectly reasonable.