Extensiones de alcance de apps web

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

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

Descripción general

Algunas aplicaciones web tienen varias origins para ejemplo, example.com como app principal y, luego, space_1.example.com, ..., space_n.example.com, a veces combinado con special-example.com, como experiencias secundarias, todo bajo el techo de la app principal. Este tipo de sitio tiene implicaciones en el contexto de las apps web progresivas. Entre las limitaciones, se incluye no poder compartir service workers, de ningún 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 de la experiencia de la AWP. Puedes aprender a eludir algunos de estos problemas en los artículos Apps web progresivas en sitios de varios orígenes y Compilación de varias apps web progresivas en el mismo dominio.

La API de Scope Extensions permite que las aplicaciones web superen algunos de los desafíos que el política del mismo origen que impone a este tipo de arquitectura de sitio. Permite que las apps web extiendan su alcance para otros orígenes. para ayudar a lograr una experiencia unificada, según el acuerdo entre la cuenta de servicio el origen primario y los orígenes asociados.

Objetivos

El objetivo principal de la API de Scope Extensions es permitir a los sitios que controlan Varios subdominios y dominios de nivel superior para que se comporten como una sola app web cuando se trata de la IU de apps 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 comporta de la siguiente manera: tanto como sea posible como una sola aplicación web.

Diagrama que muestra una AWP principal y las subexperiencias asociadas

Las extensiones de alcance permiten que las AWP de origen múltiple se comporten como una app web contigua cuando en lo que respecta a la IU de apps web.

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

  • Navegación de origen cruzado: Permite a los usuarios navegar por los orígenes asociados. sin interrumpir la experiencia del usuario invocando la IU de la ventana para informar usuario que se está alejando de la AWP.
  • Captura de vínculos de origen cruzado: Permite que las aplicaciones web capten las navegaciones de los usuarios para sitios a los que están afiliados.

Navegación de origen cruzado dentro del alcance

De forma predeterminada, cuando los usuarios navegan por los orígenes en una AWP independiente, se mostró una IU de ventana que indica que se están moviendo fuera de la experiencia de la AWP. En Chrome, esta IU consiste en una sección una barra que contiene la URL del el nuevo origen. Esto es perjudicial para la experiencia del usuario, ya que estos esperan siguen navegando dentro del mismo contexto de la aplicación, pero podrían percibir se están sacando de él.

Barra fuera de alcance en la parte superior de una AWP independiente

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

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

La captura de vínculos hace referencia a la capacidad de una app de capturar vínculos dentro de su del proyecto. La forma en que se implementa esto varía según el navegador y los sistemas de la seguridad de la información. Por ejemplo, en Chrome para ChromeOS, los vínculos dentro del alcance de una instalación AWP de forma predeterminada abre una pestaña del navegador con una indicación en la barra de direcciones que indica hay una aplicación que es capaz de manejar estos vínculos, lo que le permite al usuario habilitar la captura automática de vínculos a partir de ese momento.

Mensaje de la barra multifunción para una AWP instalada.

Fragmento de la barra de direcciones de Chrome para una pestaña en ChromeOS que muestra una indicación visual que una AWP puede manejar 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 (incluido vínculos a subdominios o dominios de nivel superior), no se reconocerán como parte que se les asigna. Por ejemplo, los vínculos se abrirán en una pestaña del navegador sin ninguna indicación. al usuario que existe una aplicación que puede administrar el vínculo. El alcance La API de Extensions permite extender el alcance de la AWP de manera que la ubicación y sus orígenes se tratan como vínculos dentro del alcance.

Implementación

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

Declara la lista de orígenes asociados

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

Manifiesto de apps 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 aplicación web mediante un Archivo de configuración /.well-known/web-app-origin-association. Este archivo debe llamarse web-app-origin-association y se publicará en esta ubicación exacta, como 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 el about://flags/#enable-desktop-pwas-scope-extensions (disponible en Chrome v115 y versiones posteriores).

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 AWP y abrirlo para ejecutarlo en modo independiente. La AWP contiene vínculos a un origen en permiso extendido y a un origen no incluido en el alcance ampliado.

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

AWP de demostración con vínculos al origen en el alcance extendido y el origen no extendido del proyecto.

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

  1. Haz clic en el vínculo sobre el origen no está dentro del alcance ampliado. en la AWP de pantalla completa.
  2. Como resultado, se produce la navegación y se muestra la barra fuera del alcance.

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

"Fuera del alcance" barra que 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)

  1. Regresa a la página principal de la AWP.
  2. Haz clic en el vínculo el origen no está dentro del alcance ampliado.
  3. De forma predeterminada, un mensaje “fuera del alcance” pero, debido a la capa de alcance Asociación de extensiones, no lo es.

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

"Fuera del alcance" La barra no se muestra en la navegación de origen cruzado después de la asociación de origen se creó con extensiones de alcance.

  1. Abre e instala la AWP principal en una 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 aparece un mensaje para abrirlo en la AWP instalada.

Mensaje de la barra multifunción para una AWP instalada con alcance extendido.

Si haces clic en un vínculo al origen asociado de una AWP, se abrirá el vínculo en una pestaña nueva. muestra el mensaje "Abrir en la app" ícono que le permite al usuario habilitar el vínculo automático captura.

Prueba de origen

Si quieres probar esta API en tu aplicación en el campo con usuarios, puedes hacerlo con un prueba de origen. Las pruebas de origen te permiten probar funciones experimentales con tus usuarios mediante la obtención un token de prueba que esté vinculado a tu dominio. Luego, puedes implementar tu app en un navegador compatible con la función que estás probando (en este caso, está disponible en Chrome de 121 a 126). Para obtener tu propio token para o ejecutas una prueba de origen, completa 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 nuevos casos de uso no cubiertos en la versión actual, abre un Problema en GitHub.

Recursos adicionales

Agradecimientos

Queremos dar un agradecimiento especial al equipo que está a cargo del desarrollo de esta API. Extensiones de alcance fue especificada por Alan CTER y Lu Huang, con aportes de Matt Giuca. La API fue implementada por Alan Cround de Google Chrome y Hassan Talat, Kristin Lee y Lu Huang de Microsoft Edge.