Una AWP fuera del navegador administra su propia ventana. Obtén información sobre las APIs y las funciones para administrar una ventana dentro del sistema operativo.
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 mover y cambiar el tamaño de la ventana en 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 de 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 ubicada 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. 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 y cambiar el tamaño de tu propia ventana de la AWP 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 se carga 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.
En lugar de mover y cambiar el tamaño de la ventana de forma absoluta, puedes moverla de forma relativa y cambiar su tamaño con moveBy() y resizeBy().
Explorar otros sitios
Si deseas enviar al usuario a un sitio externo que está fuera del alcance de tu PWA, puedes hacerlo con un elemento HTML <a href> estándar. Usa location.href
o abre una ventana nueva en plataformas compatibles.
Cuando visitas una URL que está fuera del alcance de tu manifiesto, el motor de navegador de tu AWP renderiza un navegador integrado en la app dentro del contexto de tu ventana.
Estas son algunas de las funciones de los navegadores integrados en la aplicación:
- Aparecerán sobre tu contenido.
- Tienen una barra de direcciones estática que muestra el origen actual, el título de la ventana y un menú. Por lo general, tienen el tema del
theme_colorde tu manifiesto. - En el menú contextual, puedes abrir esa URL en el navegador.
- Los usuarios pueden cerrar el navegador o volver atrás.
Mientras el navegador integrado en la app está en la pantalla, tu AWP espera en segundo plano, como si otra ventana la estuviera ocultando.
Flujos de autorización
Muchos flujos de autenticación y autorización web requieren redireccionar al usuario a una URL diferente en un origen diferente para adquirir un token que se devuelve al origen de tu AWP, como con OAuth 2.0.
En estos casos, el navegador integrado en la app sigue este proceso:
- El usuario abre tu AWP y hace clic en Acceder.
- 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 integrado en la AWP.
- El usuario puede cancelar el navegador integrado en la app y volver a tu AWP en cualquier momento.
- El usuario accede al navegador integrado en la aplicación. El servidor de autenticación redirecciona al usuario al origen de tu PWA y envía el token como argumento.
- El navegador integrado en la app se cierra cuando detecta una URL que forma parte del alcance de la AWP.
- 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.
- Tu AWP obtiene el token, lo almacena y lo renderiza.
Cómo forzar la navegación de un navegador
Si deseas 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. En los 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 tiene una navegación diferente para el 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 tu AWP, puedes abrir una ventana nueva con la función open().
function openNewWindow() {
window.open("/", "new-window", "width=600,height=600");
}
Cuando llamas a open() dentro de una ventana de la AWP en iOS o iPadOS, se muestra null
y no se abre una ventana. Si abres ventanas nuevas en Android, se crea un 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 usaba principalmente con fines de SEO, ya que el espacio dentro de una pestaña del navegador es limitado. Cuando pasas del navegador a la ventana de una AWP, tienes disponible todo el espacio de la barra de título.
Puedes definir el contenido de la barra del título:
- De forma estática en tu elemento
<title>HTML - Cambiar de forma dinámica la propiedad de cadena
document.titleen cualquier momento
En las AWP para computadoras, 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 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
El modo con pestañas es una función experimental que permite que tu AWP tenga un diseño basado en pestañas, similar al de un navegador web. En este caso, el usuario puede abrir varias pestañas en la misma AWP, pero todas están vinculadas en la misma ventana del sistema operativo.
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. Pero siempre es un valor de cadena. ¿Qué pasaría si pudiéramos diseñar la barra del título con HTML, CSS y imágenes?
La superposición de controles de ventana, una función experimental en Microsoft Edge y Google Chrome para las AWP para computadoras de escritorio, puede ser útil.
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 quieren usar todo el espacio disponible. Por ejemplo:
- Los editores de gráficos de varias ventanas, como Gimp, pueden colocar varias herramientas de edición en ventanas posicionadas con precisión.
- Las mesas de operaciones virtuales pueden mostrar las tendencias del mercado en varias ventanas, cada una 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 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 activa 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 una AWP evite 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 ellas 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.
Con la API de VirtualKeyboard, tu AWP puede tener más control del teclado en plataformas compatibles con la interfaz navigator.virtualKeyboard.
- Muestra y oculta el teclado virtual con
navigator.virtualKeyboard.show()ynavigator.virtualKeyboard.hide(). - Para indicarle al navegador que tú cerrarás el teclado virtual, establece
navigator.virtualKeyboard.overlaysContentigual atrue. - Conoce cuándo aparece y desaparece el teclado con el evento
geometrychange. - Para establecer la política del teclado virtual en la edición de elementos del host, configura
contenteditablecomoautoomanual, con el atributo HTMLvirtualkeyboardpolicy. Una política te permite decidir si deseas que el navegador (auto) o tu secuencia de comandos (manual) controlen automáticamente el teclado virtual. - Usa variables de entorno de CSS para obtener información sobre el aspecto del teclado virtual, como
keyboard-inset-heightykeyboard-inset-top.
Obtén más información sobre esta API en Control total con la API de VirtualKeyboard.