AWP potentes

Si bien algunas capacidades de las PWA son conocidas, como la API de Notifications que permite que una app web reciba y publique notificaciones de la plataforma, hay varias funciones nuevas y próximas que llegarán a la Web para potenciar tus apps. El proyecto Web Capabilities de Chromium, también conocido como Proyecto Fugu 🐡, es un esfuerzo por habilitar estándares web nuevos y potentes, a la vez que se preserva lo que hace que la Web sea única: su seguridad centrada en el usuario, su baja fricción y su compatibilidad multiplataforma.

Cómo reducir la brecha de apps

La mayoría de estas funciones se diseñaron para cerrar la brecha entre las apps tradicionales para computadoras o dispositivos móviles y las apps web. Las primeras funciones importantes que se lanzaron permiten que las apps web accedan a los selectores de contactos y las funciones de uso compartido de la plataforma, y que las AWP instaladas se registren como un destino de uso compartido de la plataforma y muestren insignias de íconos, entre otras.

Cada capacidad pasa por un proceso de estandarización exhaustivo para solicitar comentarios de la comunidad que ayuden a dar forma a la API y garantizar que el diseño final sea seguro, privado y confiable. Las nuevas capacidades se registran en un registro abierto y se pueden dividir en una de las cinco categorías siguientes:

ENVIADO

Disponible para su uso en la versión estable más reciente de Chrome. Se puede usar de forma confiable, siempre y cuando se detecte correctamente su uso.

EN LA PRUEBA DE ORIGEN

Está disponible como una prueba de origen (OT) de Chrome, lo que permite que el equipo de Chrome valide las funciones y las APIs experimentales en el uso del mundo real, y que usted proporcione comentarios sobre la usabilidad y la eficacia de las APIs. Las OT son opcionales y te permiten realizar pruebas beta de esta funcionalidad con tus usuarios sin que tengan que activar ninguna marca especial en su navegador. Las APIs pueden cambiar después de un OT, y se garantiza que los OT no estarán disponibles durante un período antes del lanzamiento, por lo que no deben tratarse como un mecanismo de lanzamiento anticipado para las APIs nuevas.

EN LA PRUEBA PARA DESARROLLADORES

Disponible detrás de una marca en Chrome. Estas APIs son experimentales y aún se encuentran en desarrollo activo. No están listas para su uso en producción, y es probable que contengan errores y que las APIs cambien. Si bien los desarrolladores pueden usar este tiempo para probar funciones experimentales por su cuenta, no deben indicar a los usuarios que habiliten marcas para usar sus funciones.

SALIDA

Se inició el desarrollo, pero actualmente no existe una API utilizable.

EN CONSIDERACIÓN

Son las APIs en las que los usuarios expresaron interés, pero cuya implementación aún no comenzó. Si aún no se inició una API, agrégala a tus favoritos o agrega tus casos de uso a su problema para ayudar al equipo de Chromium a priorizarla.

Mejora tu PWA

Cuando desarrolles tu PWA, considera implementar las siguientes APIs y prácticas recomendadas para mejorar en gran medida la sensación de tu app web. Desglosadas por caso de uso general, tu app puede beneficiarse de una o más APIs para mejorar la experiencia del usuario general. Las APIs marcadas con un 🔮 están en prueba de origen, las marcadas con una 🚩 están en prueba para desarrolladores, las marcadas con un 📱 son estables actualmente en dispositivos móviles y sus implementaciones para computadoras ya comenzaron, y cualquier otra API mencionada es estable (aunque es posible que no esté disponible en todas las plataformas). Solo se incluyen las APIs que están disponibles en las versiones estable, beta (marcada con β) o Canary (marcada con α) actuales de Chrome. Se espera que esta lista se actualice periódicamente para reflejar las APIs que se lanzan.

Instalación de apps

Si quieres que tu app web esté disponible junto con otras apps instaladas, como en la barra de tareas, el selector, el escritorio y el selector de apps, considera implementar las siguientes APIs para que tu AWP sea instalable. Opcionalmente, sigue este codelab.

  • Manifiesto de la app web: Proporciona información sobre tu app web al navegador y al sistema operativo, por ejemplo, el nombre, el logotipo, la URL en la que se debe iniciar la app y cómo mostrar tu app web.
  • API de Service Workers y Cache Storage: Permite que tu app web cree un servidor proxy y controle cómo se maneja la caché del navegador. Un service worker que reacciona al evento fetch de un navegador y puede responder a una solicitud de recuperación de la URL de inicio especificada en el manifiesto de la app web con contenido cuando no hay conexión es un requisito para poder instalar la app.
  • Ejecutar al acceder 🚩β: Te permite configurar tu AWP para que se inicie automáticamente cuando el usuario acceda.
  • Atajos del ícono de la app: Proporciona atajos a URLs específicas con tu app web (por ejemplo, iniciar un chat, subir una foto, etcétera) desde el menú contextual del ícono de la app instalada (es decir, mantener presionado en dispositivos móviles, hacer clic con el botón derecho en computadoras de escritorio) en las plataformas compatibles.
  • getInstalledRelatedApps: Permite que tu app web verifique si ya se instaló tu AWP, app para Android o app para Windows (UWP).

Adaptable y accesible

Si quieres que los usuarios con diferentes dispositivos y necesidades físicas o mentales puedan usar tu app web, considera implementar lo siguiente:

  • Diseño responsivo: Asegúrate de que tu app web proporcione una experiencia utilizable, o al menos no defectuosa, para tamaños de pantalla pequeños y grandes, de modo que los usuarios de diferentes dispositivos y ubicaciones de ventanas puedan usar tu app.
  • Lineamientos de la WCAG 2.0: Asegúrate de que tu app web sea apta para personas con un amplio espectro de capacidades físicas y mentales, no solo para personas neurotípicas y con buena salud física. Consulta también Do’s and don’ts on designing for accessibility del Gobierno del Reino Unido.

Monetización y distribución

  • Pagos en la Web: Es una interfaz flexible y estándar para pagos en línea que está diseñada para funcionar en cualquier navegador o dispositivo, y con cualquier proveedor de servicios de pago o pago.
  • API de Digital Goods 🔮: Es una interfaz flexible y estándar para consultar y administrar compras directas desde la aplicación desde aplicaciones web, que incluye compatibilidad con tipos de compras comunes, como compras únicas, compras repetibles (como gemas o monedas en el juego) y suscripciones. Funciona en conjunto con los pagos en la Web.
  • Actividad web de confianza: Crea una app para Android para tu AWP de modo que se pueda incluir en las tiendas compatibles para su descarga, por ejemplo, Google Play.

Acceso al portapapeles

  • Async Clipboard: Lee y escribe texto e imágenes en el portapapeles del usuario, y escucha los eventos de copiar y pegar del usuario.

Notificaciones

Si tu app web necesita notificar a los usuarios (por ejemplo, una app de chat o una codificación en segundo plano en la que se está trabajando), te recomendamos que implementes las siguientes APIs:

  • Notificaciones push web: Una vez que un usuario habilitó las notificaciones, permite que tu app web le envíe notificaciones push.
  • API de Badging: Permite que tu app web instalada establezca una insignia para toda la aplicación en el ícono de la app, de forma opcional con un número.
  • Activadores de notificaciones 🔮: Envía notificaciones a los usuarios cuando se cumpla una condición de activación, por ejemplo, basadas en la ubicación o en el tiempo (piensa en las notificaciones de eventos de calendario).

Uso compartido de la intención y control de protocolos

  • Registro de protocolos de URL 🚩α: Permite que las aplicaciones web se registren como controladores de protocolos o esquemas de URL personalizados con su manifiesto de instalación.
  • Web Share: Usa la IU de uso compartido del sistema integrada en dispositivos compatibles para compartir URLs, texto y archivos con otras apps instaladas en el dispositivo. No es necesario que se instale tu app.
  • Web Share Target: Haz que tu AWP instalada esté disponible en la IU de uso compartido integrada del sistema en dispositivos compatibles para permitir que los usuarios compartan texto y archivos a tu app desde otras apps.

Cómo abrir y guardar archivos

  • API de File Handling 🚩: Haz que tu app web instalada registre en el sistema operativo su capacidad para controlar (leer, transmitir o editar) archivos con extensiones de archivo o tipos MIME determinados, lo que permite, por ejemplo, que sean una opción en la lista “Abrir con…” de un menú contextual.
  • API de File System Access: Acceso sólido al sistema de archivos del usuario por sesión, lo que permite las siguientes interacciones (según las necesite tu app)
    • Leer archivos del sistema de archivos local: Muestra un selector de archivos y permite que el usuario elija uno o, de manera opcional, varios archivos para abrir, lo que incluye limitar los tipos de archivos permitidos por tipo de MIME y extensión.
    • Save changes to open file: Guarda los cambios en un archivo abierto con FSA directamente, sin solicitar al usuario que elija dónde guardar el archivo ni que descargue una copia.
    • Crear un archivo nuevo en el sistema de archivos local: Permite que un usuario cree un archivo nuevo, de manera opcional con la extensión de archivo predeterminada, en su sistema de archivos local, al que tu app tendrá acceso para guardar.
    • Archivos abiertos recientemente: Los controladores de archivos creados con la FSA se pueden almacenar en IndexedDB, lo que te permite mostrar una lista de los archivos usados recientemente entre las sesiones del usuario (aunque los permisos de edición aún no persisten entre las sesiones).
    • Leer, escribir y manipular un directorio: Permite que un usuario elija un directorio en su sistema de archivos local que tu app pueda leer, crear, leer y borrar archivos y subdirectorios, y determinar la ruta de acceso relativa del archivo dentro del directorio.
  • Compression Streams: Comprime o descomprime con los algoritmos de compresión gzip y deflate.

Administración de ventanas

Integración más profunda en el SO

  • API de Local Fonts 🔮: Permite que tu app web muestre las fuentes instaladas de forma local y solicite acceso de bajo nivel (orientado a bytes) al contenedor SFNT que incluye los datos completos de la fuente, lo que permite que tu app renderice de forma personalizada las fuentes instaladas de forma local.
  • Wake Lock: Permite que tu app web evite que la pantalla entre en suspensión, lo que le permite realizar tareas de larga duración sin temor a interrupciones (es decir, transcodificación de archivos o mantener una receta mientras cocinas).
  • Idle Detection 🔮: Permite que tu app web detecte cuando el usuario no está usando su dispositivo de forma activa.

Compatibilidad sin conexión expandida

Si quieres que tu app web funcione aún mejor sin conexión, te recomendamos que implementes las siguientes APIs:

  • Sincronización en segundo plano: Cuando no hay conexión, se ponen en cola las solicitudes que necesitan una conexión y, luego, se sincronizan los datos de tu app web en segundo plano cuando la red está disponible, en lugar de no procesar las solicitudes sin conexión. Por ejemplo, permitir que se envíen mensajes o que se sincronicen los cambios incrementales en un documento cuando vuelvas a estar en línea.
  • Sincronización periódica en segundo plano: Permite que tu app web instalada y de uso frecuente active periódicamente su service worker, según la cantidad mínima de tiempo transcurrido, y se ejecute, por ejemplo, para actualizar una caché, lo que permite que el contenido esté actualizado cuando un usuario abre la app.
  • Content Indexing API: Permite que tu app web le indique al navegador qué contenido está disponible sin conexión para que el navegador lo muestre a los usuarios.
  • Background Fetch: Permite recuperaciones en segundo plano de larga duración, como la descarga de películas o la carga de videos e imágenes, sin correr el riesgo de que se cierre el service worker.

Transmisión, codificación y decodificación de contenido multimedia

Si tu app web reproduce archivos multimedia, como archivos de audio o video, te recomendamos que implementes las siguientes APIs:

  • Transmisión adaptable: Permite que las transmisiones de video cambien entre tasas de bits según el rendimiento de la red.
  • Pantalla en pantalla: Permite que el usuario extraiga el video de tu app web en una ventana siempre visible, que luego se puede mover y cambiar de tamaño de forma independiente.
  • API de Media Session: Permite que un usuario controle la reproducción de contenido multimedia de tu app web con hardware y software a nivel del SO (como los botones de reproducción, pausa y detención en teclados o pantallas de bloqueo), así como controlar las notificaciones de contenido multimedia a nivel del SO (como el título, el artista, el álbum y la portada).
  • API de Chromecast: Permite que un usuario transmita contenido multimedia a un receptor de Chromecast disponible, por ejemplo, para reproducir un video de tu app web en su TV.
  • Web Codecs 🔮: Acceso a codificadores y decodificadores de medios de hardware y software integrados, útiles para casos de uso en tiempo real, como la transmisión en vivo de baja latencia y la codificación, decodificación y transcodificación de archivos.

Compatibilidad expandida con entradas

Compatibilidad avanzada con periféricos

  • Web USB: Permite que tu app web acceda a dispositivos USB no estándar (es decir, teclados y mouse) desde tu app.
  • API de Serial 🔮: Agrega una API para comunicarse con dispositivos de hardware a través de un puerto serie físico o virtual.

Tu lista de tareas de PWA

¿Todo listo para comenzar a mejorar tu PWA con estas nuevas y potentes APIs? Elige uno de los casos de uso que se muestran a continuación para ver un conjunto recomendado de APIs que puedes usar, o bien crea tu propia lista de tareas pendientes y trabaja para completarla.