Novedades de Chrome 89

Ahora el lanzamiento de Chrome 89 es estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage, trabajando y disparando desde casa. Veamos las novedades para desarrolladores en Chrome 89.

WebHID, WebNFC y Web Serial

Me entusiasman WebHID, WebNFC y Web Serial. Ofrecen a los usuarios nuevas situaciones que antes no eran posibles, ya que interactúan con hardware del mundo real.

Permiten que los fabricantes se conecten a hardware divertido y peculiar con apps de videoconferencia para usar los botones de telefonía exclusivos en bocinas especializadas. o muchos otros casos de uso.

Con Web Serial y unas 60 líneas de código, @AndreBan creó una página que puede interactuar con el REPL de MicroPython en un Raspberry Pi Pico. Espruino también usa Web Serial en su IDE basado en la Web.

En el CDS de 2019, Francois escribió un divertido juego estilo memoria con Web NFC. Tuviste que presionar el teléfono con la tarjeta correcta, en el orden correcto.

Stream Deckk con tambores de Daft Punk

Y mi favorito, @bramus, usó WebHID para conectarse a un StreamDeck y creó un pad de batería de Daft Punk. Si no tienes un StreamDeck, consulta su video de demostración en YouTube y el código en GitHub.

Ya sea tu sitio el que interactúa con tu hardware o tu hardware puede interactuar con muchos sitios, los usuarios ganan porque no necesitan instalar controladores ni software especiales.

Puedes obtener más información sobre algunos de los dispositivos a los que puedes conectarte en web.dev/devices o consultar las guías de introducción para WebHID, WebNFC y Web Serial.

Cambios en los criterios de instalación de la AWP

El soporte sin conexión ha sido una parte clave de los criterios de las apps web progresivas para la instalación desde el principio. Al igual que con otras apps instaladas, los usuarios esperan que funcione de manera confiable. Debería ser rápido, y nunca deberían ver el dinosaurio sin conexión.

Más adelante este año, planeamos cerrar una brecha que permitía que unos pocos sitios aprobaran los criterios de instalación, sin una experiencia sin conexión. Si tu AWP ya tiene una experiencia sin conexión, no necesitas hacer nada más. No es necesario que realices ninguna acción, pero, si no es así, es hora de agregar una.

A partir de Chrome 89, si tu AWP no proporciona una respuesta válida cuando está sin conexión, verás una advertencia en Herramientas para desarrolladores en la pestaña Problemas, y Lighthouse indicará que hay un problema. Además, la aplicación comenzará en Chrome 93 más adelante este año.

Herramientas para desarrolladores mostrando un mensaje de advertencia en la consola.
Mensaje de advertencia en la consola de Herramientas para desarrolladores de Chrome.
Herramientas para desarrolladores mostrando un mensaje de advertencia en la pestaña Aplicación
Un mensaje de advertencia en la pestaña Aplicación > Manifiesto > Instalabilidad.

Puedes decidir qué tipo de experiencia sin conexión deseas proporcionar. Lo ideal sería que brindes la mayor cantidad de experiencia posible. Sin embargo, como mínimo, puede ser tan simple como una página de resguardo sin conexión.

Puedes encontrar más detalles sobre el cambio y por qué lo implementaremos en Cómo mejorar la detección de compatibilidad sin conexión de las aplicaciones web progresivas.

Si no sabes por dónde comenzar, consulta Workbox. Tiene un conjunto de bibliotecas que pueden potenciar un service worker listo para la producción para tu AWP. O bien, en el caso de una página de resguardo sin conexión simple, el artículo Cómo crear una página de resguardo sin conexión tiene todo el código que necesitas, y puedes copiarlo y pegarlo directamente en tu sitio.

Web Share y Web Share Target para computadoras

Si tu sitio permite a los usuarios crear o editar archivos, o interactuar con ellos, debes usar las APIs de Web Share y Web Share Target. Estas APIs estuvieron disponibles en dispositivos móviles desde hace tiempo, pero ahora son compatibles con ChromeOS y Windows.

Web Share permite que los usuarios envíen archivos o datos a otras apps instaladas en su dispositivo, por ejemplo, compartiendo una foto de Google Fotos en Twitter.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

Si quieres registrarte como destino para que otras apps puedan compartir archivos o datos contigo, te recomendamos que uses la API de Web Share Target.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

Consulta Integra la IU de uso compartido del SO mediante la API de Web Share y Recibe datos compartidos con la API de Web Share Target para obtener guías de introducción.

Y mucho más

Y, por supuesto, hay mucho más.

Chrome ahora permite el nivel superior await en los módulos de JavaScript.

Nuevo ícono de instalación del cuadro multifunción para AWP

A fin de evitar confusiones para los usuarios, actualizamos el ícono que se muestra en el cuadro multifunción para las AWP instalables.


Además, si usaste una actividad web de confianza para que tu AWP esté disponible en Play Store para ChromeOS, puedes registrarte en la prueba de origen de la API de artículos digitales.

Lecturas adicionales

Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 89.

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete al canal de YouTube de Chrome Developers. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y en cuanto se lance Chrome 90, estaré aquí para contarte las novedades de Chrome.

Créditos

La foto de Raspberry Pis y Arduino es de Harrison Broadbent en Unsplash.