Elige cómo los vínculos dentro del alcance abren la AWP con captura de vínculos declarativa

Thomas Steiner

¿Qué es la Captura de vínculos declarativa?

Hacer clic en vínculos en la Web puede ser una sorpresa agradable. Por ejemplo, si haces clic en un vínculo de una página web a YouTube en un dispositivo móvil, se abrirá la app de YouTube para iOS o Android, si está instalada. Sin embargo, cuando instalas la AWP de YouTube en una computadora de escritorio y haces clic en un vínculo, se abre en una pestaña del navegador.

Pero se vuelve más complejo. ¿Qué sucede si el vínculo no aparece en un sitio web, sino en un mensaje de chat que recibes en una de las apps de chat de Google? En los sistemas operativos de computadoras de escritorio, que tienen la noción de ventanas de apps separadas, si la app ya está abierta, ¿se debe crear una ventana o pestaña nueva para cada clic en el vínculo? Cuando lo piensas, hay muchas formas de capturar vínculos y navegaciones, incluidas, sin limitaciones, las siguientes:

La Captura de vínculos declarativa es una propuesta para una propiedad de manifiesto de app web llamada "capture_links" que permite a los desarrolladores determinar de forma declarativa qué debe suceder cuando se le solicita al navegador que navegue a una URL que se encuentra dentro del alcance de navegación de la aplicación, desde un contexto fuera del alcance de navegación. Esta propuesta no se aplica si el usuario ya está dentro del alcance de navegación (por ejemplo, si el usuario tiene abierta una pestaña del navegador que está dentro del alcance y hace clic en un vínculo interno).

Por lo general, algunas condiciones especiales, como hacer clic con el botón del medio en un vínculo (o hacer clic con el botón derecho y, luego, "Abrir en una pestaña nueva"), no activan el comportamiento de captura de vínculos. No importa si un vínculo es target=_self o target=_blank, de modo que los vínculos en los que se hace clic en una ventana del navegador (o la ventana de una AWP diferente) se abrirán en la AWP, incluso si, por lo general, provocaran una navegación dentro de la misma pestaña.

Casos de uso sugeridos

Estos son algunos ejemplos de sitios que pueden usar esta API:

  • AWP que desean abrir una ventana, en lugar de una pestaña del navegador, cuando el usuario hace clic en un vínculo a ellas. En un entorno de escritorio, a menudo tiene sentido tener varias ventanas de aplicaciones abiertas a la vez.
  • AWP de una sola ventana en las que el desarrollador prefiere tener una sola instancia de la app abierta en cualquier momento, con nuevas navegaciones que se enfocan en la instancia existente. Entre los casos de uso secundarios, se incluyen los siguientes:
    • Apps para las que tiene sentido tener solo una instancia en ejecución (p. ej., un reproductor de música o un juego)
    • Apps que incluyen la administración de varios documentos dentro de una sola instancia (p. ej., una barra de pestañas implementada en HTML)

Habilitación a través de about://flags

Para experimentar con la Captura de vínculos declarativa de forma local, sin un token de prueba de origen, habilita la marca #enable-desktop-pwas-link-capturing en about://flags.

¿Cómo usar la Captura de vínculos declarativa?

Los desarrolladores pueden determinar de forma declarativa cómo se deben capturar los vínculos aprovechando el campo adicional del manifiesto de la app web "capture_links". Toma una cadena o un array de cadenas como valor. Si se proporciona un array de cadenas, el usuario-agente elige el primer elemento compatible de la lista y, de forma predeterminada, usa "none". Se admiten los siguientes valores:

  • "none" (la opción predeterminada): No se capturan vínculos. Los vínculos en los que se hace clic que dirigen a este alcance de la AWP navegan de forma normal sin abrir una ventana de la AWP.
  • "new-client": Cada vínculo en el que se hace clic abre una nueva ventana de la AWP en esa URL.
  • "existing-client-navigate": El vínculo en el que se hizo clic se abre en una ventana de la AWP existente, si hay una disponible, o en una ventana nueva, si no la hay. Si hay más de una ventana de la AWP, el navegador puede elegir una de manera arbitraria. Se comporta como "new-client" si no hay ninguna ventana abierta. 🚨 ¡Ten cuidado! Esta opción puede provocar la pérdida de datos, ya que se puede navegar de forma arbitraria lejos de las páginas. Los sitios deben tener en cuenta que, si eligen esta opción, habilitan ese comportamiento. Esta opción funciona mejor para sitios de solo lectura que no almacenan datos del usuario en la memoria, como reproductores de música. Si la página de la que se sale tiene un evento beforeunload, el usuario verá el mensaje antes de que se complete la navegación.

Demostración

La demostración de la Captura de vínculos declarativa en realidad consta de dos demostraciones que interactúan entre sí:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

En la siguiente presentación en pantalla, se muestra cómo interactúan ambos. Muestran dos comportamientos diferentes, "new-client" y "existing-client-navigate". Asegúrate de probar las apps en diferentes estados, ejecutándolas en una pestaña o como una AWP instalada, para ver la diferencia en el comportamiento.

Seguridad y permisos

El equipo de Chromium diseñó e implementó la Captura de vínculos declarativa con los principios básicos definidos en Controlling Access to Powerful Web Platform Features, incluidos el control del usuario, la transparencia y la ergonomía. Esta API les permite a los sitios nuevas opciones de control adicionales. Primero, poder abrir automáticamente las apps instaladas en una ventana. Esto usa la IU existente, pero permite que el sitio la active automáticamente. En segundo lugar, la capacidad de enfocar una ventana existente en su propio dominio y activar un evento que contiene la URL en la que se hizo clic. El objetivo es permitir que el sitio navegue por una ventana existente a una página nueva, anulando el flujo de navegación HTML predeterminado.

Migra a la API de Launch Handler

La prueba de origen de la API de Declarative Link Capturing venció el 30 de marzo de 2022 para Chromium 97 y versiones anteriores. Se reemplazará por un conjunto de funciones y APIs nuevas en Chromium 98 y versiones posteriores, que incluye la captura de vínculos habilitada por el usuario y la API de Launch Handler.

En Chromium 98, la captura automática de vínculos ahora es un comportamiento que el usuario puede habilitar, en lugar de otorgarse a una app web en el momento de la instalación. Para habilitar la captura de vínculos, el usuario debe iniciar una app instalada desde el navegador con Abrir con y elegir Recordar mi elección.

Ejemplo de la configuración "Abrir con" de una app instalada con la opción "Recordar mi elección" habilitada.

Como alternativa, los usuarios pueden activar o desactivar la captura de vínculos para una app web específica en la página de configuración de administración de apps.

Ejemplo de la página de configuración de una app instalada.

Por el momento, la captura de vínculos es una función exclusiva de ChromeOS. La compatibilidad con Windows, macOS y Linux está en proceso.

API de Launch Handler

El control de una navegación entrante se migra a la API de Launch Handler, lo que permite que las apps web decidan cómo se inician en varias situaciones, como la captura de vínculos, el destino de uso compartido o el manejo de archivos, etcétera. Para migrar de la API de Declarative Link Capturing a la API de Launch Handler, haz lo siguiente:

  1. Registra tu sitio para la prueba de origen del controlador de lanzamiento y coloca la clave de prueba de origen en tu app web.

  2. Agrega una entrada "launch_handler" al manifiesto de tu sitio.

    • Para usar "capture_links": "new-client", agrega:"launch_handler": { "route_to": "new-client" }.
    • Para usar "capture_links": "existing-client-navigate", agrega lo siguiente: "launch_handler": { "route_to": "existing-client-navigate" }.
    • Para usar "capture_links": "existing-client-event" (que nunca se implementó en la prueba de origen de la captura de vínculos declarativa), agrega lo siguiente: "launch_handler": { "route_to": "existing-client-retain" }. Con esta opción, las páginas del alcance de tu app ya no navegarán automáticamente cuando se capture una navegación de vínculo. Para controlar el LaunchParams en JavaScript, debes llamar a window.launchQueue.setConsumer() para habilitar la navegación.

El campo capture_links y el registro de la prueba de origen de la Captura de vínculos declarativos son válidos hasta el 30 de marzo de 2022. Esto garantizará que los usuarios de Chromium 97 y versiones anteriores puedan iniciar la app web en un vínculo capturado.

Para obtener más detalles, consulta Cómo controlar el inicio de tu app.

Comentarios

El equipo de Chromium quiere conocer tus experiencias con la Captura de vínculos declarativos.

Cuéntanos sobre el diseño de la API

¿Hay algo en la API que no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad? Informa un problema de especificación en el repositorio de GitHub correspondiente o agrega tus comentarios a un problema existente.

Denuncia un problema con la implementación

¿Encontraste un error con la implementación de Chromium? ¿O la implementación es diferente de la especificación? Informa un error en new.crbug.com. Asegúrate de incluir tantos detalles como sea posible, instrucciones simples para reproducirlo y, luego, ingresa UI>Browser>WebAppInstalls en el cuadro Componentes. Glitch es excelente para compartir reproducciones rápidas y fáciles.

Cómo mostrar compatibilidad con la API

¿Planeas usar la Captura de vínculos declarativa? Tu apoyo público ayuda al equipo de Chromium a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es admitirlas.

Envía un tuit a @ChromiumDev con el hashtag #DeclarativeLinkCapturing y cuéntanos dónde y cómo lo usas.

Vínculos útiles

Agradecimientos

Matt Giuca especificó la Captura de vínculos declarativa con la entrada de Alan Cutter y Dominick Ng. Alan Cutter implementó la API. Joe Medley, Matt Giuca, Alan Cutter y Shunya Shishido revisaron este artículo. Imagen hero de Zulmaury Saavedra en Unsplash.