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

Thomas Steiner

Precaución: La captura declarativa de vínculos forma parte del proyecto de funciones. El equipo de ingeniería decidió que la captura de vínculos declarativos no se lanzará con su diseño actual. En cambio, la función se rediseñó según se describe en Cómo controlar cómo se inicia tu app. Si tu app implementa la API de captura de vínculos declarativos, debes realizar la transición a la API de Launch Handler de reemplazo.

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

Hacer clic en vínculos en la Web a veces puede ser una grata sorpresa. Por ejemplo, si haces clic en el 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 app separadas, si la app ya está abierta, ¿debería crearse una ventana o pestaña nueva para cada clic en el vínculo? Si piensas en ello, hay muchas formas de capturar vínculos y navegaciones, incluidas, sin limitaciones, las siguientes:

• Se hizo clic en vínculos de otras páginas web.
• La URL se inicia desde una app específica de la plataforma en el sistema operativo.
• Navegaciones que se originan en la API de App Shortcuts
• Vínculos que pasan por controladores de protocolo de URL.
• Navegaciones causadas por controladores de archivos.
• Navegaciones provocadas por la API de Share Target.
• ...y más.

La captura declarativa de vínculos es una propuesta para una propiedad de manifiesto de una app web llamada "capture_links" que permite a los desarrolladores determinar de forma declarativa qué debería suceder cuando se le solicita al navegador que navegue a una URL que se encuentre 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 la navegación (por ejemplo, si tiene abierta una pestaña del navegador dentro del alcance y hace clic en un vínculo interno).

Término clave: El alcance de navegación de un manifiesto de app web es el elemento "scope" de un manifiesto procesado. El alcance de navegación restringe el conjunto de URLs a las que se puede navegar por el contexto de una aplicación mientras se aplica el manifiesto. Si el miembro "scope" no está presente en el manifiesto, su valor predeterminado es la ruta de acceso superior del miembro "start_url".

Algunas condiciones especiales, como hacer clic con el botón central en un vínculo (o hacer clic con el botón derecho y luego "abrir en una pestaña nueva") por lo general, no activan el comportamiento de captura de vínculos. Si un vínculo es target=_self o target=_blank no importa, de modo que los vínculos en los que se haga clic en una ventana del navegador (o la ventana de una AWP diferente) se abran en la AWP, incluso si normalmente provocan 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 que las dirige a ellas. En un entorno de escritorio, a menudo tiene sentido tener varias ventanas de aplicaciones abiertas a la vez.
• AWP de ventana única, en las que el desarrollador prefiere tener solo una instancia de la app abierta a la vez, con navegaciones nuevas que se enfocan en la instancia existente Entre los subcasos, se incluyen los siguientes:
  • Aplicaciones para las que tiene sentido tener una sola instancia en ejecución (p. ej., un reproductor de música o un juego)
  • Apps que incluyen administración de varios documentos dentro de una única instancia (p.ej., una barra de pestañas implementada con HTML).

Habilitación mediante about://flags

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

¿Cómo se usa 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 "capture_links" del manifiesto de la aplicación web. Toma una cadena o un array de cadenas como su valor. Si se proporciona un array de cadenas, el usuario-agente elige el primer elemento compatible de la lista y se establece de forma predeterminada como "none". Se admiten los siguientes valores:

• "none" (opción predeterminada): No se realiza la captura de vínculos. Los vínculos en los que se hizo clic que dirigen a este alcance de la AWP navegan de manera 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 abrirá en una ventana existente de la AWP, si hay una disponible, o en una nueva ventana si no lo está. Si existe más de una ventana de AWP, el navegador puede elegir una de manera arbitraria. Este se comporta como "new-client" si no hay ninguna ventana abierta. 📔 ¡Ten cuidado! Esta opción podría llevar a la pérdida de datos, ya que se puede salir de las páginas de forma arbitraria. Los sitios deben estar conscientes de que habilitan este comportamiento al elegir esta opción. Esta opción funciona mejor para sitios de "solo lectura" que no almacenan datos del usuario en la memoria, como los reproductores de música. Si la página a la que se navega tiene un evento beforeunload, el usuario verá el mensaje antes de que se complete la navegación.

Nota: Se explica cómo agregar opciones que no abren una ventana, sino que activan un evento launch en una ventana en primer plano o en el service worker. Consulta la explicación del evento launch para obtener más detalles y, más específicamente, las secciones sobre existing-client-event y service-worker.

Demostración

La demostración de Captura de vínculos declarativos en realidad consta de dos demostraciones que interactúan juntas:

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 los dos. Muestran dos comportamientos diferentes: "new-client" y "existing-client-navigate". Asegúrate de probar las apps en diferentes estados, que se ejecuten en una pestaña o como una AWP instalada, para ver la diferencia de comportamiento.

Seguridad y permisos

El equipo de Chromium diseñó e implementó la captura declarativa de vínculos a través de los principios básicos definidos en Cómo controlar el acceso a funciones potentes de la plataforma web, incluidos el control del usuario, la transparencia y la ergonomía. Esta API permite que los sitios tengan nuevas opciones de control adicionales. Primero, poder abrir automáticamente las apps instaladas en una ventana. Esto usa una 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 contenga la URL en la que se hizo clic. Esto permite que el sitio navegue por una ventana existente a una página nueva, lo que anula el flujo de navegación HTML predeterminado.

Cómo migrar a la API de Launch Handler

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

Captura de vínculos

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

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.

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

Iniciar API de Handler

El control de una navegación entrante se migra a la API de Launch Handler, que permite a las apps web decidir cómo se iniciará una app web en varias situaciones, como la captura de vínculos, el destino para compartir o el manejo de archivos, etc. 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 inicio y coloca la clave de la 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 lo siguiente:"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 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 por vínculo. Debes controlar la LaunchParams en JavaScript llamando a window.launchQueue.setConsumer() para habilitar la navegación.

El campo capture_links y el registro de la prueba de origen de captura de vínculos declarativos estarán disponibles hasta el 30 de marzo de 2022. Esto garantizará que los usuarios de Chromium 97 y versiones anteriores aún puedan iniciar la aplicación web desde un vínculo capturado.

Para obtener más información, consulta Controla cómo se inicia tu app.

Comentarios

El equipo de Chromium quiere conocer tus experiencias con la captura declarativa de vínculos.

Cuéntanos sobre el diseño de la API

¿Hay algo acerca de 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 especificaciones en el repositorio de GitHub correspondiente o agrega tus ideas a un problema existente.

Informar un problema con la implementación

¿Encontraste un error en 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 puedas, además de instrucciones simples para reproducir el contenido, y, luego, ingresa UI>Browser>WebAppInstalls en el cuadro Componentes. Glitch funciona muy bien para compartir repros rápidos y fáciles.

Muestra compatibilidad con la API

¿Planeas usar la captura de vínculos declarativa? Tu asistencia pública ayuda al equipo de Chromium a priorizar funciones y le muestra a otros proveedores de navegadores la importancia de admitirlas.

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

Vínculos útiles

• Borrador de especificaciones
• Explicación
• Error de Chromium
• Intent de crear prototipos
• Intención de experimentar
• Entrada de ChromeStatus

Agradecimientos

Matt Giuca especificó la captura declarativa de vínculos con los aportes de Alan Cutter y Dominick Ng. Alan Cutter implementó la API. Joe Medley, Matt Giuca, Alan Cutter y Shunya Shishido revisaron este artículo. Hero image de Zulmaury Saavedra en Unsplash.