Controlar direcciones URL en aplicaciones web progresivas

  • Artículo
  • Tiempo de lectura: 3 minutos

Las aplicaciones nativas de muchos sistemas operativos se pueden asociar con direcciones URL. Pueden solicitar que se inician, en lugar del explorador, cuando se activan las direcciones URL asociadas.

Las aplicaciones web progresivas también pueden controlar las direcciones URL de la misma manera y, al hacerlo, pueden crear una experiencia más atractiva.

Nota

Por el momento, la navegación en la página del explorador no desencadena el PWA de direcciones URL.

Habilitar el control de direcciones URL

El control de direcciones URL sigue siendo experimental, para habilitarlo:

  1. Vaya a edge://flags en Microsoft Edge.

  2. Seleccione Marcas de búsqueda y escriba "Control de direcciones URL".

  3. Seleccione Reinicio > habilitado > predeterminado.

    Habilite el experimento api de control de direcciones URL.

El control de direcciones URL también es una prueba de origen en Microsoft Edge. Obtenga información sobre cómo inscribir el sitio en una versión de prueba de origen.

Definir qué direcciones URL controla la aplicación

Lo primero que debe hacer es declarar qué direcciones URL controla la aplicación. Esto se realiza en el archivo de manifiesto de la aplicación,mediante el url_handlers miembro de la matriz.

Cada entrada de la url_handlers matriz contiene una origin cadena, que es un patrón para los orígenes que coinciden.

{
    "url_handlers": [
        {
            "origin": "https://contoso.com"
        },
        {
            "origin": "https://*.contoso.com"
        },
        {
            "origin": "https://conto.so"
        }
    ]
}

En el ejemplo anterior, la aplicación se registra para controlar direcciones URL que tienen sus orígenes establecidos en o en cualquiera de sus contoso.com subdominios, así como conto.so .

Comprobar la propiedad de origen

Microsoft Edge comprobar la propiedad del PWA de las direcciones URL manejadas para iniciar correctamente la aplicación. Esto es necesario cuando la dirección URL y el PWA están en el mismo origen y cuando no lo están. En la mayoría de los casos, PWA controlará las direcciones URL que tienen el mismo origen, pero esto no es necesario.

La propiedad de origen se establece con el archivo JSON, que Microsoft Edge usa para validar el protocolo de enlace entre el PWA web-app-origin-association y la dirección URL.

Tomemos el ejemplo de un PWA hospedado al https://app.contoso.com intentar controlar y las direcciones https://contoso.com https://partnerapp.com URL.

  • Para establecer la PWA propiedad del origen, el siguiente contenido JSON debe estar contoso.com disponible en https://contoso.com/.well-known/web-app-origin-association .

    {
    "web_apps": [
        {
            "manifest": "https://app.contoso.com/manifest.json",
            "details": {
                "paths": [
                    "/*"
                ]
            }
        }
    ]
}

  • Para establecer la PWA propiedad del origen, el mismo contenido JSON debe estar partnerapp.com disponible en https://partnerapp.com/.well-known/web-app-origin-association .

    {
    "web_apps": [
        {
            "manifest": "https://app.contoso.com/manifest.json",
            "details": {
                "paths": [
                    "/*"
                ]
            }
        }
    ]
}

Para obtener más información acerca de los miembros válidos en web-app-origin-association , vea el explicador de controladores de direcciones URL.

Probar el control de direcciones URL

Probar el control de direcciones URL de la aplicación desde un explorador web no funcionará, ya que la navegación desde la página del explorador no desencadena el control de direcciones URL en el nivel del sistema operativo.

Para probar la característica, envíate una dirección URL en una aplicación de mensaje de chat o un cliente de correo electrónico de escritorio como Windows Correo. También puedes usar la aplicación Windows ejecutar:

  • Presione Windows logo key + R .
  • Escribe una dirección URL que controla la aplicación.
  • Presione Enter .

Nota

Por el momento, solo los PWA que se instalaron desde el explorador del sistema predeterminado pueden controlar direcciones URL.

Demostración

DevTools Sugerencias es un PWA que controla las direcciones URL en su propio dominio para que la aplicación se abra en lugar del sitio web cuando se usa una.

Para probar el control de direcciones URL en DevTools Sugerencias:

Windows sabe que la aplicación está registrada para controlar esta dirección URL y te pide que elijas qué aplicación quieres usar. Selecciona devTools Sugerencias aplicaciones. También puede seleccionar Recordar mi elección para evitar ver este cuadro de diálogo cada vez.

Selección de una aplicación para controlar direcciones URL en Windows.

La aplicación se inicia y muestra la página de sugerencias.

Puede encontrar el código fuente en GitHub. En concreto, la aplicación registra las direcciones URL manejadas en el archivo manifest.json y el sitio web establece la propiedad de la aplicación en el archivo web-app-origin-association.

Consulte también