A partir de Chrome 122, puedes suscribirte a la prueba de origen para el miembro del manifiesto de la app scope_extensions, que permite que los sitios que controlan varios subdominios y dominios de nivel superior se presenten como una sola aplicación web. En este documento, se explica por qué el equipo de Chrome presenta esta función y cuándo podrías usarla.
Descripción general
Algunas aplicaciones web tienen varios orígenes, por ejemplo, example.com como app principal y, luego, space_1.example.com, ..., space_n.example.com, que a veces se combina con special-example.com, como subexperiencias, todo bajo el techo de la app principal. Este tipo de arquitectura de sitio 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, el almacenamiento local y los permisos entre los orígenes. Además, la navegación de origen cruzado en una AWP independiente muestra una IU de ventana (barra "fuera de 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 a este tipo de arquitectura de sitio. Permite que las aplicaciones web extiendan su alcance a otros orígenes para ayudar a lograr una experiencia unificada, dado el acuerdo entre el origen principal de la aplicación 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 en lo que respecta a la captura de vínculos y la IU de la app web. 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.
Las extensiones de alcance permiten que las AWP de origen múltiple se comporten como una app web contigua en lo que respecta a la IU de la app web.
En la práctica, esto se traduce en dos objetivos más específicos:
- Navegación de origen cruzado: Invoca la IU de la ventana a fin de informar al usuario que se está alejando de la AWP para permitir que los usuarios naveguen por orígenes asociados sin interrumpir la experiencia del usuario.
- Captura de vínculos de origen cruzado: Permite que las apps web capturen la navegación de los usuarios a sitios con los que están afiliados.
Navegación dentro del alcance de origen cruzado
De forma predeterminada, cuando los usuarios navegan por los orígenes en una AWP independiente, se les muestra una IU de ventana que indica que se están yendo fuera de la experiencia de la AWP. En Chrome, esta IU consta de una barra "fuera del alcance" que contiene la URL del origen nuevo. Esto afecta la experiencia del usuario, ya que esperan continuar navegando dentro del mismo contexto de la aplicación, pero podrían percibir que se los está sacando.
La barra "fuera del alcance" que se muestra en Chrome cuando los usuarios navegan por diferentes orígenes en una AWP 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 presenta como una experiencia unificada.
Captura de vínculos de origen cruzado
La captura de vínculos se refiere a la capacidad de una app de capturar vínculos dentro de su alcance. La forma en que se implementa varía según los navegadores y los sistemas operativos. Por ejemplo, en Chrome en ChromeOS, los vínculos dentro del alcance de una AWP instalada abren una pestaña del navegador con una indicación en la barra de direcciones que indica que hay una app que puede administrar estos vínculos, lo que permite que el usuario acepte la captura automática de vínculos desde ese punto.
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 administrar el vínculo y la opción de recordar esa decisión.
Si un usuario hace clic en un vínculo que está fuera del alcance de la AWP (incluidos los vínculos a subdominios o dominios de nivel superior), no se reconocerá como tal. Por ejemplo, los vínculos se abrirán en una pestaña del navegador sin ninguna indicación para el usuario de que existe una app capaz de administrar el vínculo. La API de Scope Extensions permite extender el alcance de la AWP para que los orígenes asociados se traten como vínculos dentro del alcance.
Implementación
La implementación de extensiones de alcance requiere 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 aplicaciones 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" }
]
}
Confirmar asociaciones
Cada uno de los orígenes enumerados confirma la asociación con la app web mediante un archivo de configuración /.well-known/web-app-origin-association. Este archivo debe llamarse web-app-origin-association y entregarse 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:
- AWP principal: Es la AWP real que declara la lista de orígenes asociados a través del miembro
scope_extensionsen el manifiesto de la app web. - Origen en alcance extendido: Es un origen fuera del alcance de la AWP principal, pero asociado a él después de que la AWP principal lo indicó como un origen asociado y confirmar la relación a través de su archivo
web-app-origin-association.
Para realizar las siguientes pruebas, debes habilitar la marca about://flags/#enable-desktop-pwas-scope-extensions (disponible a partir de la versión 115 de Chrome).
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 AWP contiene vínculos a un origen en alcance extendido y a un origen no dentro del alcance extendido.
AWP de demostración con vínculos al origen dentro del alcance y el origen no extendidos.
Navegación de origen cruzado predeterminada (no en el alcance extendido)
- Haz clic en el vínculo origin not inExtended scope dentro de la AWP de pantalla completa.
- Como resultado, se produce la navegación y se muestra la barra fuera del alcance.
La barra "Fuera del alcance" se muestra de forma predeterminada en una navegación de origen cruzado para una AWP en modo independiente.
Navegación de origen cruzado con extensiones de alcance (en alcance extendido)
- Regresa a la página principal de la AWP.
- Haz clic en el vínculo al origen no está dentro del alcance extendido.
- De forma predeterminada, debería mostrarse una barra "fuera del alcance", pero no aparece debido a la asociación de extensiones de alcance.
La barra "Fuera del alcance" no se muestra en la navegación de origen cruzado después de que se haya realizado la asociación de origen con las extensiones de alcance.
Cómo probar la captura de vínculos de origen cruzado
- Abre y, luego, instala la AWP principal en un dispositivo ChromeOS.
- Haz clic en el siguiente vínculo: origen asociado.
- El vínculo se abre en una pestaña nueva del navegador y se muestra un mensaje para abrirlo en la AWP instalada.
Cuando se hace clic en un vínculo al origen asociado de una AWP, se abre el vínculo en una pestaña nueva y se muestra el ícono "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 mediante la obtención de un token de prueba vinculado al dominio. Luego, puedes implementar tu app y esperar que funcione en un navegador compatible con la función que estás probando (en este caso, está disponible en Chrome de la versión 121 a la 126). Si quieres obtener tu propio token para ejecutar una prueba de origen, completa el formulario de solicitud.
Comentarios
El equipo de Chrome quiere recibir comentarios sobre la utilidad de esta API. Para ayudar al equipo a hacer que esta API evolucione con comentarios sobre su utilidad y los nuevos casos de uso que no se abordan en la versión actual, abre un Problema en GitHub.
Recursos adicionales
- API de Scope Extensions: Prueba de origen
- Estado de Chrome: extensiones del alcance de las apps web
- Explicación de las extensiones de alcance para aplicaciones web
- Intención de experimentar
- Posición de los estándares de Mozilla
- Posición en estándares de Apple
- Error de Chromium
- Apps web progresivas en sitios de varios orígenes
- Cómo compilar varias apps web progresivas en el mismo dominio
Agradecimientos
Queremos dar un agradecimiento especial al equipo que desarrolló esta API. Alan Cutter y Lu Huang especificaron las extensiones de alcance, con aportes de Matt Giuca. Alan Cutter implementó la API de Google Chrome y Hassan Talat, Kristin Lee y Lu Huang de Microsoft Edge.