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?

A veces, 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 PWA de YouTube en una computadora de escritorio y haces clic en un vínculo, este 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 para computadoras, que tienen la noción de ventanas de apps separadas, si la app ya está abierta, ¿se debería crear una nueva ventana o pestaña para cada clic en un vínculo? Si lo piensas bien, hay muchas formas de capturar los vínculos y la navegación, incluidas, sin limitaciones, las siguientes:

La captura declarativa de vínculos es una propuesta para una propiedad del manifiesto de la app web llamada "capture_links" que permite a los desarrolladores determinar de forma declarativa qué debe suceder cuando se le pide 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 se encuentra 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).

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, seleccionar "Abrir en una pestaña nueva"), no suelen activar 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 haga clic en una ventana del navegador (o en una ventana de otra PWA) se abran en la PWA, incluso si normalmente provocarían una navegación dentro de la misma pestaña.

Casos de uso sugeridos

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

  • PWA que desea abrir una ventana, en lugar de una pestaña del navegador, cuando el usuario hace clic en un vínculo a ella. En un entorno de escritorio, a menudo tiene sentido tener varias ventanas de aplicaciones abiertas al mismo tiempo.
  • PWA de una sola ventana en la que el desarrollador prefiere tener solo una instancia de la app abierta en cualquier momento, con nuevas navegaciones que enfocan 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 tira 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 su valor. Si se proporciona un array de cadenas, el agente de usuario elige el primer elemento compatible de la lista, y el valor predeterminado es "none". Se admiten los siguientes valores:

  • "none" (predeterminado): No se capturan vínculos. Los vínculos en los que se hace clic y que dirigen a este alcance de AWP navegan con normalidad sin abrir una ventana de AWP.
  • "new-client": Cada vínculo en el que se hace clic abre una nueva ventana de AWP en esa URL.
  • "existing-client-navigate": El vínculo en el que se hizo clic se abre en una ventana de AWP existente, si hay una disponible, o en una ventana nueva si no la hay. Si existe más de una ventana de PWA, es posible que el navegador elija una de forma arbitraria. Se comporta como "new-client" si no hay ninguna ventana abierta. 🚨 ¡Cuidado! Esta opción puede provocar la pérdida de datos, ya que se puede navegar de forma arbitraria fuera de las páginas. Los sitios deben tener en cuenta que, si eligen esta opción, habilitarán ese comportamiento. Esta opción funciona mejor para los sitios de "solo lectura" que no almacenan datos del usuario en la memoria, como los 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 consta de dos demostraciones que interactúan entre sí:

  1. Sitio 1
  2. Sitio 2

En el siguiente video, 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, ya sea ejecutándose en una pestaña o como una PWA 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 permite que los sitios tengan nuevas opciones de control adicionales. Primero, la capacidad de 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 contenga la URL en la que se hizo clic. Esto tiene como objetivo permitir que el sitio navegue una ventana existente a una página nueva, lo que anula 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 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.

En Chromium 98, la captura automática de vínculos ahora es un comportamiento que el usuario debe habilitar, en lugar de otorgarse en el momento de la instalación de una app web. 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 del parámetro de 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 desarrollo.

API de Launch Handler

El control de una navegación entrante se migra a la API de Launch Handler, que permite que las apps web decidan cómo se inician en diversas situaciones, como la captura de vínculos, el destino de uso compartido o el control 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 de Launch Handler 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 "launch_handler": { "route_to": "new-client" }.
    • Para usar "capture_links": "existing-client-navigate", agrega "launch_handler": { "route_to": "existing-client-navigate" }.
    • Para usar "capture_links": "existing-client-event" (que nunca se implementó en la prueba de origen de Declarative Link Capturing), agrega "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ínculos. Debes controlar 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 Declarative Link Capturing son válidos hasta el 30 de marzo de 2022. Esto garantizará que los usuarios de Chromium 97 y versiones anteriores puedan seguir iniciando la app web en un vínculo capturado.

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

Comentarios

El equipo de Chromium quiere conocer tu experiencia con la captura de vínculos declarativa.

Cuéntanos sobre el diseño de la API

¿Hay algo sobre 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 tu opinión a un problema existente.

Informa 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? Presenta un error en new.crbug.com. Asegúrate de incluir tantos detalles como sea posible, instrucciones simples para reproducir el error y, luego, ingresa UI>Browser>WebAppInstalls en el cuadro Components.

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 funciones y 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 colaboración 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.