Inside this training module we will look at installing a PWA application on your apple device.
On iPhone, Safari Browser has add to home screen feature but doesn’t show PWA install prompt automatically like android chrome browser.
How to add PWA to homescreen?
Step-1: Tap Share Icon shown at footer center in iPhone Safari.
Step-2: Choose ‘Add to Home Screen’. (Scroll right/down to find it)
Step-3: Then Click on ‘Add’ button shown in next screen.
On iPhone, Safari browser doesn’t show install prompt like android chrome. So users don’t know that they can install PWA.
So we have made iPhone install popup that will encourage & educate users how to add PWA to their homescreen.
This popup only shows in iPhone Safari, not in iPad, Android, Desktop etc.
If the user has installed PWA & open it from homescreen then this popup gets hidden.
Scan QR Code for live demo of iOS PWA Install Popup.
After scanning, open PWA URL in safari browser, you will see a popup there. (Note: In this demo we have disbale popup close functionality.)
We have given options of customization of popup text, display app name, display icon, overlay, bottom or center position etc in our PWA Generator.