Administración de ventanas

Una AWP fuera del navegador administra su propia ventana. En este capítulo, comprenderás las APIs y las capacidades para administrar una ventana dentro del sistema operativo.

Ventana de la AWP

La ejecución en tu propia ventana, administrada por tu AWP, tiene todas las ventajas y responsabilidades de cualquier ventana en ese sistema operativo, como las siguientes:

  • La capacidad de cambiar el tamaño y mover la ventana en sistemas operativos multiventana, como Windows o ChromeOS
  • Compartir la pantalla con otras ventanas de apps, como en el modo de pantalla dividida de iPadOS o de Android
  • Aparece en los conectores, las barras de tareas y el menú de la pestaña alternativa en las computadoras de escritorio, y las listas de ventanas de tareas múltiples en los dispositivos móviles.
  • La capacidad de minimizar, mover la ventana entre pantallas y escritorios, y cerrarla en cualquier momento

Cómo mover la ventana y cambiar su tamaño

La ventana de la AWP puede ser de cualquier tamaño y posicionarse en cualquier parte de la pantalla en los sistemas operativos de escritorio. De forma predeterminada, cuando el usuario abre la AWP por primera vez después de la instalación, la AWP obtiene un tamaño de ventana predeterminado de un porcentaje de la pantalla actual, con una resolución máxima de 1920 x 1080 en la esquina superior izquierda de la pantalla.

El usuario puede mover y cambiar el tamaño de la ventana, y el navegador recordará la última preferencia, de modo que la próxima vez que el usuario abra la app, la ventana conservará el tamaño y la posición del uso anterior.

No hay forma de definir el tamaño y la posición preferidos de tu AWP dentro del manifiesto. Solo puedes cambiar la posición y el tamaño de la ventana con la API de JavaScript. Desde tu código, puedes mover y cambiar el tamaño de tu propia ventana de AWP con las funciones moveTo(x, y) y resizeTo(x, y) del objeto window.

Por ejemplo, puedes cambiar el tamaño y mover la ventana de la AWP cuando esta se cargue con lo siguiente:

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

Puedes consultar el tamaño y la posición actuales de la pantalla con el objeto window.screen. Además, puedes detectar cuándo se cambia el tamaño de la ventana mediante el evento resize del objeto window. No hay ningún evento para capturar el movimiento de la ventana, por lo que tu opción es consultar la posición con frecuencia.

Navegación a otros sitios

Si deseas enviar al usuario a un sitio externo que esté fuera del alcance de tu AWP, puedes hacerlo con un elemento HTML <a href> estándar. Para ello, usa location.href o abre una ventana nueva en plataformas compatibles.

Actualmente, en todos los navegadores, si tu AWP está instalada, cuando navegues a una URL que esté fuera del alcance de tu manifiesto, el motor del navegador de la AWP renderizará un navegador en la app dentro del contexto de la ventana.

Estas son algunas funciones de los navegadores integrados en la aplicación:

  • Se muestran sobre tu contenido.
  • Tienen una barra de URL estática que muestra el origen actual, el título de la ventana y un menú. Por lo general, tienen el tema del theme_color de tu manifiesto.
  • Desde el menú contextual, puedes abrir esa URL en el navegador.
  • Los usuarios pueden cerrar el navegador o regresar.

Un navegador integrado en la app en una AWP de computadora de escritorio cuando se navega por una URL que está fuera del alcance.

Un navegador integrado en la app en un iPhone cuando se explora una URL que está fuera del alcance de una AWP independiente

Un navegador en la app en Android cuando se navega por una URL que está fuera del alcance de una AWP independiente

Flujos de autorización

Muchos flujos de autenticación y autorización web implican redireccionar al usuario a una URL diferente en un origen diferente para adquirir un token que vuelva al origen de la AWP, por ejemplo, con OAuth 2.0.

En estos casos, el navegador de la app sigue el siguiente proceso:

  1. El usuario abre tu AWP y hace clic para acceder.
  2. Tu AWP redirecciona al usuario a una URL que está fuera del alcance de la AWP para que el motor de renderización abra un navegador dentro de la AWP.
  3. El usuario puede cancelar el navegador de la app y regresar a tu AWP en cualquier momento.
  4. El usuario accede al navegador de la app. El servidor de autenticación redirecciona al usuario al origen de la AWP y envía el token como un argumento.
  5. El navegador de la app se cierra automáticamente cuando detecta una URL que forma parte del alcance de la AWP.
  6. El motor redirecciona la navegación principal de la ventana de la AWP a la URL a la que se dirigió el servidor de autenticación cuando estaba en el navegador de la app.
  7. La AWP obtiene el token, lo almacena y renderiza la AWP.

Cómo forzar la navegación de un navegador

Si deseas forzar la apertura del navegador con una URL y no con un navegador de la app, puedes usar el destino _blank de los elementos <a href>. Esta opción solo funciona en AWP de escritorio; en dispositivos móviles, no es posible abrir un navegador con una URL.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

Abrir ventanas nuevas

En una computadora de escritorio, los usuarios pueden abrir más de una ventana de la misma AWP. Cada ventana mostrará una navegación diferente al mismo start_url, como si estuvieras abriendo dos pestañas del navegador con la misma URL. En el menú de la AWP, los usuarios pueden seleccionar Archivo y, luego, Ventana nueva. Desde el código de la AWP, puedes abrir una ventana nueva con la función open(). Consulta la documentación para obtener más detalles.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

La misma AWP instalada con varias ventanas abiertas en un sistema operativo de escritorio.

Si llamas a open() dentro de una ventana de AWP en iOS o iPadOS, se muestra null y no se abre una ventana. Cuando se abren nuevas ventanas en Android, se crea un nuevo navegador en la aplicación para la URL (incluso si la URL está dentro del alcance de tu AWP) que, por lo general, no activa una experiencia de navegación externa.

Título de la ventana

El elemento <title> se usaba principalmente con fines de SEO, ya que el espacio en una pestaña del navegador es limitado. Cuando pasas del navegador a la ventana en una AWP, todo el espacio de la barra de título está disponible.

Puedes definir el contenido de la barra de título:

  • De forma estática en tu elemento HTML <title>
  • Cambiar de forma dinámica la propiedad de cadena document.title en cualquier momento

En las AWP de escritorio, el título es esencial y se usa en la barra de título de la ventana y, a veces, en el administrador de tareas o en la selección de tareas múltiples. Si tienes una aplicación de una sola página, te recomendamos que actualices el título en cada ruta.

Modo de pestañas

Una función experimental, conocida como modo con pestañas, permitirá que tu AWP tenga un diseño basado en pestañas similar a un navegador web. En este caso, el usuario puede tener varias pestañas abiertas desde la misma AWP, pero todas juntas en la misma ventana del sistema operativo, como puedes ver en el siguiente video:

Puedes obtener más información sobre esta función experimental en Modo de aplicación con pestañas para AWP.

Superposición de controles de ventana

Mencionamos que puedes cambiar el título de la ventana si defines el valor del elemento <title> o de la propiedad document.title. Pero siempre es un valor de cadena. ¿Qué pasaría si pudiéramos diseñar la barra de título como quisiéramos, con HTML, CSS e imágenes? Aquí es donde aparece la superposición de controles de ventana, una nueva función experimental de las AWP de escritorio de Microsoft Edge y Google Chrome para computadoras.

Puedes obtener más información sobre esta función en Personaliza la superposición de controles de ventana de la barra de título de la AWP.

Con la superposición de controles de ventana, puedes renderizar contenido en la barra de título.

Administración de ventanas

Con varias pantallas, los usuarios querrán utilizar todo el espacio disponible para ellos. Por ejemplo:

  • Los editores gráficos de ventanas múltiples à la Gimp pueden colocar varias herramientas de edición en ventanas bien posicionadas.
  • Las mesas de operaciones virtuales pueden mostrar tendencias de mercados en varias ventanas, cualquiera de las cuales se puede ver en modo de pantalla completa.
  • Las apps de presentación de diapositivas pueden mostrar notas del orador en la pantalla principal interna y la presentación en un proyector externo.

La API de Window Management permite que las AWP hagan eso y mucho más.

Obteniendo detalles de la pantalla

La API de Window Management agrega un método nuevo, window.getScreenDetails(), que muestra un objeto con pantallas como un array inmutable de pantallas adjuntas. También hay un objeto activo al que se puede acceder desde ScreenDetails.currentScreen, que corresponde al window.screen actual.

El objeto que se muestra también activa un evento screenschange cuando cambia el array screens. (Esto no sucede cuando se cambian los atributos de las pantallas individuales). Las pantallas individuales, ya sea window.screen o una pantalla en el array screens, también activan un evento change cuando cambian sus atributos.

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].pointerTypes;  // e.g. ["touch"]
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

Si el usuario o el sistema operativo mueven la ventana de tu AWP de una pantalla a otra, también se activará un evento currentscreenchange desde el objeto de detalles de la pantalla.

Bloqueo de activación de pantalla

Imagina que estás en la cocina siguiendo una receta en tu tableta. Acabas de terminar de preparar los ingredientes. Tus manos son un desastre y vuelves a tu dispositivo para leer el siguiente paso. ¡Desastre! ¡La pantalla se apagó! La API de Screen Wake Lock está disponible para ti y permite que una AWP evite que las pantallas se atenúen, se suspendan o se bloqueen, lo que permite a los usuarios detener, iniciar, salir y regresar sin preocupaciones.

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

Teclado virtual

Los dispositivos táctiles, como teléfonos y tablets, ofrecen un teclado virtual en pantalla para que el usuario pueda escribir cuando los elementos del formulario de tu AWP estén enfocados.

Gracias a la API de VirtualKeyboard, tu AWP ahora puede tener más control del teclado en plataformas compatibles mediante la interfaz navigator.virtualKeyboard, incluidas las siguientes:

  • Mostrar y ocultar el teclado virtual con las funciones navigator.virtualKeyboard.show() y navigator.virtualKeyboard.hide()
  • Indica al navegador que te encargas de cerrar el teclado virtual por tu cuenta. Para ello, establece navigator.virtualKeyboard.overlaysContent en true.
  • Saber cuándo aparece y desaparece el teclado con el evento geometrychange de navigator.virtualKeyboard.
  • Si estableces la política de teclado virtual para editar elementos del host (mediante contenteditable) con el atributo HTML virtualkeyboardpolicy. Una política te permite decidir si quieres que el navegador gestione el teclado virtual automáticamente con el valor auto o si quieres que lo maneje tu secuencia de comandos con el valor manual.
  • Usar variables de entorno de CSS para obtener información sobre la apariencia del teclado virtual, como keyboard-inset-height y keyboard-inset-top

Puedes obtener más información sobre esta API en Control total con la API de VirtualKeyboard.

Recursos