I know this has been asked a couple of times in this forum but I’m having trouble setting up a popup to display the message “Install to Home Screen” when the user is looking at my app on a phone browser.
I can either get it to always show or never show, regardless of if I am on my phone’s browser or opening the app from its installed version on my phone’s home screen version.
What I would like to do when a user visits my domain:
On mobile:
User has installed the PWA to their home screen - Don’t Show
User has not installed the PWA to their home screen - Show
On desktop
Show a page with a QR code so that once scanned it brings the user to the mobile version where the user can see the popup to install the PWA to their phone’s home screen.
Is anyone able to see what I am doing wrong or have suggestions for how to detect standalone mode and show this popup?
if (/iPhone/i.test(userAgent)) {
console.log('Is iPhone');
return 'iPhone';
} else if (/Android/i.test(userAgent)) {
console.log('Is Android');
return 'Android';
} else if (/Windows Phone/i.test(userAgent)) {
console.log('Is Windows Phone');
return 'Windows Phone';
} else {
console.log('Unknown device');
return null; // or any default value for other cases
}
Thank you for sharing your solution. Your detailed explanation was incredibly beneficial and helpful to me. The time and effort you put into providing such a comprehensive response are truly appreciated.