JavaScript for "Add to Home Screen" on Iphone

Javascript for Add to Home Screen on iPhone?

Yes. The majority of modern browsers support the Add to Home screen (or A2HS) feature for Progressive Web Apps. To quote the Mozilla Web Docs article:

Add to Home screen is a feature available in
modern browsers that allows a user to "install" a web app, ie. add a
shortcut to their Home screen.

See also: A2HS browser support at caniuse.com

How to show 'Add to home screen' on iOS with navigator.share()?

Using the Share API is not the right path for this task.
Right now, Apple, does not make the Add to Homescreen capability easy to find.
What you have to do is guide the user to use the button in Safari's app bar at the bottom. The Add to Homescreen button is in the panel displayed. You will need to guide the user to swipe to the right to find the button (assuming they have not moved it).

Crossing fingers, Apple will some day soon support the beforeinstallprompt process. To their credit this has been a part of iOS Safari since the iPhone was released. However, they have never improved the experience. :(

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

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).

How to show home screen prompt in IOS device using PWA

Manifest is not managed by iOS yet (in development currently). There is an interesting library to add the essential elements for iOS automatically. But there isn't no way to show a home screen pop-up at this moment...

https://github.com/GoogleChromeLabs/pwacompat

You can follow the status about features on iOS here :
https://webkit.org/status/#specification-web-app-manifest

---

Related Topics