Administración de ventanas

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

La ventana de la AWP

Ejecutar en tu propia ventana, administrada por tu AWP, tiene todas las ventajas y responsabilidades de cualquier ventana en ese sistema operativo, por ejemplo:

• Capacidad de cambiar el tamaño de la ventana y moverla 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 de pantalla dividida de Android
• Aparecen en conectores, barras de tareas y en el menú de pestaña alternativa en computadoras de escritorio y en listas de ventanas multitarea en dispositivos móviles.
• 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 estar posicionada en cualquier lugar 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, esta obtiene un tamaño de ventana predeterminado: 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 aplicación, 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 la 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 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 ningún evento para capturar el movimiento de la ventana, por lo que tu opción es consultar la posición con frecuencia.

Nota: En lugar de mover la ventana y cambiar su tamaño, puedes moverla relativamente y cambiar el tamaño con moveBy() y resizeBy().

Nota: En los dispositivos móviles, mover o cambiar el tamaño de la ventana no realizará ningún cambio en la pantalla.

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, si tu AWP está instalada en todos los navegadores, cuando navegues a una URL que esté fuera del alcance de tu manifiesto, el motor de navegador de la AWP renderizará un navegador integrado en la app dentro del contexto de la ventana.

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

• Aparecen 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, se relacionan con el 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.

Nota: Mientras el navegador de la app está en la pantalla, la AWP espera en segundo plano, como si otra ventana la estuviese obstruyendo.

En iOS y iPadOS, el navegador de la app usa SafariViewController, un motor de renderización de Safari aislado del almacenamiento de AWP. Por lo tanto, si el usuario tiene una sesión en Safari, esta no aparecerá en tu AWP, pero sí dentro de un navegador integrado en la app de la AWP.

Flujos de autorización

Muchos flujos de autenticación y autorización web implican redireccionar al usuario a una URL distinta en un origen distinto para adquirir un token que vuelva al origen de tu 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 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 un 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 fue el servidor de autenticación mientras se encontraba en el navegador de 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 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", "");
}

Cómo abrir ventanas nuevas

En computadoras, los usuarios pueden abrir más de una ventana de la misma AWP. Cada ventana será una forma de navegación diferente a la misma 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, Nueva ventana. Desde tu 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");
}

Llamar a open() desde una ventana de la AWP en iOS o iPadOS muestra null y no se abre una ventana. Cuando se abren ventanas nuevas en Android, se crea un nuevo navegador integrado en la app 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.

Advertencia: El segundo argumento de open() es el nombre de la ventana. Si el nombre que usaste ya está abierto, el motor reemplazará la ventana abierta con ese nombre con una nueva navegación. Si siempre deseas abrir una ventana nueva, debes usar diferentes valores de cadena para los nombres.

Las funciones open(), moveTo() y resizeTo() no necesitan el prefijo window. cuando escriben JavaScript, ya que window es el objeto global. Puedes llamar a moveTo(0, 0). Sin embargo, llamar a window.moveTo(0, 0) hace que el código sea más fácil de entender.

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 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 actualizar el título en cada ruta.

Nota: Para reducir el phishing dentro de las AWP, es posible que algunos navegadores de escritorio tengan medidas adicionales en el título de la ventana. Por ejemplo, si no usas el nombre de tu app en el título, es posible que el navegador agregue un prefijo con el nombre de tu AWP. Otros navegadores pueden renderizar el origen actual en la barra de título durante unos segundos cuando cambias el título para destacar por dónde navegó el usuario.

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 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 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.

Nota: En el capítulo Experimental, verás cómo puedes comenzar a usar las funciones experimentales.

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. ¿Y si pudiéramos diseñar la barra de título como queramos, con HTML, CSS e 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.

Nota: Las capacidades de superposición de controles de ventana y modo con pestañas definen nuevos valores para el miembro display del manifiesto. Para crear compatibilidad con todos los dispositivos, el grupo de manifiesto creó una forma de reemplazar la cadena de resguardo display, de modo que puedas especificar qué valor de display usar si la primera opción no está disponible. Obtén más información al respecto en Prepárate para los modos de visualización del futuro.

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.

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 presentaciones 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 precisamente 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.

En algunos navegadores, para llamar a window.getScreenDetails(), el usuario debe otorgar permiso a tus AWP.

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 del 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.

Nota: También te recomendamos verificar la API de Presentation para mostrar contenido web en dispositivos de presentación de gran tamaño, como proyectores y televisores conectados a la red.

Navegadores compatibles

• (47)
• (79)
• ×
• ×

Origen

Bloqueo de activación de pantalla

Imagina que estás en la cocina siguiendo una receta en tu tablet. Acabas de terminar de preparar los ingredientes. Tienes las manos desordenadas y vuelves a tu dispositivo para leer el siguiente paso. ¡Desastre! La pantalla se quedó negra. La API de Screen Wake Lock está disponible para ti y permite que la AWP evite que las pantallas se atenúen, suspendan o bloqueen, lo que permitirá que los usuarios se detengan, inicien, salgan y regresen 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 los teléfonos y las tablets, ofrecen un teclado en pantalla virtual para que el usuario pueda escribir cuando los elementos del formulario de tu AWP están en foco.

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

• Mostrar y ocultar el teclado virtual con las funciones navigator.virtualKeyboard.show() y navigator.virtualKeyboard.hide()
• Para indicarle al navegador que estás cerrando el teclado virtual por tu cuenta, establece navigator.virtualKeyboard.overlaysContent en true.
• Determina cuándo aparece y desaparece el teclado con el evento geometrychange de navigator.virtualKeyboard.
• Establecer la política de teclado virtual sobre la edición de elementos del host (mediante contenteditable) con el atributo HTML virtualkeyboardpolicy Una política te permite decidir si quieres que el navegador controle el teclado virtual automáticamente con el valor auto o si quieres que la secuencia de comandos lo controle 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

• Cómo administrar varias pantallas con la API de Multi-Screen Window Placement
• Modo de aplicación con pestañas para AWP
• Mantente activo con la API de Screen Wake Lock
• Control total con la API de VirtualTeclado
• Personaliza la superposición de controles de ventana de la barra de título de la AWP
• Cómo mostrar contenido en la barra de título