Haz que tu Progressive Web App no se sienta como un sitio web, sino como una aplicación "real".
Cuando juegues al bingo de palabra de moda de la app web progresiva, una forma segura es establecer "Las AWP son solo sitios web". La documentación de Microsoft para AWP está de acuerdo, lo decimos en este mismo sitio, y hasta los nominadores a AWP Frances Berriman y Alex Russell escriben eso también. Sí, las AWP son solo sitios web, pero también son mucho más que eso. Si se hace bien, una AWP no parecerá un sitio web, sino una app "real". Ahora bien, ¿qué significa que se sienta como una app real?
Para responder esta pregunta, usaré la app de Podcasts de Apple como ejemplo. Está disponible en macOS para computadoras y en iOS (y iPadOS, respectivamente), en dispositivos móviles. Si bien Podcasts es una aplicación de medios, las ideas principales que ilustré con su ayuda también se aplican a otras categorías de apps.
Puede ejecutarse sin conexión.
Si piensas en las aplicaciones específicas de cada plataforma que tienes en tu teléfono celular o computadora de escritorio, hay algo que se destaca claramente: nunca obtienes nada. En la app de Podcasts, siempre hay algo, incluso si estoy sin conexión. Cuando no hay conexión de red, la app se abre naturalmente. En la sección Gráficos de los elementos más populares, no se muestra ningún contenido, sino que se muestra el mensaje Can't connect right now (No se puede conectar en este momento) junto con el botón Retry. Puede que no sea la experiencia más agradable, pero entiendo algo.
La app de Podcasts sigue el modelo de shell de la app denominado modelo. Todo el contenido estático necesario para mostrar la app principal se almacena en caché de forma local, incluidas las imágenes decorativas, como los íconos de menú de la izquierda y los íconos de la IU del reproductor principal. El contenido dinámico, como los datos de los rankings de los elementos más populares, solo se carga a pedido; en caso de que falle la carga, el contenido alternativo está disponible en caché local. Lee el artículo El modelo de shell de app para obtener información sobre cómo aplicar este modelo de arquitectura a tu app web.
Contenido sin conexión disponible y multimedia reproducible
Mientras no tengo conexión, en el panel lateral izquierdo, puedo navegar a la sección Descargados y disfrutar de los episodios de podcasts descargados que están listos para reproducirse y se muestran con todos los metadatos, como el material gráfico y las descripciones.
El contenido multimedia descargado se puede entregar desde la caché, por ejemplo, con la receta Entregar audio y video almacenados en caché de la biblioteca Workbox. El resto del contenido siempre se puede almacenar en la caché o en IndexedDB. Lee el artículo Almacenamiento para la Web para obtener todos los detalles y saber cuándo usar cada tecnología de almacenamiento. Si tienes datos que deberían almacenarse de forma persistente sin el riesgo de borrarse definitivamente cuando la cantidad de memoria disponible sea baja, puedes usar la API de Persistent Storage.
Descarga proactiva en segundo plano
Cuando vuelvo a estar en línea, puedo buscar contenido con una consulta como http 203 y, cuando decido suscribirme al resultado de la búsqueda, el podcast HTTP 203, se descarga de inmediato el episodio más reciente de la serie, sin hacer preguntas.
Descargar un episodio de podcast es una operación que puede tardar más tiempo. La API de recuperación en segundo plano te permite delegar descargas al navegador, que las realiza en segundo plano. En Android, el navegador, a su vez, puede incluso delegar estas descargas al sistema operativo, por lo que no es necesario que el navegador se esté ejecutando continuamente. Una vez finalizada la descarga, se despierta el service worker de tu app y puedes decidir qué hacer con la respuesta.
Uso compartido e interacción con otras aplicaciones
La app de Podcasts se integra naturalmente con otras aplicaciones. Por ejemplo, cuando hago clic con el botón derecho en un episodio que me gusta, puedo compartirlo con otras apps de mi dispositivo, como la app de Mensajes. También se integra de forma natural con el portapapeles del sistema. Puedo hacer clic con el botón derecho en cualquier episodio y copiar un vínculo a él.
La API de Web Share y la API de Web Share Target permiten que tu app comparta y reciba textos, archivos y vínculos desde y hacia otras aplicaciones del dispositivo. Si bien aún no es posible que una aplicación web agregue elementos de menú al menú integrado con el botón derecho del sistema operativo, existen muchas otras maneras de establecer vínculos hacia y desde otras aplicaciones del dispositivo. Con la API de Async Clipboard, puedes leer y escribir datos de imagen y texto (imágenes PNG) de manera programática en el portapapeles del sistema. En Android, puedes usar la API de Contact Picker para seleccionar entradas del Administrador de contactos del dispositivo. Si ofreces tanto una app específica para la plataforma como una AWP, puedes usar la API de Get Installed Related Apps para comprobar si está instalada la app específica de la plataforma, en cuyo caso no necesitas alentar al usuario a instalar la AWP ni aceptar notificaciones push web.
Actualización de apps en segundo plano
En la configuración de la app de Podcasts, puedo configurar la app para que descargue episodios nuevos automáticamente. Así que ni siquiera tengo que pensarlo, el contenido actualizado siempre estará ahí. Magia.
La API de Periodic Background Sync permite que tu app actualice su contenido de manera regular en segundo plano sin necesidad de que se ejecute. Esto significa que hay contenido nuevo disponible de manera proactiva, de modo que los usuarios pueden comenzar a explorarlo de inmediato cuando lo decidan.
Estado sincronizado en la nube
Al mismo tiempo, mis suscripciones se sincronizan en todos los dispositivos que tengo. En un mundo tranquilo, no tengo que preocuparme manualmente por mantener sincronizadas mis suscripciones a podcasts. Del mismo modo, no tengo que tener miedo de que la memoria de mi dispositivo móvil se consuma por episodios que ya escuché en mi computadora. El estado de reproducción se mantiene sincronizado, y los episodios escuchados se borran automáticamente.
La sincronización de los datos de estado de la app es una tarea que puedes delegar a la API de sincronización en segundo plano. La operación de sincronización no tiene que ocurrir de inmediato, solo al final, y tal vez incluso cuando el usuario ya haya cerrado la app nuevamente.
Controles de teclas multimedia de hardware
Cuando estoy ocupado con otra aplicación, por ejemplo, leyendo una página de noticias en el navegador Chrome, aún puedo controlar la app de Podcasts con las teclas multimedia de mi laptop. No es necesario pasar a la aplicación solo para avanzar o retroceder.
Las claves multimedia son compatibles con la API de Media Session. De este modo, los usuarios pueden usar las teclas multimedia de hardware en sus teclados físicos o auriculares, o incluso controlar la app web con las teclas multimedia de software de sus relojes inteligentes. Una idea adicional para suavizar las operaciones de búsqueda es enviar un patrón de vibración cuando el usuario busca una parte significativa del contenido, por ejemplo, pasar los créditos de apertura o el límite de un capítulo.
Tareas múltiples y acceso directo a apps
Por supuesto, siempre puedo realizar varias tareas a la vez con la app de Podcasts desde cualquier lugar. La app tiene un ícono claramente distinguible que también puedo colocar en mi escritorio o conector de aplicaciones para que los podcasts se puedan iniciar de inmediato cuando lo necesite.
Las apps web progresivas para computadoras de escritorio y dispositivos móviles se pueden instalar en la pantalla principal, en el menú de inicio o en el acoplamiento de aplicaciones. La instalación puede realizarse a partir de una instrucción proactiva o completamente controlada por el desarrollador de la app. El artículo ¿Qué se necesita para instalar la aplicación? abarca todo lo que necesitas saber. Cuando se realizan varias tareas a la vez, las AWP aparecen independientemente del navegador.
Acciones rápidas en el menú contextual
Las acciones más comunes de la app, Search for new content y Check for New Episodes, están disponibles en el menú contextual de la app en el Dock. En el menú Opciones, también puedo abrir la app cuando accedas.
Especificando los accesos directos a íconos de apps en el manifiesto de la app web de la AWP, puedes registrar rutas rápidas a tareas comunes a las que los usuarios pueden acceder directamente desde el ícono de la app. En sistemas operativos como macOS, los usuarios también pueden hacer clic con el botón derecho en el ícono de la app y configurar que se inicie al momento de acceder. Estamos trabajando en una propuesta para la ejecución al acceder.
Actuar como app predeterminada
Otras aplicaciones para iOS, así como sitios web o correos electrónicos, pueden integrarse con la app de Podcasts con el esquema de URLs podcasts://. Si sigo un vínculo como podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 mientras estoy en el navegador, se me redirecciona directamente a la app de Podcasts y puedo decidir suscribirme o escuchar el podcast.
Aún no es posible controlar esquemas de URL completamente personalizados, pero aún se está trabajando en una propuesta de manejo de protocolos de URL para AWP. Actualmente, registerProtocolHandler() con un prefijo de esquema web+ es la mejor alternativa.
Integración del sistema de archivos local
Puede que no lo pienses inmediatamente, pero la aplicación Podcasts se integra naturalmente con el sistema de archivos local. Cuando descargo un episodio de podcast, en mi laptop, se almacenó en ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache. A diferencia de, digamos ~/Documents, este directorio no está pensado para que los usuarios normales accedan directamente a él, pero está ahí.
En la sección de contenido sin conexión, se hace referencia a otros mecanismos de almacenamiento además de los archivos.
La API de File System Access permite a los desarrolladores obtener acceso al sistema de archivos local del dispositivo. Puedes usarla directamente o a través de la biblioteca de compatibilidad browser-fs-access, que proporciona de forma transparente un resguardo para los navegadores que no son compatibles con la API. Por motivos de seguridad, no se puede acceder a los directorios del sistema desde la Web.
Aspecto de la plataforma
Hay algo más sutil que es evidente para una aplicación de iOS como Podcasts: ninguna de las etiquetas de texto es seleccionable y todo el texto se combina con la fuente del sistema de la máquina. También se respeta mi elección del tema de color del sistema (modo oscuro).
Cuando aprovechas la propiedad de CSS user-select con el valor none, puedes proteger los elementos de la IU para que no se seleccionen accidentalmente.
Sin embargo, asegúrate de no abusar de esta propiedad para anular la selección del contenido de la app.
Solo debe usarse para elementos de la IU, como textos de botones, etc. El valor system-ui de la propiedad de CSS font-family te permite especificar la fuente predeterminada de la IU del sistema que se usará para tu app. Por último, tu app puede obedecer la preferencia de esquema de colores del usuario respetando su elección de prefers-color-scheme, con un botón de activación del modo oscuro opcional para anularla.
Otro aspecto por decidir podría ser qué debe hacer el navegador cuando se alcance el límite de un área de desplazamiento, por ejemplo, para implementar la función de extracción para actualizar personalizada.
Esto es posible con la propiedad de CSS overscroll-behavior.
Barra de título personalizada
Cuando observas la ventana de la app de Podcasts, notas que no tiene una barra de título ni una barra de herramientas clásicas integradas, como, por ejemplo, la ventana del navegador Safari, sino una experiencia personalizada que parece una barra lateral anclada a la ventana del reproductor principal.
Si bien no es posible, por el momento, estamos trabajando en la personalización de la barra de título.
Sin embargo, puedes (y debes) especificar las propiedades display y theme-color del manifiesto de la app web para determinar el aspecto de la ventana de tu aplicación y decidir qué controles predeterminados del navegador (posiblemente no se deben mostrar).
Animaciones breves
Las animaciones integradas en la app son rápidas y fluidas en Podcasts. Por ejemplo, cuando abro el panel lateral Notas de los episodios a la derecha, se desliza elegantemente hacia adentro. Cuando quito un episodio de mis descargas, los episodios restantes flotan y consumen el espacio en pantalla que liberó el episodio borrado.
Las animaciones de rendimiento en la Web son posibles si tienes en cuenta una serie de prácticas recomendadas que se describen en el artículo Animaciones y rendimiento. Las animaciones de desplazamiento, como se ven comúnmente en el contenido con paginación o los carruseles multimedia, se pueden mejorar significativamente con la función CSS Scroll Snap. Para obtener el control total, puedes usar la API de Web Animations.
Contenido que aparece fuera de la app
La app Podcasts en iOS puede mostrar contenido en otras ubicaciones distintas de la aplicación real, por ejemplo, en la vista Widgets del sistema o en forma de una sugerencia de Siri. Tener llamados a la acción proactivos y basados en el uso que solo requieren un toque para interactuar con ellos puede aumentar en gran medida la tasa de reactivación de la participación de una app como Podcasts.
La API de Content Index permite que tu aplicación le indique al navegador qué contenido de la AWP está disponible sin conexión. De esta manera, el navegador puede mostrar este contenido fuera de la app principal. Si marcas el contenido interesante de tu app como apto para la reproducción de audio speakable y usas lenguaje de marcado estructurado en general, puedes ayudar a los motores de búsqueda y a los asistentes virtuales, como Asistente de Google, a presentar tus ofertas con una luz ideal.
Widget de control multimedia de la pantalla de bloqueo
Cuando se reproduce un episodio de podcast, la app de Podcasts muestra un hermoso widget de control en la pantalla de bloqueo que incluye metadatos como el material gráfico y el título del episodio y su nombre.
La API de Media Session te permite especificar metadatos, como material gráfico, títulos de pistas, etc., que luego se muestran en la pantalla de bloqueo, relojes inteligentes y otros widgets multimedia en el navegador.
Notificaciones push
Las notificaciones push se convirtieron en una molestia en la Web (aunque ahora los mensajes de notificación son mucho más discretos). Pero si se usan correctamente, pueden agregar mucho valor. Por ejemplo, la app Podcasts para iOS puede notificarme de manera opcional los episodios nuevos de los podcasts a los que me suscribí o recomendarme nuevos, además de alertarme sobre las nuevas funciones de la app.
La API de Push permite que tu app reciba notificaciones push para que puedas notificar a los usuarios sobre eventos destacados en torno a tu AWP. Para las notificaciones que deberían activarse en un momento conocido en el futuro y que no requieren una conexión de red, puedes usar la API de notificaciones.
Insignias del ícono de la app
Cuando hay nuevos episodios disponibles para uno de los podcasts al que me suscribí, aparece una insignia de ícono de la app en el ícono de la pantalla principal de Podcasts, que me motiva a volver a interactuar con la app de una manera que no es invasiva.
Puedes configurar insignias de íconos de la app con la API de Badging. Esto resulta particularmente útil cuando tu AWP tiene alguna noción de elementos "no leídos" o cuando necesitas un medio para dirigir la atención del usuario a la app de manera discreta.
La reproducción de contenido multimedia tiene prioridad sobre la configuración del ahorro de energía
Cuando se reproduce contenido multimedia de podcasts, es posible que se apague la pantalla, pero el sistema no entrará en modo en espera. De manera opcional, las apps también pueden mantener activa la pantalla, por ejemplo, para mostrar letras o subtítulos.
La API de Screen Wake Lock te permite impedir que se apague la pantalla. La reproducción de contenido multimedia en la Web impide automáticamente que el sistema entre en modo en espera.
Descubrimiento de apps en una tienda de aplicaciones
Si bien la app Podcasts forma parte de la experiencia de macOS para computadoras de escritorio, en iOS debe instalarse desde App Store.
Si buscas rápidamente podcast, podcasts o apple podcasts, la app se mostrará en App Store de inmediato.
Si bien Apple no permite AWP en App Store, en Android, puedes enviar tu AWP unida en una actividad web de confianza.
La secuencia de comandos bubblewrap hace que esta operación sea sencilla.
Esta secuencia de comandos también es lo que impulsa internamente la función de exportación de apps para Android de PWABuilder, que puedes usar sin tocar la línea de comandos.
Resumen de funciones
En la siguiente tabla, se muestra una descripción general compacta de todas las funciones y una lista de recursos útiles para aprovecharlas en la Web.
Conclusión
Las AWP han avanzado mucho desde su introducción en 2015. En el contexto del Proyecto Fugu 🐡, el equipo de Chromium que trabaja en varias empresas está trabajando para cerrar las últimas brechas. Si sigues solo algunos de los consejos de este artículo, podrás acercarte cada paso más a esa sensación de app y hacer que los usuarios se olviden de que están tratando con "solo un sitio web", ya que, honestamente, a la mayoría de ellos no les importa cómo se compila tu app (y por qué debería hacerlo), siempre que parezca una app real.
Agradecimientos
Este artículo fue revisado por Kayce Basques, Joe Medley, Joshua Bell, Dion Almaer, Ade Oshineye, Pete LePage, Sam Thorogood, Reilly Jeffys Grant y