0
938
ViewsPWA: ¿Cómo activar programáticamente: "Agregar a la pantalla de inicio"? en iOS Safari
Lancé una aplicación web progresiva renderizada por servidor recientemente y todo funciona muy bien hasta ahora. Sin embargo, Android usando Chrome muestra un banner para descargar la aplicación que es increíble, pero no en iOS. Usando Safari, un usuario necesita unos pocos clics para acceder a la función "Agregar a la pantalla de inicio", que es mala.
Así que aquí estoy, estoy satisfecho con mi PWA, pero realmente me encantaría poder decirle al usuario que esta aplicación se puede agregar a la pantalla de inicio.
Por lo que puedo recordar, vi https://marvelapp.com/ haciéndolo para agregar un prototipo a la pantalla de inicio.
3 answers
Answer question0
iOS: Safari actualmente no es compatible con el banner de instalación de aplicaciones web, como en Android: Chrome.
No hay forma de activar programáticamente el banner de instalación en Android, excepto en el caso de que captures el beforeInstallPromot y lo uses para mostrar el banner.
En la respuesta vinculada, puede verificar la opción alternativa sobre cómo mostrar en el banner de la aplicación para guiar al usuario a agregar a la pantalla de inicio. Aquí hay un ejemplo de código para el mismo, que es específico de iOS (busque en #PROTIP 3).
0
Por ahora, Apple no da la posibilidad de hacer fácil esta experiencia de "Agregar a la pantalla de inicio".
Sin embargo, puede proporcionar una explicación de información sobre herramientas a sus usuarios, para los usuarios de IO: 
Detalles explicados aquí: https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native
en la sección: PROTIP 3: ¡Cree una ventana emergente "Agregar a la pantalla de inicio" usted mismo!
0
Tenga en cuenta que Chrome (en Android) es el único navegador que solicita automáticamente al usuario que instale su PWA. Debe manejar iOS y otros navegadores de Android manualmente. Las estadísticas dicen (actualizado en 2021) que los 3 principales navegadores móviles son Chrome, Safari y Samsung Internet (<6%).
Puede usar este código para ayudarlo a solicitar:
// helps you detect mobile browsers (to show a relevant message as the process of installing your PWA changes from browser to browser) var isMobile = { Android: function () { return navigator.userAgent.match(/Android/i); }, BlackBerry: function () { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function () { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function () { return navigator.userAgent.match(/Opera Mini/i); }, Samsung: function () { return navigator.userAgent.match( /SAMSUNG|Samsung|SGH-[I|N|T]|GT-[I|N]|SM-[A|N|P|T|Z]|SHV-E|SCH-[I|J|R|S]|SPH-L/i, ); }, Windows: function () { return ( navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i) ); }, any: function () { return ( isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() ); }, }; // use this to check if the user is already using your PWA - no need to prompt if in standalone function isStandalone(): boolean { const isStandalone = window.matchMedia("(display-mode: standalone)").matches; if (document.referrer.startsWith("android-app://")) { return true; // Trusted web app } else if ("standalone" in navigator || isStandalone) { return true; } return false; }En cuanto a las instrucciones de instalación:
Chrome - auto Safari - Press "Share" icon then "Add to home" Samsung internet - An "Install" icon will be shown on the top bar (I didn't quite understand if the app should be registered in Samsung Store for it to show) OR press "Menu" on the bottom bar then "Add/install to home" Other browsers - Press menu on the bottom/top bar then "Add/install to home"