Fecha de publicación: 19 de agosto de 2025
La administración de la navegación abarca los métodos para controlar cómo una aplicación web progresiva (AWP) controla la navegación del usuario. Un componente fundamental de esto es la captura de navegación, el proceso del navegador que determina si hacer clic en un vínculo debe iniciar la AWP instalada o abrir una nueva pestaña del navegador.
En esta guía, se explica la nueva versión de la captura de navegación, disponible a partir de Chrome 139. Si bien el comportamiento predeterminado del navegador es adecuado para la mayoría de los casos, es fundamental comprender mejor estas técnicas de administración y sus APIs relacionadas si deseas crear la experiencia más fluida para tus usuarios.
En la sección Controles para desarrolladores, se explica cómo personalizar la navegación para brindar la mejor experiencia de lanzamiento posible para tu AWP.
El nuevo comportamiento predeterminado
Para alinearse con las preferencias de los usuarios y reducir la fricción, Chrome estandarizará la forma en que controla los vínculos. Anteriormente, el comportamiento era incoherente en las distintas plataformas. Por lo general, los dispositivos móviles priorizaban el lanzamiento de las apps instaladas, mientras que los navegadores para computadoras primero abrían un vínculo en una pestaña antes de indicar que una app podía controlarlo.
El nuevo enfoque unificado para la captura de navegación abre automáticamente los vínculos en su AWP instalada correspondiente. Los vínculos solo se redireccionarán a una pestaña del navegador si no se instaló la PWA o si el usuario inhabilitó la opción. Este nuevo comportamiento está disponible a partir de Chrome 139 para Windows, Mac y Linux. La compatibilidad con ChromeOS estará disponible en una versión futura.
El proceso de administración de la navegación
La captura de navegación forma parte del proceso de administración de la navegación. Este proceso abarca todo el flujo, desde la acción inicial del usuario hasta las decisiones del navegador y los comportamientos resultantes configurados por el desarrollador:
- Acciones del usuario: Incluyen interacciones como hacer clic o presionar enlaces.
- Decisiones del navegador: Incluye tareas y decisiones que administra el navegador, como los comportamientos predeterminados, como la captura de navegación.
- Controles para desarrolladores: Incluyen APIs web que permiten a los desarrolladores indicarle al navegador cómo controlar tareas específicas.
La interacción de estos elementos determina si la PWA se abre en una ventana independiente o en una pestaña del navegador.
Un caso de uso fundamental de administración de navegación es cuando un usuario hace clic o presiona un vínculo a la PWA instalada desde otra página del navegador. En el siguiente ejemplo, se explica el caso de un usuario que instaló la PWA de Google Chat y hace clic en un vínculo a ella desde una invitación del Calendario de Google.
calendar.google.com.Acciones del usuario
Cada acción del usuario consta de tres elementos clave: el evento (como un clic o una presión), la superficie en la que se produce (como una página web o un acceso directo de escritorio) y el tipo de vínculo que se activa (como una URL HTTPS). Por ejemplo, la acción de un usuario podría ser hacer clic en un vínculo a https://chat.google.com/meeting_room_id dentro del alcance de la PWA de Google Chat desde una página web en calendar.google.com.
Decisiones del navegador
Cuando el usuario realiza una acción, como hacer clic en el paso anterior, el navegador ejecuta el proceso de captura de navegación para decidir si los vínculos deben abrirse en una pestaña del navegador o en una PWA instalada. Consta de los siguientes pasos:
- Determina si la navegación se puede capturar: En general, una navegación se considera capturable si crea un nuevo fotograma y no se abre en un contexto de navegación auxiliar.
- Identifica una AWP controladora: Si la navegación se puede capturar, el navegador intenta encontrar una AWP que "controle" la URL (que se encuentre dentro del alcance definido en su manifiesto de la app web).
- Verifica la preferencia del usuario: Si se encuentra una PWA controladora, el navegador verifica la preferencia del usuario. Si el usuario no inhabilitó la opción en la configuración de la app, se iniciará la PWA. De lo contrario, el vínculo se abrirá en una pestaña nueva del navegador.
- Inicia la AWP: El navegador inicia la AWP con el algoritmo de control de inicio. Puedes influir en esto con la API de Launch Handler, que se explica a continuación.
En el siguiente diagrama, se resume este proceso:
Controles para desarrolladores
Si bien el proceso de navegación se basa principalmente en la configuración predeterminada del navegador y en la configuración del usuario, puedes usar varias APIs para administrar aspectos específicos de este. Tras la reciente actualización de la captura de navegación, algunas APIs web de larga data se volvieron más relevantes.
API de Launch Handler
Esta API entra en juego cuando el navegador decide iniciar la PWA, lo que te permite controlar cómo se inicia, por ejemplo, en una ventana nueva o existente.
Define cómo se inicia la AWP a través del miembro launch_handler en el manifiesto de la app web, que incluye un subcampo llamado client_mode. Este subcampo determina si se debe usar una ventana nueva o existente, y si se debe navegar. Los valores permitidos para client_mode son los siguientes:
focus-existing: Para controlar el vínculo en una ventana de la app existente, como una AWP que ya se está ejecutando en modo independiente.navigate-existing: En esta opción, se navega al contexto de navegación con el que se interactuó más recientemente en una ventana de la app web a la URL de destino del lanzamiento.navigate-new: Con esta opción, se crea un nuevo contexto de navegación en una ventana de la app web para cargar la URL de destino del lanzamiento.
Usa launchQueue API para proporcionar parámetros adicionales y controlar casos especiales.
La API de Launch Handler está disponible desde Chrome 110, pero se vuelve mucho más útil con la actualización de captura de navegación. Puedes obtener más información en la documentación de la API de Launch Handler.
Otras APIs relacionadas
Además del control del inicio, otras APIs también pueden desempeñar un papel en este proceso, según las necesidades específicas de tu app. Entre ellas, se incluyen los controladores de protocolo de URL, que permiten que una app web registre su capacidad para controlar esquemas de URL más allá de los estándares http y https (por ejemplo, protocolos estándares como mailto: o personalizados como web+music). Además, la API de Web App Scope Extensions (actualmente en desarrollo) te permite extender el alcance de tu AWP para capturar vínculos de otros orígenes, incluidos los subdominios, de modo que, cuando un usuario haga clic en un vínculo de un origen asociado, se pueda iniciar la AWP. No se abordan en profundidad en este artículo, pero puedes consultar los vínculos correspondientes para obtener más información.
Caso de uso: Captura de vínculos de Google Chat en la AWP de Chat
Para terminar, descubre cómo funcionan en conjunto las diferentes partes en el ejemplo de hacer clic en un vínculo de Calendario de Google a una sala de Google Chat para un usuario que ya instaló la AWP de Google Chat.
Antes de la captura de navegación
En el siguiente video, un usuario crea una reunión en Calendario de Google e invita a tres personas. La app de Calendario genera automáticamente un vínculo de Google Chat que incluye a todos los participantes. Cuando el usuario hace clic en este vínculo, la sala de chat se abre en una nueva pestaña del navegador. Luego, un ícono en la barra de direcciones indica que se instaló una PWA correspondiente, pero requiere que el usuario la inicie de forma manual. Este era el comportamiento antes de la actualización de captura de navegación:
Después de la captura de navegación
En el siguiente video, se muestra el mismo flujo de trabajo del usuario, pero ahora con el nuevo comportamiento de captura de navegación. En esta versión, si haces clic en el vínculo de Google Chat desde el Calendario de Google, se abrirá la sala de chat correspondiente directamente en la AWP instalada. Además, el equipo de Google Chat implementó el control de inicio agregando un atributo launch_handler al manifiesto de la app web. Si configuran su client_mode como focus-existing, se aseguran de que el vínculo se abra en una instancia existente de la AWP, si ya se está ejecutando una. Al eliminar la latencia que implica abrir una pestaña nueva del navegador y, luego, activar la carga de la página, el "tiempo efectivo hasta la interactividad del usuario" puede ser, por diseño, más rápido. De hecho, Google Chat mejoró significativamente la latencia de navegación, ya que eliminó la necesidad de iniciar una nueva app.
Conclusión y próximos pasos
En este artículo, se exploró el nuevo comportamiento predeterminado de captura de navegación disponible a partir de Chrome 139, y se hizo hincapié en un caso de uso común de un usuario que hace clic en un vínculo HTTPS dentro del alcance de una PWA instalada. Puedes encontrar más información y casos de uso en Administración de la navegación en las APW instaladas. En el siguiente diagrama, se muestra el desglose completo de los casos de uso, incluidos los eventos del usuario, las plataformas y los protocolos, con sus resultados correspondientes:
La administración de la navegación es un aspecto crucial, aunque a menudo pasado por alto, de la UX de tu app, ya que controla su punto de entrada. Las funciones y los vínculos que se describen en este artículo pueden ayudarte a lograr la mejor experiencia posible similar a una app para tu AWP.