Chrome 89 ya comenzó a lanzarse en la versión estable.
Tenga en cuenta lo siguiente:
- WebHID, WebNFC y Web Serial completaron sus pruebas de origen y ahora están disponibles en la versión estable.
- Cerramos una laguna que algunos desarrolladores usaban para evitar las verificaciones de instalabilidad de las AWP.
- Web Share y Web Share Target llegan a las computadoras.
- Y hay muchas más.
Soy Pete LePage y estoy trabajando y grabando desde casa. Veamos las novedades para desarrolladores en Chrome 89.
WebHID, WebNFC y Web Serial
Me entusiasman mucho WebHID, WebNFC y Web Serial. Abren nuevos escenarios para los usuarios que antes no eran posibles, ya que interactúan con hardware del mundo real.
Permiten que los creadores se conecten a hardware divertido y peculiar, y a aplicaciones de videoconferencias para usar los botones de telefonía dedicados en altavoces especializados. O cualquier otra cantidad de casos de uso.
Con Web Serial y alrededor de 60 líneas de código, @AndreBan creó una página que puede interactuar con el REPL de MicroPython en una Raspberry Pi Pico. Espruino también usa Web Serial en su IDE basado en la Web.
En CDS 2019, François escribió un divertido juego de memoria con Web NFC. Tenías que presionar el teléfono en la tarjeta correcta y en el orden correcto.
Y mi favorito, @bramus, usó WebHID para conectarse a un StreamDeck y crear un pad de batería de Daft Punk. Si no tienes un StreamDeck, mira su video de demostración en YouTube y consulta el código en GitHub.
Ya sea que tu sitio interactúe con tu hardware o que tu hardware pueda 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 te puedes conectar en web.dev/devices o consultar las guías de introducción para WebHID, WebNFC y Web Serial.
Cambios en los criterios de instalabilidad de las AWP
La compatibilidad sin conexión ha sido una parte fundamental de los criterios de instalación de las aplicaciones web progresivas desde el principio. Al igual que con otras apps instaladas, los usuarios esperan que funcione de forma confiable. Debe ser rápido y los usuarios nunca deben ver el dinosaurio sin conexión.
Más adelante este año, planeamos cerrar una laguna que permitía que algunos sitios pasaran los criterios de instalación sin ofrecer una experiencia sin conexión. Si tu PWA ya tiene una experiencia sin conexión, no tienes que hacer nada más. No se requiere ninguna acción, pero, si no lo has hecho, es hora de agregar uno.
A partir de Chrome 89, si tu PWA 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 forzosa comenzará en Chrome 93, a finales de este año.
Puedes decidir qué tipo de experiencia sin conexión deseas proporcionar. Lo ideal es que proporciones la mayor cantidad de información posible sobre tu experiencia. 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 los motivos por los que lo realizamos en Mejora de la detección de la compatibilidad sin conexión de las apps web progresivas.
Si no sabes por dónde empezar, consulta Workbox. Tiene un conjunto de bibliotecas que pueden potenciar un service worker listo para producción para tu PWA. O bien, para una página de resguardo sin conexión simple, el artículo Crea 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 que los usuarios creen, editen o interactúen con archivos, debes usar las APIs de Web Share y Web Share Target. Estas APIs están disponibles en dispositivos móviles desde hace un tiempo, pero ahora también son compatibles con ChromeOS y Windows.
Web Share permite que los usuarios envíen archivos o datos a otras apps instaladas en sus dispositivos, por ejemplo, compartir 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;
}
}
Para registrarte como destino y que otras apps puedan compartir archivos o datos contigo, deberás usar la API de Web Share Target.
"share_target": {
"action": "/?share-target",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "file",
"accept": ["image/*"],
},
],
},
},
Consulta las guías de introducción Integrate with the OS sharing UI with the Web Share API y Receiving shared data with the Web Share Target API.
Y mucho más
Y, por supuesto, hay mucho más.
Chrome ahora permite await de nivel superior dentro de los módulos de JavaScript.
Para reducir la confusión de los usuarios, actualizamos el ícono que se muestra en el cuadro multifunción para las PWA instalables.
Además, si usaste una actividad web de confianza para que tu APW esté disponible en Play Store para ChromeOS, puedes registrarte en la prueba de origen de la API de Digital Goods.
Lecturas adicionales
Esto solo abarca algunos de los aspectos destacados clave. Consulta los vínculos a continuación para ver otros cambios en Chrome 89.
- Novedades de las Herramientas para desarrolladores de Chrome (89)
- Bajas y eliminaciones en Chrome 89
- Actualizaciones de ChromeStatus.com para Chrome 88
- Novedades de JavaScript en Chrome 88
- Lista de cambios del repositorio de código fuente de Chromium
Suscribirse
Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Chrome Developers y 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 las Raspberry Pi y Arduino es de Harrison Broadbent en Unsplash.