Funciones

Las Progressive Web Apps pueden hacer más que solo procesar contenido en la pantalla o conectarse a servicios web. Las AWP pueden gestionar archivos del sistema de archivos, interactuar con el portapapeles del sistema, acceder al hardware conectado al dispositivo y mucho más. Todas las APIs web están disponibles para tu AWP y también hay algunas APIs adicionales disponibles cuando se instala tu app.

Puedes consultar Lo que la Web puede hacer hoy en día para saber qué es posible en cada plataforma. Para funciones o APIs individuales, puedes usar Can I Use o las tablas de compatibilidad del navegador en MDN.

Siempre verifica la compatibilidad de las funciones

La primera letra de la AWP significa progresiva y proviene de la idea de mejora progresiva y detección de funciones. No deberías esperar que tu app funcione de la misma manera en todos los dispositivos. La diversidad de contextos y capacidades en miles de millones de dispositivos en diferentes países hace que las AWP sean una plataforma excelente, gracias a su progresividad.

Esto significa que debes desarrollar tu app en capas que pueden no estar disponibles en todos los dispositivos y verificar la disponibilidad antes de usarla.

Debes verificar con JavaScript si existe una API antes de usarla o preguntarle a una API si hay un servicio disponible en ese dispositivo en particular.

Web potente

Hoy en día, la Web es superpoderosa. Por ejemplo:

• Puedes compilar una app de videochat hiperlocal con WebRTC, ubicación geográfica y mensajes push.
• Puedes hacer que una app sea instalable.
• Puedes agregar efectos de video con WebAssembly.
• Incluso puedes llevarlo a la realidad virtual con WebGL y WebXR.

Si bien hay muchas funciones en la Web, todavía hay deficiencias, y ahí es donde entra en juego el proyecto de capacidades web. En el proyecto se describe un grupo de APIs para aumentar las capacidades de la Web. Analizamos este proyecto y cómo puedes participar en el Capítulo experimental.

Mejora tu AWP

Dividamos las APIs de funciones de la AWP en cuatro grupos:

• Verde: APIs disponibles en todos los navegadores y en todas las plataformas, siempre que sea técnicamente posible La mayoría se envían desde hace muchos años, se consideran maduradas y puedes usarlas con confianza. Una API de ejemplo de este grupo es la API de ubicación geográfica.
• Verde claro: Las APIs solo están disponibles en algunos navegadores. Teniendo en cuenta la falta de compatibilidad en algunas plataformas, estas maduraron dentro del subgrupo compatible de navegadores para que puedas usar la función con confianza en ellos. Una API de ejemplo de este grupo es WebUSB.
• Amarillo: APIs experimentales. Estas APIs aún no están desarrolladas; solo están disponibles en algunos navegadores y dentro de las pruebas. Hablamos un poco sobre estas funciones en el capítulo Experimental.
• Rojo: El grupo para las APIs que no puedes usar en una AWP, y los planes para agregarlas aún son a largo plazo. Una API de ejemplo de este grupo es el geovallado.

Nota: Algunas funciones requieren el permiso del usuario. En la mayoría de los casos, el diálogo del permiso aparece en el primer uso. Actualmente, puedes solicitar un solo permiso a la vez, pero, más adelante, tal vez sea posible solicitar muchos permisos en un diálogo en algunas plataformas mediante la API de Permissions.

Capacidades ecológicas

A continuación, se incluye una lista de las funciones más importantes que puedes usar en tu AWP.

Conceptos básicos

• Almacena archivos en caché localmente con la API de Cache, como se ve en el capítulo Almacena en caché.
• Ejecuta tareas en subprocesos con trabajadores web, como vimos en el capítulo Administración de la complejidad.
• Administra solicitudes de red con diferentes estrategias en un service worker, como se ve en el capítulo de Service Workers.
• 2D Canvas para renderizar gráficos 2D en la pantalla con la API de Canvas.
• Lienzo de alto rendimiento 2D y 3D, o WebGL, para renderizar gráficos 3D.
• WebAssembly o WASM para ejecutar código compilado de bajo nivel con fines de rendimiento
• Comunicación en tiempo real, mediante la API de WebRTC.
• Web Performance para medir y ayudar a proporcionar una mejor experiencia. Consulta la guía de la API de rendimiento para obtener más información.
• Almacena datos de forma local con IndexedDB y la administración de almacenamiento para consultar la cuota y solicitar almacenamiento persistente, como se muestra en el capítulo Datos sin conexión.
• Audio de bajo nivel gracias a la API de Web Audio.
• Detección en primer plano mediante la API de visibilidad de páginas.
• Comunicación de red mediante la API de Fetch y la API de WebSocket

Hardware y sensores

• La ubicación geográfica obtiene la ubicación del usuario a través de diferentes proveedores, como satélite o Wi-Fi mediante la API de Geolocation.
• La cámara y el micrófono reciben transmisiones de contenido multimedia de cámaras y micrófonos a través de la interfaz de Dispositivos multimedia.
• Los sensores recopilan información en tiempo real del acelerómetro, el giroscopio, el magnetómetro y otros mediante la API de Sensors o interfaces más antiguas, como DeviceMotionEvent y DeviceOrientationEvent. En Safari, debes usar una solicitud de diálogo de permiso no estándar para usarlos.
• Toque y puntero accede a información sobre todos los toques y los clics basados en el puntero que haces con el dedo, un mouse, un panel táctil o un lápiz gracias a los eventos de puntero y los eventos táctiles.

Nota: Safari también admite eventos de gestos, una API no estándar para detectar gestos de rotación y pellizcar, que debes usar con cuidado.

• Controladores de juegos para leer información que proviene de controles de juegos estándar y joysticks conectados al dispositivo mediante la API de Gamepad.
• Autenticación biométrica (como el reconocimiento de rostro o huella digital) mediante Web Authentication o WebAuthn.

Integración de sistemas operativos

• La síntesis de voz y el reconocimiento de voz usan las voces instaladas en la plataforma para hablarle al usuario y reconocer lo que este dice, gracias a la API de Web Speech.
• Comparte contenido de tu AWP con otras apps y lugares en el dispositivo, gracias a la API de Web Share, como veremos en el capítulo sobre integración del SO.
• Accede al portapapeles para guardar y recuperar contenido del portapapeles en diferentes formatos, gracias a la API de portapapeles, como te mostré en el capítulo sobre la integración del SO.
• Administra las credenciales y contraseñas de los usuarios con la API de Credential Management.
• Habilita la reproducción de videos pantalla en pantalla en el SO mediante la API de pantalla en pantalla.
• Renderiza contenido en pantalla completa gracias a la API de pantalla completa, como se mostró en el capítulo de Windows.

Nota: Puedes integrar tu AWP con muchas apps específicas de la plataforma usando esquemas de URI y URLs universales, como se mostró en el capítulo Integración del SO.

Capacidades en verde claro

Esta es una lista de las funciones más importantes que puedes usar en tu AWP, con la advertencia de que podrían no estar disponibles en todos los navegadores.

Conceptos básicos

• WebGL 2.0, la nueva versión de la especificación WebGL, que coincide con OpenGL 3.0.
• Códecs: acceso de bajo nivel a los fotogramas individuales de una transmisión de video por Internet y fragmentos de audio; útil para aplicaciones web que requieren un control total sobre la forma en que se procesa el contenido multimedia a través de la API de Web Codecs

Hardware y sensores

• Controles avanzados de cámara para acceder a los controles de desplazamiento lateral, inclinación y zoom, además de las APIs de contenido multimedia.
• Bluetooth LE para comunicarse con dispositivos Bluetooth de bajo consumo cerca del usuario a través de la API de Web Bluetooth Para obtener más información, consulta cómo comunicarse con dispositivos Bluetooth a través de JavaScript.
• Comunicación de campo cercano para intercambiar datos por NFC a través de mensajes ligeros de intercambio de datos NFC (NDEF), como una etiqueta o tarjeta NFC con la API de WebNFC También puedes consultar el artículo Interactúa con dispositivos NFC en Chrome para Android para obtener más detalles.

• Periférico en serie para acceder de bajo nivel a dispositivos conectados al dispositivo a través de un puerto en serie, USB o en serie por Bluetooth con Web Serial WPI. En el siguiente vínculo, puedes obtener información para leer y escribir en un puerto en serie.

• Acceso a dispositivo USB para comunicarse con dispositivos conectados a través de la API de WebUSB USB. Para obtener más información, consulta cómo acceder a los dispositivos USB en la Web.

• Los dispositivos con interfaz humana permiten que tu AWP interactúe con cualquier tipo de dispositivo preparado para la interacción humana poco común mediante la API de WebHID. Consulta la guía sobre cómo conectarse a dispositivos HID poco comunes.

Nota: Cómo acceder a los dispositivos de hardware en la Web ofrece una guía completa para comprender cómo las diferentes APIs de hardware interactúan entre sí.

• Ambient Light lee el nivel o la iluminación actual de la luz ambiente alrededor del dispositivo, además de la API de Sensors.
• La vibración le proporciona al usuario respuestas táctiles cuando sucede algo, si el dispositivo lo admite, mediante la API de Vibration.
• Los medios de grabación capturan los datos que genera un objeto MediaStream o HTMLMediaElement (como una etiqueta <video>) para analizarlos, procesarlos o guardarlos en el disco, gracias a la API de MediaRecorder.
• Aplicar un bloqueo de activación en la pantalla evita que el dispositivo se atenúe o bloquee la pantalla cuando la AWP debe seguir ejecutándose con la API de Screen Wake Lock.
• La realidad virtual te permite usar auriculares y otros dispositivos en tu AWP, gracias a la API de WebXR Device.
• Puedes lograr la realidad aumentada en tu AWP de muchas maneras, como con la API de WebXR Device o la app de Vista rápida de Safari para contenido de RA.
• Detecta usuarios inactivos con la API de Idle Detection.
• El bloqueo de orientación bloquea la orientación en modo horizontal o vertical mientras la AWP está en pantalla, gracias a la API de orientación de pantalla o a la propiedad orientation del manifiesto de apps web para las apps instaladas.
• Presenta contenido en proyectores y pantallas secundarias, gracias a la API de Presentation.
• Bloquea un puntero para recibir información de movimientos delta de punteros (mouse, panel táctil y punteros) en lugar de valores de posición (útil para algunos juegos) gracias a la API de Pointer Lock.

Integración de sistemas operativos

• Gracias a la API de Acceso al sistema de archivos, lee y escribe archivos en el dispositivo, como se vio en el capítulo Integración del SO.
• Obtén contenido de otras apps gracias al objetivo de uso compartido web, como se mostró en el capítulo Integración del SO.
• Obtén datos de contacto con la API de Contact Picker, como se muestra en el capítulo Integración del SO.
• Sincroniza en segundo plano mientras no se usa la AWP, gracias a la API de sincronización en segundo plano.
• Programación de tareas cuando la AWP no está en uso, gracias a la API de Web Periodic Background Synchronization
• Enviar notificaciones con Web Push y las APIs de notificaciones web
• Transfiere archivos en segundo plano mientras el usuario no usa tu AWP, gracias a la API de Background Fetch.
• Integra el contenido multimedia que reproduces con el sistema operativo mediante la API de Media Session.
• Administra los pagos en tu AWP con la API de Payment Request. Apple también ofrece una biblioteca JS de Apple Pay además de la API de Payment Request.
• Consulta el estado de la red, como el tipo de conexión (4G, Wi-Fi) y una marca para guardar datos con la API de Network Information.
• Capturar la pantalla del usuario para una presentación o uso compartido con la API de Screen Capture
• Detecta formas con detectores acelerados por hardware integrados en el dispositivo, incluidos códigos de barras (los rostros humanos y el OCR de texto aún están en desarrollo) mediante la API de Shape Detection.
• Consulta la memoria de un dispositivo usando la interfaz de memoria del dispositivo.
• Las contraseñas de un solo uso por SMS te permiten recibir automáticamente un código a través de SMS que se envía desde tu servidor a través de la API de WebOTP. Safari implementa un subconjunto de solución basado en el elemento <input>. Obtén más información en el blog de WebKit.
• Administra el teclado virtual que aparece en las pantallas de los dispositivos móviles mediante la API de Virtual Keyboard.

Nota: Si publicas una AWP en algunos catálogos y tiendas de aplicaciones, es posible que tengas acceso a APIs adicionales. Por ejemplo, si publicas una AWP en Google Play con una Actividad web de confianza, puedes usar la API de Digital Goods para cobrar a los usuarios por suscripciones y contenido premium.

Si tienes un caso de uso legítimo que no se puede llevar a cabo con el conjunto actual de APIs, puedes enviar una solicitud para analizar el caso de uso de una posible API web en el futuro, como veremos en el Capítulo experimental.

Recursos

• Presentación de la API de Project Fugu
• Proyecto Fugu
• MDN: APIs web
• Qué puede hacer la Web actualmente
• Qué puede hacer la AWP hoy
• ¿Puedo usar?
• Ubicación aproximada de iOS o iPadOS
• Face ID y Touch ID de Meet para la Web