Tendencias 2021 en el ecosistema PWA

Llega un nuevo año y, con éste, un montón de tendencias que posiblemente se vuelvan realidad, a lo largo de este 2021, en el ecosistema de las aplicaciones web progresivas.

Veamos a continuación un pequeño repaso de “qué se está cocinando” en este universo, y que posiblemente nos lo sirvan como “plato principal” en algún momento de este año.

Web NFC

Si bien esta tecnología lleva varios años disponible en el universo PWA, tal vez 2021 sea el año en el cual NFC se consolide de manera definitiva como un estándar importante en el mundo del desarrollo web. La pandemia y demás cuestiones que impulsaron cambios en nuestros hábitos, pueden hacer que esta tecnología se implemente de manera efectiva, de una vez por todas.

Enfocada en el universo de los pagos electrónicos, aluvión de billeteras virtuales y bancos digitales, sumar un pago electrónico, seguro y que evite todo tipo de contacto entre dispositivos físicos, pueden hacer que NFC sea considerado como algo más que importante para este mundo digitalizado.

Y no solamente en el terreno económico: también en el universo corporativo, NFC puede prestar seguridad en el segmento del control de acceso de personal, acceso a sectores que requieren de un nivel de seguridad, la lectura de información adicional de un producto, entre un sinfín de otros mecanismos de automatización que esta tecnología nos pone en nuestras manos.

  const ndef = new NDEFReader();
  await ndef.scan();
  generateLog("Escaneo iniciado.");
  ndef.addEventListener("readingerror", () => {
    generateLog("Ups, no hemos podido leer la información del TAG. Inténtelo nuevamente.");
  });

Shape Detection API

Y sí, en algún momento, la cámara de los dispositivos de escritorio y móvil iba a comenzar a cobrar un gran protagonismo. Si bien, ya contábamos con librerías JS que nos permitían darles una utilidad más grande a las cámaras, la integración que Shape Detection API propone, para a ser el universo ideal para poder explotarlas al máximo:

Face Detection

El documento propuesto para esta API permite detectar el rostro de las personas contenidas en una imagen. Todo lo que ya vemos desde hace muchos años, en redes sociales y otros servicios, pasará a ser una característica nativa de la cámara, gracias a esta sensacional API.

Barcode Detection

Y si hay rostros, hay códigos. El universo de códigos QR como también el de códigos de barra convencional, también se suma al listado de capacidades que estarán disponibles a través de la lente de nuestras cámaras

La lectura de un código de barra (con estándares limitados), y de un código QR, nos facilitará el universo del pago de productos y servicios, el armado de listas de compras o de logística, lectura de tickets de acceso a espectáculos, entre un sinfín de posibilidades comerciales más.

Text Detection

Y si podemos detectar rostros y códigos QR, también podemos detectar caracteres en general. La detección de textos también es posible y será próximamente un estándar disponible en la videocámara de nuestros dispositivos.

La lectura de textos en papeles y/o carteles informativos, será algo cotidiano y ya no debemos envidiar a apps sensacionales como lo fue en su momento Lens, luego integrada en Google Translate.

  const barcodeDetector = new BarcodeDetector({ 
    formats: ['aztec','code_128','code_39','code_93','codabar','data_matrix','ean_13','ean_8','itf','pdf417','qr_code','upc_a','upc_e'] 
  }); 
  try { 
    const barcodes = await barcodeDetector.detect(image);
    barcodes.forEach(barcode => searchProductDatabase(barcode));
  } catch (e) {
    console.error('Barcode detection failed:', e);
  }

Pan, Tilt, Zoom

Y si de cámaras hablamos, en el API getUserMedia(), funcional desde hace mucho tiempo, llegaron nuevas capacidades de control de imagen. Entre éstas, podemos mencionar a Pan, Tilt y Zoom, las cuales nos permiten controlar diversas prestaciones sobre una fotografía o video.

© web.dev (artículo: Control camera pan, tilt and zoom)

En el caso que el dispositivo sea 100% digital, aplicar el Zoom obviamente se hará de forma digital, pero en aquellos equipos donde se disponga de tecnología análoga o mecánica, las capacidades modernas serán aplicadas mediante la funcionalidad original.

  const stream = await navigator.mediaDevices.getUserMedia({
    video: { pan: true, tilt: true, zoom: true }
  });

Screen Spanning

Foldable devices es un término que comenzó a acuñarse hace poco más de un año, y que 2021 recibe con varios dispositivos comerciales ya disponibles. Y si hay un dispositivo de dos pantallas, por supuesto que debe haber una tecnología, tanto nativa como web, que acompañe esta fabulosa novedad.

Así es como CSS dio el puntapié, comenzando a dar soporte de las pantallas duales y luego fue seguido por JavaScript. De esta forma podremos pensar en una PWA que soporte, sin problema alguno, múltiples pantallas.

  const segments = window.getWindowSegments();
  // case 1: computadoras y dispositivos móviles tradicionales
  console.log(segments.length); // 1
  // case 2: Pantallas múltiples y foldable devices
  console.log(segments.length); // 2

Cambios en UI de instalación de las PWA

Otro gran trabajo llega un año después de que el entusiasta y evangelizador de las PWA, Alexey Rodionov, propusiera un cambio en el cuadro de diálogo de instalación de las PWA. El clásico mensaje “Add to home screen” que aparece algunos segundos después de ingresar a un sitio web instalable, cambiará por una interfaz UI mucho más elaborada.

Así, las Aplicaciones Web Progresivas, se nutrirán de una nueva forma de proponerle al usuario la instalación del sitio en su dispositivo, bajo la modalidad PWA. Esta modalidad está disponible en Chrome Canary, bajo el Flag:

  chrome://flags/#mobile-pwa-install-use-bottom-sheet

A continuación, les compartimos el mockup que él realizó al momento de realizar la propuesta.

Como podemos ver, el estilo que tendrá la instalación, al menos bajo Chrome, es mucho más intuitivo y amigable para el usuario, acercándose al estilo propuesto por las tiendas de aplicaciones más populares. Toda la configuración de esta tarjeta de instalación será realizada desde el mismo archivo Manifiesto.

Les dejamos por aquí el hilo de su propuesta original y por aquí cómo lucirá, de forma definitiva, la opción bajo este nuevo Flag.

Universo iOS

Como alguna vez lo comentamos, el universo de Web Apps ;) en el ecosistema iOS, siempre va a destiempo respecto al resto de sus competidores. A pesar de esto, debemos reconocer que Apple nos estuvo sorprendiendo con muchas novedades en Safari Browser, que fueron llegando a lo largo de 2020. Entre éstas:

• Mejoras en getUserMedia() (inicio de soporte en WKWebKit)
• Implementación web de FaceID y UserID
• Soporte de imágenes webP
• Side by Side en iPadOS
• OneTimePassword
• AppClips con soporte para webs

Y algunas no tan buenas, como el funcionamiento impreciso adrede de la geolocalización en aplicaciones y web basadas en iOS. Todo por la seguridad del usuario.

Las mejoras a la plataforma web han crecido significativamente, gracias a que muchos de los desarrolladores que fueron despedidos por la Fundación Mozilla el pasado 2020, fueron incorporándose a Apple para aportar valor agregado en las mejores de WebKit.

Mozilla Firefox != PWA

Y hablando de Mozilla, el navegador web Firefox va a bajar sus prioridades para con las aplicaciones web progresivas. El soporte que les da a éstas será el que llegó hasta ahora, y no va a seguir priorizando mejoras dentro del navegador, a favor de este fabuloso paradigma. :(

¡Bienvenida Comunidad PWA al 2021!

Tenemos un mil novedades más en el ecosistema PWA para contarles, aunque, en este artículo, solo nos enfocamos en algunas de las más importantes. Nos reservaremos otras tantas para ir contándoles su evolución a lo largo de este año a través de nuevos artículos, o con nuestros clásicos tutoriales.

¡Gracias por leernos!