Novedades de Chrome 80

Pete LePage

Chrome 80 se está implementando ahora y tiene muchas funciones nuevas para los desarrolladores.

Se admite lo siguiente:

Soy Pete LePage. Comencemos a ver las novedades para desarrolladores en Chrome 80.

Trabajadores de módulos

Ya está disponible Module Workers, un nuevo modo para los trabajadores web, con la ergonomía y los beneficios de rendimiento de los módulos de JavaScript. El constructor de Worker acepta una nueva opción {type: "module"}, que cambia la forma en que se cargan y ejecutan las secuencias de comandos para que coincidan con <script type="module">.

const worker = new Worker('worker.js', {
  type: 'module'
});

El cambio a los módulos de JavaScript también permite el uso de la importación dinámica para el código de carga diferida, sin bloquear la ejecución del trabajador. Consulta la publicación de Jason Cómo crear subprocesos en la Web con trabajadores de módulos en web.dev para obtener más información.

Cadenas opcionales

Intentar leer propiedades anidadas en un objeto puede generar errores, sobre todo si existe la posibilidad de que algo no se evalúe.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

La verificación de cada valor antes de continuar se convierte fácilmente en una sentencia if anidada en profundidad o requiere un bloque try o catch.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 agrega compatibilidad con una nueva función de JavaScript llamada cadena opcional. Con la encadenación opcional, si una de las propiedades muestra un valor nulo o indefinido, en lugar de arrojar un error, todo simplemente muestra un valor indefinido.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Consulta la entrada de blog sobre cadenas opcionales en el blog de V8 para obtener todos los detalles.

Graduaciones de la prueba de origen

Hay tres funciones nuevas que pasaron de la versión de prueba de Origin a la versión estable, lo que permite que cualquier sitio las use sin un token.

Sincronización periódica en segundo plano

En primer lugar, está la sincronización periódica en segundo plano, que sincroniza los datos de forma periódica en segundo plano para que, cuando un usuario abra tu AWP instalada, siempre tenga los datos más recientes.

Selector de contactos

A continuación, se encuentra la API de Contact Picker, una API a pedido que permite a los usuarios seleccionar entradas de su lista de contactos y compartir detalles limitados de las entradas seleccionadas con un sitio web.

Permite que los usuarios compartan solo lo que quieren, cuando quieren, y les facilita la tarea de comunicarse y conectarse con sus amigos y familiares.

Por último, el método Get Installed Related Apps permite que tu app web compruebe si tu app nativa está instalada en el dispositivo de un usuario.

Uno de los casos de uso más comunes es decidir si promocionar la instalación de tu AWP si no está instalada tu app nativa. También puedes inhabilitar algunas funciones de una app si la otra app las proporciona.

Nuevas pruebas de origen

API de Content Indexing

¿Cómo les informas a los usuarios sobre el contenido que almacenaste en caché en tu AWP? Hay un problema de descubrimiento. ¿Sabrán cómo abrir tu app? ¿O qué contenido está disponible?

La API de Content Indexing es una nueva prueba de origen que te permite agregar URLs y metadatos de contenido compatible con la conexión sin conexión a un índice local que mantiene el navegador y que el usuario puede ver fácilmente.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Para agregar algo al índice, debo obtener el registro del trabajador de servicio, llamar a index.add y proporcionar metadatos sobre el contenido.

Una vez que se propaga el índice, se muestra en un área dedicada de la página Descargas de Chrome para Android. Consulta la publicación de Jeff Indexa tus páginas compatibles con la conexión sin conexión con la API de Content Indexing en web.dev para obtener todos los detalles.

Activadores de notificaciones

Las notificaciones son una parte fundamental de muchas apps. Sin embargo, las notificaciones push solo son tan confiables como la red a la que te conectas. Si bien eso funciona en la mayoría de los casos, a veces falla. Por ejemplo, si no recibes un recordatorio de calendario que te notifica un evento importante porque estás en modo avión, es posible que te lo pierdas.

Los activadores de notificaciones te permiten programar notificaciones con anticipación para que el sistema operativo las envíe en el momento adecuado, incluso si no hay conectividad de red o si el dispositivo está en modo de ahorro de batería.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Para programar una notificación, llama a showNotification en el registro del trabajador de servicio. En las opciones de notificación, agrega una propiedad showTrigger con un TimestampTrigger. Luego, cuando llegue el momento, el navegador mostrará la notificación.

Se planea que la prueba de origen se ejecute hasta Chrome 83, así que consulta la publicación de Tom sobre activadores de notificaciones en web.dev para obtener todos los detalles.

Otras pruebas de origen

Hay otras pruebas de origen que comienzan en Chrome 80:

  • Número de serie web
  • La capacidad de las AWP para registrarse como controladores de archivos
  • Nuevas propiedades para el selector de contactos

Consulta la lista completa de funciones en la prueba de origen.

Y mucho más

Por supuesto, hay mucho más.

  • Ahora puedes vincular directamente a fragmentos de texto en una página con #:~:text=something. Chrome se desplazará hasta la primera instancia de ese fragmento de texto y la destacará. Por ejemplo, https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Configurar display: minimal-ui en una AWP para computadoras de escritorio agrega un botón para volver y volver a cargar a la barra del título de la AWP instalada.
  • Además, Chrome ahora admite el uso de imágenes SVG como favoritos.

Lecturas adicionales

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

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Desarrolladores de Chrome 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 81, estaré aquí para contarte las novedades de Chrome.