Blog

iOS abre sus puertas a las Progressive Web Apps

Gran noticia para todos los que ya se orientaron hacia las Progressive Web Apps, y para los que todavía lo están pensando.
 
Ya conoces todo el potencial de las Progressive Web Apps, estas aplicaciones web que ofrecen funcionalidades nuevas en los navegadores, y cuyo comportamiento y experiencia son comparables a las de las apps nativas.
 
Si las Progressive Web Apps están ganando terreno desde el año pasado, su principal freno era la ausencia de ciertas funcionalidades claves en los dispositivos iOS.
​
Te presentamos en un artículo previo la piedra angular de las Progressive Web Apps, o sea un elemento clave que les permite proponer tal experiencia de usuario: los Service Workers. Representan la base técnica que distingue las PWAs de las páginas web clásicas.
Este script, ejecutado en el fondo del navegador, ofrece numerosas posibilidades de desarrollo, permitiendo de modificar considerablemente el comportamiento de una app. Sin los Service Workers, es imposible para las Progressive Web Apps de cumplir con el conjunto de sus promesas, lo que explica el freno representado por la incompatibilidad entre los Service Workers e iOS.
 
Con la actualización iOS 11.3, Apple parece oficialmente lanzarse en el mundo de las Progressive Web Apps, ya que, y lo habrás entendido, ¡los Service Workers ahora están disponible para iOS!

¿Cuáles son las funcionalidades disponibles para iOS gracias a los Service Workers?

Desde la actualización iOS 11.3, somos más que contentos anunciar que los usuarios de tu PWA, bajo iOS, ahora pueden gozar de las funcionalidades siguientes:
  • Funcionamiento fuera de línea
  • Corrección de un bug durante el uso de la cámara
Estas funcionalidades están disponibles si la PWA está ejecutada en Safari, o directamente desde la pantalla de inicio del dispositivo (modo full screen).
 
Los Service Workers no están asumidos por las Web Views, es decir por los otros navegadores que Safari (en Chrome iOS o en el navegador integrado de Facebook por ejemplo).

Ya tengo una PWA, ¿cómo puedo aprovechar de estas nuevas funcionalidades?

De tu lado, tienes que asegurarte que la fecha de generación de tu PWA es posterior al 6 de Abril. Para verificarlo, vete al menú Publicación > Actualización > Motor de la Progressive Web App. Re-lanza la generación de tu PWA si la fecha indicada es anterior al 6 de Abril.
 
Del lado de tus usuarios, sus dispositivos tienen que funcionar con iOS 11.3 (o con una versión ulterior). Una vez la actualización iOS 11.3 instalada, tu PWA beneficiará de todas las ventajas aportadas por el uso de los Service Workers.

¿Hay algunas diferencias entre las PWAs en Android y en iOS?

A pesar del enorme paso adelante que representa esta actualización para iOS, existen varias diferencias en el funcionamiento de las PWAs en iOS y Android. Aquí tienes las mayores diferencias de funcionamiento entre los dos OS:
 
- Gestión del caché: el funcionamiento fuera de línea de las PWAs está permitido gracias a un sistema de gestión del caché. En iOS, el almacenamiento de los datos está limitado a 50Mo, y no en Android.
En Android, los archivos almacenados se suprimen si el espacio de almacenamiento está saturado. En iOS, en cambio, si la PWA no está solicitada por el usuario durante varias semanas, los archivos en caché están suprimidos. Los datos se descargan de nuevo cuando se abre la PWA.
 
- Sincronización en el fondo: está posible en Android, no en iOS.
 
- Notificaciones push: todavía no están asumidas en iOS. Apple sigue siendo muy silencioso a propósito de la eventual disponibilidad de las notificaciones push en Safari. De todos modos, de momento, no está posible con iOS 11.3.
 
 - En Android, las PWAs pueden acceder al Bluetooth, lo que no es el caso en iOS.

¿Aportarán las próximas actualizaciones de iOS nuevas funcionalidades?

Por el momento, desarrollos favorables a las PWAs están en curso por Apple.
 
De hecho, después de los Service Workers, parece que Apple trabaja ahora sobre el soporte del Web App Manifest por su navegador. Se trata de un componente mayor de las PWAs. Este archivo descriptivo permite definir los elementos utilizados cuando la PWA funciona en el modo full screen, tal como lo define el W3C. La toma en cuenta del Web App Manifest en Safari permitiría por ejemplo:
 
  • Forzar la orientación de la pantalla cuando se utiliza la PWA en el modo full screen (es decir, cuando está lanzada desde su icono en la pantalla de inicio).
  • Integrar en Safari un sistema invitando el usuario a instalar la PWA en su pantalla de inicio (en Android, una pop-up aparece automáticamente). El Web App Manifest contiene todos los elementos permitiendo a los equipos de Webkit de construir un componente de este tipo.
  • Construir una pantalla de lanzamiento para la PWA. En Android, esta pantalla está construida a partir del icono de la app, de su nombre y de un color del fondo. Estos elementos están descritos en el manifiesto.

¿Cómo instalar mi PWA en la pantalla de inicio?

Es posible instalar una PWA en la pantalla de inicio de tu dispositivo iOS. Sin embargo, es el usuario quien tiene que realizar el primer paso ya que ningún mensaje de invitación aparece automáticamente.
Aquí tienes las etapas para instalar una PWA en una pantalla de inicio:

1. Accede a la PWA a través de su URL desde Safari

2. Haz clic sobre el botón de compartir en Safari

3. Haz clic sobre “Añadir a la pantalla de inicio”

4. Verifica que el nombre que aparece en la pantalla de inicio te conviene. Modifícalo si necesario y haz clic sobre “Añadir”.

¿Porqué la actualización iOS 11.3 es una oportunidad para tí?

Si ya estaban funcional en iOS, las Progressive Web Apps ahora están en proceso de funcionar plenamente en los dispositivos del gran Apple. El soporte de los Service Workers y los desarrollos en curso del Web App Manifest dan buena esperanza para
 El seguimiento de la historia entre Apple y las PWAs.
 
Una de las ventajas ineludibles de las Progressive Web Apps es su accesibilidad. Siendo ejecutadas en la Web, se acceden a través de una simple URL, están referenciadas por los motores de búsqueda y, sobre todo, una vez instalada en la pantalla de inicio, se utilizan como cualquier otra app.
 
Los dos primeros puntos son más que positivos para el aumento de tu visibilidad. El último es, de hecho, capital. Un nuevo canal de distribución, diferente de la App Store, se ofrece a ti. La World Wide Web, abierta y libre.

Sigue leyendo

  4 min de lectura

Tus eventos, membresías y donaciones de HelloAsso ya aparecen en tu app

En resumen. HelloAsso Eventos y HelloAsso Campañas son dos extensiones de GoodBarber, el creador de apps sin código, que leen los formularios públicos de una asociación en HelloAsso. HelloAsso Eventos llena una sección de agenda con los próximos eventos, cada uno con su fecha, su lugar y sus precios, y un botón para inscribirse en la app. HelloAsso Campañas llena una sección de artículos con las membresías, los formularios de donación y las colectas: las membresías se abren en la app y las donaciones, en el navegador del teléfono. Las conectas con las credenciales API de HelloAsso de tu asociación. Son gratuitas para las apps Content: cada sección cuenta como una de las extensiones incluidas en tu plan.Muchas asociaciones francesas ya venden sus entradas y cobran sus cuotas de socio en HelloAsso. En febrero de 2025, la plataforma superó los dos mil millones de euros recaudados para asociaciones desde 2009, la mitad en los 18 meses anteriores, y cuenta con 376 000 asociaciones registradas, según Le Journal des Entreprises, en un artículo del 6 de marzo de 2025. Así funcionan las dos extensiones para un club deportivo de barrio.

  7 min de lectura

¿Cómo ajustar los bordes en mi app?

En GoodBarber, cada celda, widget y campo ya tiene su borde de 1 px. Dale un color, un grosor de 1, 2 o 4 px, o un solo lado bajo un título.