Novedades de Chrome 80

Pete LePage

Ahora se está lanzando Chrome 80, y hay muchísimas funciones nuevas para los desarrolladores.

Se admiten los siguientes tipos de contenido:

Soy Pete LePage. Veamos las novedades para desarrolladores en Chrome 80.

Trabajadores de módulos

Los trabajadores de módulo, un nuevo modo para trabajadores web, con la ergonomía y los beneficios de rendimiento de los módulos de JavaScript ahora están disponibles. El constructor de trabajadores 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'
});

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

Encadenamiento opcional

Intentar leer propiedades profundamente anidadas en un objeto puede ser propenso a errores, en especial si existe la posibilidad de que algo no se evalúe.

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

Verificar cada valor antes de continuar se convierte con facilidad en una sentencia if profundamente anidada o requiere un bloque try / catch.

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

En Chrome 80, se agrega compatibilidad con una nueva función de JavaScript llamada encadenamiento opcional. Con el encadenamiento opcional, si una de las propiedades muestra un valor nulo o indefinido en lugar de arrojar un error, el resultado completo simplemente es indefinido.

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

Consulta la entrada de blog Optional encadenamiento en el blog de la versión 8 para obtener todos los detalles.

Graduaciones de la prueba de origen

Hay tres capacidades nuevas que pasaron de la prueba de origen a estable, lo que permite que cualquier sitio las use, sin un token.

Sincronización periódica en segundo plano

La primera es la sincronización periódica en segundo plano, que sincroniza datos periódicamente en segundo plano para que, cuando un usuario abra tu AWP instalada, tenga siempre los datos más recientes.

Selector de contactos

A continuación, veremos 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 quieran y cuando quieran, además de facilitarles la comunicación y la conexión con sus amigos y familiares.

Por último, el método Obtener aplicaciones relacionadas instaladas permite que la app web compruebe si tu aplicación nativa está instalada en el dispositivo de un usuario.

Uno de los casos de uso más comunes consiste en decidir si promocionar la instalación de tu AWP en caso de que no esté instalada tu aplicación nativa. O bien, es posible que quieras inhabilitar algunas funciones de una app si la proporciona otra.

Pruebas de origen nuevas

API de indexación de contenido

¿Cómo informas a los usuarios sobre el contenido almacenado en caché en tu AWP? Hay un problema de descubrimiento aquí. ¿Saberán que debe 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 que puede funcionar sin conexión a un índice local que el navegador mantiene y que es fácilmente visible para el usuario.

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, necesito obtener el registro del service worker, luego 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. Para obtener más detalles, consulta la publicación de Julio sobre Cómo indexar páginas que pueden funcionar sin conexión con la API de indexación de contenido en web.dev.

Activadores de notificaciones

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

Los activadores de notificaciones te permiten programar las notificaciones con anticipación, de modo que el sistema operativo las entregue 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 service worker. En las opciones de notificación, agrega una propiedad showTrigger con un TimestampTrigger. Luego, cuando llegue la hora, el navegador mostrará la notificación.

Se planea que la prueba de origen se ejecutará hasta Chrome 83, así que consulta la publicación Activadores de notificaciones de Tom en web.dev para conocer todos los detalles.

Pruebas de otras fuentes

Hay algunas otras pruebas de origen que comenzarán en Chrome 80:

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

Verifica la lista completa de las funciones en la prueba de origen.

Y mucho más

Por supuesto que hay mucho más.

  • Ahora puedes vincular directamente a fragmentos de texto en una página utilizando #:~: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
  • Si se configura display: minimal-ui en una AWP de escritorio, se agrega un botón para volver y volver a cargar en la barra de título de la AWP instalada.
  • Además, Chrome ahora admite el uso de imágenes SVG como íconos de página.

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 80.

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 81, estaré aquí para contarles las novedades de Chrome.