Administración de ventanas

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

La ventana de la AWP

Ejecutarse 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 los sistemas operativos multiventana, como Windows o ChromeOS
  • Compartir la pantalla con otras ventanas de la app, como en el modo dividido de iPadOS o el modo de pantalla dividida de Android
  • Aparece en las estaciones de carga, las barras de tareas y el menú Alt-Tab en computadoras de escritorio, y en las listas de ventanas de varias tareas en dispositivos móviles.
  • La capacidad de minimizar, mover la ventana entre pantallas y escritorios, y cerrarla en cualquier momento

Cómo mover y cambiar el tamaño de la ventana

La ventana de la AWP puede tener cualquier tamaño y ubicarse en cualquier parte de la pantalla en los sistemas operativos para computadoras de escritorio. De forma predeterminada, cuando el usuario abre la AWP por primera vez después de la instalación, esta obtiene un tamaño de ventana predeterminado de un porcentaje de la pantalla actual, con una resolución máxima de 1920 × 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 retendrá 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 en el 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 tu propia ventana de AWP y cambiar su tamaño con las funciones moveTo(x, y) y resizeTo(x, y) del objeto window.

Por ejemplo, puedes cambiar el tamaño de la ventana de la AWP y moverla 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. Puedes detectar cuándo se cambia el tamaño de la ventana con el evento resize del objeto window. No hay un 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, usando location.href o abriendo una ventana nueva en plataformas compatibles.

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

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

  • Aparecerán 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.
  • En el menú contextual, puedes abrir esa URL en el navegador.
  • Los usuarios pueden cerrar el navegador o volver atrás.

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

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

Un navegador integrado 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 distinta en un origen diferente para adquirir un token que regrese al origen de tu AWP, por ejemplo, con OAuth 2.0.

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

  1. El usuario abre tu AWP y hace clic en el botón de acceso.
  2. La AWP redirecciona al usuario a una URL que está fuera del alcance de la AWP, de modo que el motor de renderización abra un navegador integrado en la app.
  3. El usuario puede cancelar el navegador integrado en la app y volver 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 tu AWP y envía el token como argumento.
  5. El navegador integrado en la app se cierra cuando detecta una URL que forma parte del alcance de la AWP.
  6. El motor redirecciona la navegación de la ventana principal de la AWP a la URL a la que se dirigió el servidor de autenticación mientras estaba en el navegador integrado en la app.
  7. La AWP obtiene el token, lo almacena y lo renderiza.

Cómo forzar la navegación de un navegador

Si quieres forzar la apertura del navegador con una URL y no con un navegador integrado en la app, puedes usar el objetivo _blank de los elementos <a href>. Esto solo funciona en AWP para computadoras de escritorio. En dispositivos móviles, no hay opción para abrir un navegador con una URL.

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

Cómo abrir ventanas nuevas

En computadoras, los usuarios pueden abrir más de una ventana de la misma AWP. Cada ventana será una navegación diferente al mismo start_url, como si abrieras dos pestañas del navegador de la misma URL. En el menú de la AWP, los usuarios pueden seleccionar File y, luego, New window. 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 información.

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

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

Llamar a open() dentro de una ventana de la AWP en iOS o iPadOS muestra null y no abre una ventana. Si abres ventanas nuevas en Android, se crea un nuevo navegador integrado en la app para la URL, incluso si esta se encuentra 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 utilizó principalmente con fines de SEO, ya que el espacio dentro de la pestaña del navegador es limitado. Cuando pasas del navegador a tu ventana en una AWP, tendrás todo el espacio de la barra de título a tu disposición.

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

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

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

Modo con 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 al de 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 se puede 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 la ventana

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

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 usar todo el espacio disponible para ellos. Por ejemplo:

  • Los editores de gráficos multiventana en Gimp pueden colocar varias herramientas de edición en ventanas posicionadas de forma precisa.
  • Las mesas de operaciones virtuales pueden mostrar las tendencias del mercado en múltiples ventanas, pero cualquiera de ellas 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 administración de ventanas permite que los PWA hagan eso y mucho más.

Cómo obtener 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 en vivo 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 en 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].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 lo siguiente: estás en la cocina siguiendo una receta en tu tablet. Acabas de preparar los ingredientes. Tus manos están sucias y vuelves a mirar el dispositivo para leer el siguiente paso. ¡Desastre! La pantalla se puso negra. La API de Screen Wake Lock está disponible para que las AWP eviten que las pantallas se atenúen, entren en suspensión o se bloqueen, lo que permite que los usuarios las detengan, inicien, abandonen y vuelvan a usar 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 se enfoquen los elementos de formulario de tu AWP.

Gracias a la API de VirtualKeyboard, tu AWP ahora puede tener más control del teclado en plataformas compatibles con la interfaz navigator.virtualKeyboard, lo que incluye lo siguiente:

  • Ocultar y mostrar el teclado virtual con las funciones navigator.virtualKeyboard.show() y navigator.virtualKeyboard.hide()
  • Indicar al navegador que tú te encargarás de cerrar el teclado virtual configurando navigator.virtualKeyboard.overlaysContent igual a true
  • Saber cuándo aparece y desaparece el teclado con el evento geometrychange de navigator.virtualKeyboard
  • Configura la política de teclado virtual en la edición de elementos del host (con contenteditable) con el atributo HTML virtualkeyboardpolicy. Una política te permite decidir si quieres que el navegador controle automáticamente el teclado virtual con el valor auto o que lo controle 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