PWA: How to programmatically trigger : "Add to homescreen"? on iOS Safari

javascript download progressive-web-apps
Guillaume Le Mière picture Guillaume Le Mière · Jul 3, 2018 · Viewed 50.8k times · Source

I released a server rendered progressive web app recently and everything works great so far. However, Android using chrome shows a banner to download the app which is awesome, but it doesn't on iOS. Using Safari, a user needs a few clicks to get to the "Add to homescreen" feature which is bad.

So here I am, I'm satisfied with my PWA, but I would really love to be able to tell the user myself that this app can be added to homescreen.

As far as I can remember, I saw https://marvelapp.com/ doing it to add a prototype to the homescreen.

Answer

Anand picture Anand · Jul 3, 2018

iOS - Safari currently don't support Web app install banner, like in Android - Chrome.

There is no way to programatically trigger install banner in Android as well, except for the case when you catch the beforeInstallPromot and use that to show the banner.

In the linked answer, you can check on the alternate option on how to show in app banner to guide user to add to home screen. Here is some code example for the same, which is iOS specific(look under #PROTIP 3).

Related questions

Download File Using Javascript/jQuery

I have a very similar requirement specified here. I need to have the user's browser start a download manually when $('a#someID').click(); But I cannot use the window.href method, since it replaces the current page contents with the …

Read More
How to trigger a file download when clicking an HTML button or JavaScript

This is crazy but I don't know how to do this, and because of how common the words are, it's hard to find what I need on search engines. I'm thinking this should be an easy one to answer. I …

Read More
Download a file by jQuery.Ajax

I have a Struts2 action in the server side for file downloading. <action name="download" class="com.xxx.DownAction"> <result name="success" type="stream"> <param name="contentType">text/plain</param> <param …

Read More