Extensiones de alcance de apps web

A partir de Chrome 122, puedes suscribirte a la prueba de origen para el miembro scope_extensions del manifiesto de la app, que permite que los sitios que controlan varios subdominios y dominios de nivel superior se presenten como una sola app web. En este documento, se explica por qué el equipo de Chrome presenta esta función y cuándo te convendría usarla.

Demián Renzulli
Demián Renzulli
X GitHub
Thomas Steiner

Descripción general

Algunas aplicaciones web tienen varios orígenes, por ejemplo, example.com como la app principal y, luego, space_1.example.com, …, space_n.example.com, a veces combinados con special-example.com, como subexperiencias, todo bajo el mismo techo de la app principal. Este tipo de arquitectura de sitios tiene implicaciones en el contexto de las apps web progresivas. Entre las limitaciones, se incluyen la imposibilidad de compartir service workers, cualquier tipo de dispositivo, almacenamiento local y permisos entre orígenes. Además, la navegación entre orígenes en una AWP independiente muestra una IU de ventana (barra "fuera del alcance") que indica que el usuario salió de la experiencia de la AWP. Puedes aprender a solucionar algunos de estos problemas en los artículos Apps web progresivas en sitios de varios orígenes y Cómo compilar varias apps web progresivas en el mismo dominio.

La API de Scope Extensions permite que las apps web superen algunos de los desafíos que la política del mismo origen impone en este tipo de arquitectura de sitios. Permite que las apps web extiendan su alcance a otros orígenes para ayudar a lograr una experiencia unificada, dado el acuerdo entre el origen principal de la app web y los orígenes asociados.

Objetivos

El objetivo principal de la API de Scope Extensions es permitir que los sitios que controlan varios subdominios y dominios de nivel superior se comporten como una app web contigua cuando se trata de la IU de la app web y la captura de vínculos. Por ejemplo, permitir que el sitio example.com que abarca example.com.co.uk y support.example.com se comporte lo más posible como una sola aplicación web.

Diagrama que muestra una PWA principal y las subexperiencias asociadas.

Las extensiones de alcance permiten que las PWA de varios orígenes se comporten como una app web contigua cuando se trata de la IU de la app web.

En la práctica, esto se traduce en dos objetivos más específicos:

  • Navegación entre orígenes: Permite a los usuarios navegar entre orígenes asociados sin interrumpir la experiencia del usuario invocando la IU de la ventana que le informa al usuario que se está alejando de la PWA.
  • Captura de vínculos de origen cruzado: Permite que las apps web capturen la navegación del usuario a sitios con los que están afiliadas.

Navegación dentro del alcance de origen cruzado

De forma predeterminada, cuando los usuarios navegan entre orígenes en una AWP independiente, se les muestra una IU de ventana que indica que se están moviendo fuera de la experiencia de la AWP. En Chrome, esta IU consta de una barra "fuera del alcance" que contiene la URL del nuevo origen. Esto interrumpe la experiencia del usuario, ya que se espera que los usuarios sigan navegando dentro del mismo contexto de la aplicación, pero podrían percibir que se los saca de él.

Barra fuera del alcance en la parte superior de una PWA independiente.

Barra "Fuera del alcance" que se muestra en Chrome cuando los usuarios navegan por diferentes orígenes en una PWA independiente.

Con las extensiones de alcance, la IU de la ventana no se mostrará cuando los usuarios naveguen a cualquiera de los orígenes asociados, por lo que la AWP se presentará como una experiencia unificada.

La captura de vínculos se refiere a la capacidad de una app para capturar vínculos dentro de su alcance. La forma en que se implementa varía entre los navegadores y los sistemas operativos. Por ejemplo, en Chrome en ChromeOS, los vínculos dentro del alcance de una PWA instalada abren de forma predeterminada una pestaña del navegador con una indicación en la barra de direcciones de que hay una app que puede controlar estos vínculos, lo que permite que el usuario habilite la captura automática de vínculos a partir de ese momento.

Mensaje de la barra de direcciones para una AWP instalada.

Fragmento de la barra de direcciones de Chrome para una pestaña en ChromeOS que muestra una indicación visual de que una AWP puede controlar el vínculo y la opción para recordar esa decisión.

Si un usuario hace clic en un vínculo que está fuera del alcance de la PWA (incluidos los vínculos a subdominios o dominios de nivel superior), no se reconocerá que pertenece a ella. Por ejemplo, los vínculos se abrirán en una pestaña del navegador sin ninguna indicación al usuario de que hay una app que puede controlar el vínculo. La API de Scope Extensions permite extender el alcance de la PWA para que los orígenes asociados se traten como vínculos dentro del alcance.

Implementación

Para implementar extensiones de alcance, es necesario establecer la relación entre el origen principal y los orígenes asociados.

Declara la lista de orígenes asociados

Agrega un miembro del manifiesto de la app web scope_extensions al origen principal de la AWP para permitir que la app web extienda su alcance a otros orígenes.

Manifiesto de la app web (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

Confirma las asociaciones

Cada uno de los orígenes enumerados confirma la asociación con la app web a través de un archivo de configuración /.well-known/web-app-origin-association. Este archivo debe llamarse web-app-origin-association y publicarse en esta ubicación exacta, ya que es un URI conocido.

/.well-known/web-app-origin-association (origen asociado)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

Demostración

La demostración consta de dos sitios:

Para realizar las siguientes pruebas, debes habilitar la marca about://flags/#enable-desktop-pwas-scope-extensions (disponible a partir de Chrome v115).

Cómo probar la navegación de origen cruzado

Como condición previa para estas pruebas, abre la AWP principal en un navegador, instálala como una AWP y ábrela para ejecutarla en modo independiente. La PWA contiene vínculos a un origen en el alcance extendido y a un origen que no está en el alcance extendido.

Ventana principal de la AWP con vínculos dentro del alcance y con alcance extendido.

PWA de demostración con vínculos al origen en el alcance extendido y al origen no incluido en el alcance extendido.

Navegación predeterminada entre orígenes (no en el alcance extendido)

  1. Haz clic en el vínculo al origen que no está en el alcance extendido dentro de la PWA de pantalla completa.
  2. Como resultado, se realiza la navegación y se muestra la barra de fuera del alcance.

Ventana principal de la PWA con la barra fuera del alcance después de hacer clic en el vínculo fuera del alcance.

La barra "Fuera del alcance" se muestra de forma predeterminada para una navegación de origen cruzado para una PWA en modo independiente.

Navegación de origen cruzado con extensiones de alcance (en alcance extendido)

  1. Regresa a la página principal de la PWA.
  2. Haz clic en el vínculo al origen que no está en el alcance extendido.
  3. De forma predeterminada, debería mostrarse una barra de "fuera del alcance", pero no se muestra debido a la asociación de extensiones de alcance.

Ventana principal de la PWA sin la barra de fuera del alcance después de hacer clic en el vínculo de alcance extendido.

No se muestra la barra "Fuera del alcance" en la navegación de origen cruzado después de que se realizó la asociación de origen con las extensiones de alcance.

  1. Abre e instala la PWA principal en un dispositivo ChromeOS.
  2. Haz clic en el siguiente vínculo: origen asociado.
  3. El vínculo se abre en una nueva pestaña del navegador y se muestra un mensaje para abrirlo en la PWA instalada.

Mensaje de la barra de direcciones para una AWP instalada con alcance extendido.

Si se hace clic en un vínculo al origen asociado de una PWA, se abre el vínculo en una pestaña nueva y se muestra un ícono de "Abrir en la app" que permite al usuario habilitar la captura automática de vínculos.

Prueba de origen

Si deseas probar esta API en tu aplicación en el campo con usuarios reales, puedes hacerlo con una prueba de origen. Las pruebas de origen te permiten probar funciones experimentales con tus usuarios. Para ello, debes obtener un token de prueba vinculado a tu dominio. Luego, puedes implementar tu app y esperar que funcione en un navegador que admita la función que estás probando (en este caso, está disponible en Chrome de la versión 121 a la 126). Para obtener tu propio token y ejecutar una prueba de origen, completa el formulario de solicitud.

Comentarios

El equipo de Chrome busca comentarios sobre la utilidad de esta API. Para ayudar al equipo a desarrollar esta API con comentarios sobre su utilidad y nuevos casos de uso que no se incluyen en la versión actual, abre un problema en GitHub.

Recursos adicionales

Agradecimientos

Agradecemos especialmente al equipo que desarrolló esta API. Alan Cutter y Lu Huang especificaron las extensiones de alcance, con la colaboración de Matt Giuca. La API fue implementada por Alan Cutter de Google Chrome y Hassan Talat, Kristin Lee y Lu Huang de Microsoft Edge.