PWA en iOS 15: ¿Mejoras? [iOS 15.4 actualizado]

Apple afirma que iOS 15 proporciona una mejor manera de mantenerse conectado, concentrarse y explorar con su importante lista de nuevas funciones. Sin embargo, ¿hay algo que pueda facilitar la vida de un desarrollador de PWA? Exploraremos todos los cambios más grandes, las decepciones, junto con algunas noticias interesantes en este artículo.

Todas las mejoras para PWA

[iOS 15.4] Carga previa de navegación para Service Worker

El iOS 15.4 implementa algunas mejoras nuevas para Service Workers, incluida la precarga de navegación y más soporte para los archivos generados por Service Worker.

En algunos casos, el inicio del trabajador del servicio puede aumentar el tiempo de respuesta de la red. La carga previa de navegación solicita las solicitudes de red durante el tiempo de arranque del trabajador del servicio, lo que debería ayudar con el rendimiento de PWA.

[iOS 15.4] Manifiesto de aplicación web mejorado: íconos y más

¡Buenas noticias! Después de una larga espera, los desarrolladores de PWA finalmente pueden implementar la aplicación web en iOS 15.4 con un ícono adecuado. Si no hay un ícono Apple-touch definido en el archivo de la aplicación web, el ícono del manifiesto de la aplicación web se configurará de manera predeterminada.

Sin embargo, el soporte aún no es perfecto. Todavía hay algunos errores menores que afectan la experiencia tanto para los usuarios como para los desarrolladores, como:

• La forma y el formato de los iconos se limitan solo a PNG cuadrados.
• Los iconos se redimensionan automáticamente si no coinciden con los tamaños predefinidos de iOS (Ipads: 152 x 152 y 167 x 167, iPhones: 120 × 120 y 180 x 180)
• Los iconos no aparecen cuando abre la hoja para compartir, pero finalmente aparecen cuando elige Agregar a la pantalla de inicio.
• Los iconos transparentes tendrán un fondo blanco o negro.

Además, en versiones anteriores, el Manifiesto de la aplicación web solo se obtiene cuando los usuarios eligen " Agregar a la pantalla de inicio ". Para iOS 15.4, el archivo ahora se analiza y se carga cuando la página ya se carga. Como resultado, puede aplicar el color del tema directamente en la carga de la página, lo que hace que las PWA sean más confiables.

[iOS15.4] Notificaciones web push

Al escribir un artículo para PWA iOS 15 el año pasado, compartimos algunas pruebas sobre cómo pueden llegar las notificaciones push web y adivina qué es, finalmente sucede.

Al igual que los íconos del manifiesto de la aplicación web, todavía hay algunos inconvenientes relacionados con la inserción web. Por ejemplo, está deshabilitado de forma predeterminada, por lo que las personas deben conocerlo primero para poder usarlo. Además, a algunos desarrolladores de PWA les resulta imposible utilizar la Web Push API para solicitar permisos de notificación, aunque existen opciones para ello.

Sin embargo, vale la pena celebrar la noticia. ¿Que es mejor? Web Kit ha anunciado la compatibilidad con Web Push en Safari 16 en macOS Ventura. Según sus burlas, Web Push podría estar disponible en iOS y iPadOS en 2023.

Color del tema compatible

Mientras que el estado de soporte para el manifiesto de la aplicación web sigue siendo "Soporte parcial", Safari 15 ahora ha habilitado oficialmente el color del tema en las metaetiquetas HTML y el manifiesto web . Por lo tanto, ahora puede realizar cambios en los colores de la barra de estado y el área de desplazamiento, que también se pueden aplicar a la barra de pestañas y los colores de fondo de desplazamiento en el diseño de pestaña compacta de Safari 15 en Ipad OS 15, Big Sur y MacOS Monterey .

Además, al usar el atributo de medios, también puede habilitar un modo oscuro/claro para su aplicación web progresiva en Safari 15.

 <meta name="theme-color" content="#ecd96f" media="(prefiere-color-scheme: light)">
<meta name="theme-color" content="#0b3e05" media="(prefiere-color-scheme: oscuro)">

WebGL mejorado (biblioteca de gráficos web) y API Web-Share

iOS 15 es testigo de una actualización de WebGL 1 a WebGL2. Se ha demostrado que WebGL 2 es una mejora significativa que es mucho más rápida, ofrece mucha más textura que WebGL y muchos otros beneficios.

Además, Safari 15 incluye soporte para Web Share nivel 2, lo que allana el camino para que los desarrolladores intercambien archivos de manera efectiva desde el navegador a las aplicaciones con el diálogo compartido nativo. Actualmente, admite imágenes, videos, audio, archivos de texto y más.

Este cambio, por ejemplo, permite a los usuarios compartir imágenes directamente desde las páginas de PWA a sus aplicaciones de Twitter sin pasos adicionales para guardar fotos en la biblioteca y volver a cargarlas.

Mejor API de sesión de medios

Media Session API brinda más datos y controles de reproducción, por lo tanto, lleva la experiencia multimedia a un nivel superior. Desde iOS 15, los usuarios pueden acceder a la tarjeta NOW PLAY desde Control Central , la pantalla de bloqueo y la barra de menú de MacOS Monterey y controlar algunas opciones de reproducción simples. Además, la nueva sesión de medios trae consigo la experiencia SharePlay , que permite ver películas y escuchar música con tus amigos a través de Facetime. Esta puede ser una buena noticia para las aplicaciones de podcast basadas en la web.

Compatibilidad con audio WebM para Safari, compatibilidad con WebM/VP9 para Ipad

WebM es una tecnología de transmisión de video web libre de regalías y de código abierto. Después de presentar WebM Image por primera vez en iOS 14, Apple ahora es compatible con los contenedores WebM del códec de audio Opus en Safari 15. Además, los usuarios ahora pueden transmitir videos WebM/VP9 en IpadOS15.

Esta actualización promete soporte completo para WebM en un futuro cercano y podemos esperar que el video de WebM esté disponible pronto en Safari móvil. Como resultado, los propietarios de PWA tendrán más opciones para mostrar sus medios de video para brindar mejores experiencias de usuario.

Compatibilidad con el módulo ES6 en Service Worker

ES6 marca el primer módulo integrado de JavaScript, proporciona una estructura sólida con la que es fácil trabajar, mantener, escalar y encapsular comportamientos. Con la llegada del nuevo módulo ES6 a Service Worker, ahora los desarrolladores pueden mejorar el rendimiento y habilitar el acceso sin conexión para iOS PWA de una manera más organizada. Como resultado, es fácil escalar rápidamente y aumentar las funcionalidades de PWA para satisfacer las demandas del mercado cuando sea necesario.

Multitarea más simple para iPad

El iOS 15 ha realizado algunas mejoras para una experiencia multitarea más intuitiva en el iPad, al tiempo que conserva lo que funcionó antes. Por ejemplo, hay una nueva pestaña de tres puntos pequeños que representa el menú multitarea en la parte superior de la pantalla que hará que la aplicación se muestre en pantalla completa, pantalla dividida o se deslice. Además, se introduce una ventana centrada flotante en SplitScreen, donde puede abrir una ventana en la parte superior de sus aplicaciones de pantalla dividida y luego enviarla a Slider Over, Split View o Full Screen.

Además, vale la pena mencionar rápidamente un nuevo método abreviado de teclado y una nueva interfaz de usuario multitarea que ve todas las aplicaciones (incluidas las de Slide Over).

Lejos de las revisiones, parece que la nueva actualización de Ipad multitarea para Web y PWA ha recibido comentarios positivos por ser mucho más fácil de usar que iOS 14.

Nuevo clip de aplicación: otra actualización notable

Hemos mencionado el clip de la aplicación en nuestro resumen de PWA iOS 14 como algo que se puede esperar de las PWA instalables similares a Android. Entonces, ¿cómo es ahora?

App Clip ahora se puede integrar con sitios web, como resultado, se muestra en Safari. La tarjeta permite a los usuarios terminar sus tareas iniciales, como pedir comida, alquilar una bicicleta y luego les pide que instalen aplicaciones nativas en la App Store. El nuevo cambio elimina algunos pasos adicionales de iOS 14 para descubrir los clips de la aplicación dentro de la página web y las aplicaciones de terceros.

Desafortunadamente, todavía no se ven los banners de instalación de PWA. ¿Apple hará clips de aplicaciones compatibles con PWA? ¿O están tratando de crear una versión de PWA propia? ¿O tal vez los clips de aplicaciones y las PWA simplemente no se relacionan en absoluto? La respuesta aún está en el futuro.

No se abordan limitaciones importantes

Los nuevos lanzamientos de iOS 15 seguramente traen algunas decepciones a los desarrollos de PWA, ya que, evidentemente, lo que estamos buscando todavía está fuera de la mesa. Todavía es bastante difícil implementar PWA en iOS 15 sin la disponibilidad de estas funciones:

• Sincronización de fondo
• Empuje web
• Aviso antes de la instalación y banner de instalación
• Audio de fondo para PWA

Además, tampoco se solucionan algunos puntos negativos que mencionamos en el artículo de iOS 14.

• No hay icono de PWA en la biblioteca de aplicaciones
• No hay muchos cambios en la compatibilidad con el manifiesto de la aplicación web (además de los colores del tema)
• La barra de estado sigue siendo black y solo black-translucent .
• Gran restricción de funciones en otros navegadores web

Quitar

Ahí tienes todo lo que iOS15 tiene para PWA. Si bien la mayoría de los cambios en la versión 15 son menores, iOS 15.4 con Web Push y más compatibilidad con Web App Manifest abren un futuro más brillante para PWA en iOS. Con el lanzamiento de iOS 16 beta en septiembre de 2022, esperemos que se produzcan algunos cambios más significativos.