AWP como controladores de URL

Permite que las AWP instaladas controlen las URLs para lograr una experiencia más integrada.

Thomas Steiner

Advertencia: Las AWP como controladores de URL formaban parte del proyecto de funciones y se quitarán de forma gradual la compatibilidad con el miembro experimental del manifiesto url_handlers, que se documenta a continuación. Se reemplazará el miembro del manifiesto url_handlers por el nuevo miembro del manifiesto handle_links, que actualmente se estandariza y se implementa. Consulta la explicación de handle_links.

¿Qué son las AWP como controladores de URL?

Imagina que estás chateando con un amigo usando una app de mensajería instantánea, como Mensajes en macOS, y estás hablando sobre música. Imagina además que ambos tienen la AWP de music.example.com instalada en tus dispositivos. Si quieres compartir tu pista favorita para que la disfrute tu amigo, puedes enviarle un vínculo directo, como https://music.example.com/rick-astley/never-gonna-give-you-up. Como este vínculo es bastante largo, es posible que los desarrolladores de music.example.com hayan decidido agregar un vínculo corto adicional a cada pista, como https://🎵.example.com/r-a/n-g-g-y-u.

La AWP como controladores de URL permite que las apps como music.example.com se registren como controladores de URL para URLs que coincidan con patrones como https://music.example.com, https://*.music.example.com o https://🎵.example.com, de modo que los vínculos desde fuera de la AWP (por ejemplo, desde una aplicación de mensajería instantánea o un cliente de correo electrónico) se abran en la AWP instalada en lugar de en una pestaña del navegador.

La AWP como controladores de URL consta de dos adiciones:

1. El miembro del manifiesto de la aplicación web "url_handlers".
2. El formato de archivo web-app-origin-association para validar asociaciones de URL dentro y fuera del alcance

Casos de uso sugeridos para AWP como controladores de URL

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

• Los sitios de transmisión de música o video, por lo que se deben abrir en la experiencia del reproductor de la app
• Los lectores de noticias o RSS que siguen o los que están suscritos a ellos se abren en el modo de lectura de la app.

Cómo usar las AWP como controladores de URL

Habilitación mediante about://flags

Para experimentar con las AWP como controladores de URL de forma local, sin un token de prueba de origen, habilita la marca #enable-desktop-pwas-url-handling en about://flags.

Precaución: La compatibilidad de las AWP como controladores de URL se limita al navegador predeterminado según la configuración del sistema operativo. Por ejemplo, se puede configurar Chrome como el navegador predeterminado siguiendo estas instructions.

El miembro del manifiesto de la app web "url_handlers"

Para asociar una AWP instalada con patrones de URL, estos patrones deben especificarse en el manifiesto de la aplicación web. Esto sucede mediante el miembro "url_handlers". Acepta un array de objetos con una propiedad origin, que es un string obligatorio que es un patrón para coincidencias de orígenes. Estos patrones pueden tener un prefijo de comodín (*) para incluir varios subdominios (como https://*.example.com). Esta app web podría controlar las URLs que coincidan con estos orígenes. Siempre se supone que el esquema es https://, pero debe mencionarse explícitamente.

En el extracto del manifiesto de una app web que aparece a continuación, se muestra cómo se puede configurar esto en el ejemplo de la AWP de música del párrafo introductorio. La segunda entrada con el comodín ("https://*.music.example.com") garantiza que la app también se active para https://www.music.example.com o posibles otros ejemplos como https://marketing-activity.music.example.com.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

Nota: En un entorno en línea, los vínculos cortos de https://🎵.example.com suelen redireccionarse a https://music.example.com. Este redireccionamiento de navegación no es una buena alternativa con respecto a situaciones sin conexión. Por lo tanto, la app debe registrarse para ambos orígenes.

El archivo web-app-origin-association

Dado que la AWP se encuentra en un origen diferente (music.example.com) que algunas de las URLs que debe controlar (p.ej., https://🎵.example.com), la app debe verificar la propiedad de esos otros orígenes. Esto sucede en un archivo web-app-origin-association alojado en los otros orígenes.

Nota: Las apps que quieran controlar URLs alojadas en el mismo origen que la AWP deben especificar las reglas de control en un archivo web-app-origin-association alojado en ese origen.

Este archivo debe contener JSON válido. La estructura de nivel superior es un objeto, con un miembro llamado "web_apps". Este miembro es un array de objetos y cada objeto representa una entrada para una app web única. Cada objeto contiene lo siguiente:

Campo	Descripción	Tipo	Predeterminado
"manifest"	(Obligatorio) String de URL del manifiesto de la aplicación web de la AWP asociada	string	N/A
"details"	Un objeto que contiene arrays de patrones de URL incluidos y excluidos (opcional)	object	N/A

Cada objeto "details" contiene lo siguiente:

Campo	Descripción	Tipo	Predeterminado
"paths"	Array de cadenas de ruta de acceso permitidas (opcional)	string[]	[]
"exclude_paths"	Array de cadenas de ruta no permitidas (opcional)	string[]	[]

A continuación, se muestra un ejemplo de un archivo web-app-origin-association para el ejemplo de AWP de música anterior. Se alojaría en el 🎵.example.com de origen y se establece la asociación con la AWP music.example.com, identificada por la URL del manifiesto de la app web.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Nota: El archivo web-app-origin-association es similar al archivo de dominio asociado de Apple, al archivo assetlinks.json de Android y al archivo windows-app-web-link de Windows. Lo que difiere es que el archivo web-app-origin-association no hace referencia a las AWP que usan un ID de app específico de la plataforma, sino por la URL del manifiesto de la app web.

¿Cuándo coincide una URL?

Una AWP coincide con una URL para controlarla si se cumplen las siguientes condiciones:

• La URL coincide con una de las cadenas de origen en "url_handlers".
• El navegador puede validar mediante el archivo web-app-origin-association respectivo que cada origen acepte permitir que esta app controle esa URL.

Acerca del descubrimiento de archivos web-app-origin-association

Para que el navegador descubra el archivo web-app-origin-association, los desarrolladores deben colocar el archivo web-app-origin-association en la carpeta /.well-known/, en la raíz de la app. Para que esto funcione, el nombre del archivo debe ser web-app-origin-association exactamente.

Demostración

Para probar las AWP como controladores de URL, asegúrate de configurar la marca del navegador como se describió anteriormente y, luego, instala la AWP en https://mandymsft.github.io/pwa/. Si observas el manifiesto de la app web, puedes ver que controla las URLs con los siguientes patrones de URL: https://mandymsft.github.io y https://luhuangmsft.github.io. Como esta última tiene un origen diferente (luhuangmsft.github.io) que la AWP, la AWP de mandymsft.github.io debe demostrar la propiedad, lo que sucede a través del archivo web-app-origin-association alojado en https://luhuangmsft.github.io/.well-known/web-app-origin-association.

Para comprobar si realmente funciona, envíate un mensaje de prueba a través de una app de mensajería instantánea de tu elección o un correo electrónico visto en un cliente de correo electrónico que no esté basado en la Web, como Mail en macOS. El correo electrónico o el mensaje de texto debe incluir los vínculos https://mandymsft.github.io o https://luhuangmsft.github.io. Ambas deberían abrirse en la AWP instalada.

Seguridad y permisos

El equipo de Chromium diseñó e implementó AWP como controladores de URL con los principios fundamentales definidos en el artículo Cómo controlar el acceso a funciones potentes de la plataforma web, incluidos el control del usuario, la transparencia y la ergonomía.

Control de usuarios

Si más de una AWP se registra como un controlador de URL para un patrón de URL determinado, se le pedirá al usuario que elija con qué AWP desea controlar el patrón (si corresponde). Las navegaciones que comienzan en una pestaña del navegador no se controlan con esta propuesta, sino que está dirigida explícitamente a las navegaciones que comienzan fuera del navegador.

Transparencia

Si, por algún motivo, no se puede completar correctamente la validación de la asociación necesaria durante la instalación de la AWP, el navegador no registrará la app como un controlador de URL activo para las URLs afectadas. Si los controladores de URL se implementan de forma incorrecta, se pueden usar para apropiarse de tráfico en los sitios web. Es por eso que el mecanismo de asociación de la app es una parte importante del esquema.

Las aplicaciones específicas de la plataforma ya pueden usar las APIs del sistema operativo para enumerar las aplicaciones instaladas en el sistema del usuario. Por ejemplo, las aplicaciones en Windows pueden usar la API de FindAppUriHandlersAsync para enumerar controladores de URL. Si las AWP se registran como controladores de URL a nivel del SO en Windows, su presencia será visible para otras aplicaciones.

Persistencia de permisos

Un origen podría modificar sus asociaciones con AWP en cualquier momento. Con frecuencia, los navegadores intentarán volver a validar las asociaciones de las apps web instaladas. Si el registro de un controlador de URL no se puede volver a validar porque los datos de asociación cambiaron o ya no están disponibles, el navegador quitará los registros.

Comentarios

El equipo de Chromium quiere conocer tu experiencia con las AWP como controladores de URLs.

Cuéntanos sobre el diseño de la API

¿Hay algo acerca de 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 especificaciones en el repositorio de GitHub correspondiente o agrega tus ideas a un problema existente.

Informar 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? Informa un error en new.crbug.com. Asegúrate de incluir tantos detalles como puedas, además de instrucciones simples para reproducir el contenido, y, luego, ingresa UI>Browser>WebAppInstalls en el cuadro Componentes. Glitch funciona muy bien para compartir repros rápidos y fáciles.

Muestra compatibilidad con la API

¿Planeas utilizar AWP como controladores de URL? La asistencia pública ayuda al equipo de Chromium a priorizar funciones y le muestra a otros proveedores de navegadores la importancia de admitirlas.

Envía un tweet a @ChromiumDev con el hashtag #URLHandlers y cuéntanos dónde y cómo lo usas.

Vínculos útiles

• Explicación pública
• Demostración | Fuente de la demostración
• Error de seguimiento de Chromium
• Entrada de ChromeStatus.com
• Componente de Blink: UI>Browser>WebAppInstalls
• Revisión de la etiqueta
• Documentación de Microsoft

Agradecimientos

Lu Huang y Mandy Chen del equipo de Microsoft Edge especificaron e implementar las AWP como controladores de URL. Joe Medley revisó este artículo. Imagen hero de Bryson Hammer en Unsplash.