Cómo abrir enlaces en PWA Ionic sin que Safari lo bloquee

Cuando desarrollas PWAs con Ionic, es muy común encontrarse con un problema que funciona en Chrome pero falla en Safari PWA iOS: los enlaces a WhatsApp, Telegram o pasarelas de pago que se abren con window.open() simplemente no funcionan.

En este artículo vamos a explicar:

1. Por qué ocurre este problema en iOS.
2. Cómo solucionarlo abriendo ventanas de forma segura.
3. Cómo hacer que funcione en Android, desktop y Safari iOS.
4. Cómo implementar un fallback sólido.

El problema: window.open() bloqueado en PWA iOS

En Safari PWA (modo standalone):

• No se permiten pop-ups que se abran desde callbacks asíncronos.
• Esto significa que cualquier window.open() dentro de un subscribe de un observable o de un then() de una promesa no será ejecutado.
• Por eso tu flujo de pago o botones de compartir apps como WhatsApp/Telegram funcionan en Chrome pero no en iOS.

Ejemplo típico que falla:

this.paymentService.createPayment(orderId).subscribe(result => {
const url = `https://www.paypal.com/;
window.open(url, '_blank'); // ❌ falla en PWA iOS
});

La solución: abrir la ventana primero y luego actualizar la URL

La regla de oro es:

Siempre abre la ventana directamente en el click del usuario, y actualiza su location.href después.

Implementación segura

const paymentWindow = window.open('', '_blank');

// Después, dentro del callback asíncrono
const url = https://www.paypal.com/web2?ref=${orderCode};
if (paymentWindow) {
paymentWindow.location.href = url;
} else {
window.location.href = url; // fallback
}

Esto funciona en todas las plataformas:

• Chrome Desktop → nueva pestaña
• Chrome Android → nueva pestaña o Share Sheet
• Safari iOS PWA → ventana abierta correctamente
• Safari iOS navegador normal → ventana abierta correctamente

Buenas prácticas para Ionic PWA

1. Un solo flujo de compartir usando Web Share API.
2. Abrir ventana de pago primero al click, actualizar después.
3. Fallback siempre disponible (copiar enlace).
4. Evitar prometer que un botón abrirá directamente WhatsApp/Telegram en iOS PWA.
5. Detectar plataforma solo para mejorar UX, no para cambiar la lógica de negocio.

Conclusión

• Safari PWA iOS bloquea ventanas asíncronas y no permite deep links a apps externas.
• La única manera de que funcione es abrir la ventana en el hilo del click o usar Web Share API.
• Android, Chrome Desktop y navegadores modernos no tienen este problema, pero es recomendable usar la misma lógica para mantener consistencia.
• Siempre provee un fallback (copiar enlace) para navegadores antiguos.

Con esta estrategia, tus botones de pago y compartir funcionarán en todos los dispositivos y evitarás problemas con usuarios de iOS PWA.