Administrar varias pantallas con la API de ubicación de ventanas multipantalla

Obtenga información sobre las pantallas conectadas y la posición de las ventanas en relación con esas pantallas.

14 de septiembre de 2020
Actualizado 14 de septiembre de 2020

La API de ubicación de ventanas multipantalla le permite enumerar las pantallas conectadas a su máquina y colocar ventanas en pantallas específicas.

Casos de uso sugeridos

Ejemplos de sitios que pueden usar esta API incluyen:

• Editores gráficos de ventanas múltiples a la
  Cañutillo Puede colocar varias herramientas de edición en ventanas colocadas con precisión.
• Las mesas de operaciones virtuales pueden mostrar las tendencias del mercado en múltiples ventanas, cualquiera de las cuales se puede ver en modo de pantalla completa.
• Las aplicaciones de presentación de diapositivas pueden mostrar notas del orador en la pantalla principal interna y la presentación en un proyector externo.

Estado actual

Cómo utilizar la API de ubicación de ventanas multipantalla

Habilitación a través de chrome: // flags

Para experimentar con la API de ubicación de ventanas multipantalla localmente, sin un token de prueba de origen, habilite la #enable-experimental-web-platform-features bandera en chrome://flags.

Habilitar el apoyo durante la fase de prueba de origen

A partir de Chrome 86, la API de ubicación de ventanas multipantalla estará disponible como prueba de origen en Chrome. Se espera que la prueba de origen finalice en Chrome 88 (24 de febrero de 2021).

Las pruebas de Origin le permiten probar nuevas funciones y brindar comentarios sobre su usabilidad, practicidad y efectividad a la comunidad de estándares web. Para obtener más información, consulte el Guía de pruebas de Origin para desarrolladores web. Para inscribirse en esta u otra prueba de origen, visite el página de registro.

Regístrese para la prueba de origen

1. Solicita un token por tu origen.
2. Agrega el token a tus páginas. Hay dos maneras de hacerlo:
   • Agregar un origin-trial <meta> etiqueta al encabezado de cada página. Por ejemplo, esto puede verse así:
     <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
   • Si puede configurar su servidor, también puede agregar el token usando un Origin-Trial Encabezado HTTP. El encabezado de respuesta resultante debería verse así:
     Origin-Trial: TOKEN_GOES_HERE

El problema

El enfoque probado en el tiempo para controlar las ventanas,
Window.open(), desafortunadamente desconoce las pantallas adicionales. Si bien algunos aspectos de esta API parecen un poco arcaicos, como su
windowFeatures
DOMString parámetro, sin embargo, nos ha servido bien a lo largo de los años. Para especificar una ventana
posición, puede pasar las coordenadas como left y top (o screenX y screenY respectivamente) y pasar el deseado
Talla como
width y height (o innerWidth y innerHeight respectivamente). Por ejemplo, para abrir una ventana de 400 × 300 a 50 píxeles de la izquierda y 50 píxeles de la parte superior, este es el código que puede utilizar:

const popup = window.open(
"https://example.com/",
"My Popup",
"left=50,top=50,width=400,height=300"
);

Puede obtener información sobre la pantalla actual mirando el
window.screen propiedad, que devuelve un Screen objeto. Esta es la salida en mi MacBook Air 13 ″:

window.screen;

Como la mayoría de las personas que trabajan en tecnología, he tenido que adaptarme a la nueva realidad laboral y montar mi propia oficina en casa. El mío se ve como en la foto de abajo (si está interesado, puede leer el
detalles completos sobre mi configuración). El iPad al lado de mi MacBook Air está conectado a la computadora portátil a través de
Sidecar, así que cuando lo necesito, puedo convertir rápidamente el iPad en una segunda pantalla.

Si quiero aprovechar la pantalla más grande, puedo colocar la ventana emergente del ejemplo de código anterior en la segunda pantalla. Lo hago así:

popup.moveTo(2500, 50);

Esta es una suposición aproximada, ya que no hay forma de conocer las dimensiones de la segunda pantalla. La información de window.screen solo cubre la pantalla incorporada, pero no la pantalla del iPad. El reportado width de la pantalla incorporada fue 1680 píxeles, así que moviéndonos a
2500 píxeles podría trabajar para cambiar la ventana al iPad, ya que yo Sucede que sé que se encuentra a la derecha de mi MacBook Air. ¿Cómo puedo hacer esto en el caso general? Resulta que hay una forma mejor que adivinar. De esa forma es la API de ubicación de ventanas multipantalla.

Detección de características

Para comprobar si la API de ubicación de ventanas multipantalla es compatible, utilice:

if ("getScreens" in window) {
}

los window-placement permiso

Antes de poder utilizar la API de ubicación de ventanas multipantalla, debo pedir permiso al usuario para hacerlo. El nuevo window-placement El permiso se puede consultar con el
API de permisos al igual que:

let granted = false;
try {
const { state } = await navigator.permissions.query({ name: "window-placement" });
granted = state === "granted";
} catch {
}

El navegador
lata
elija mostrar la solicitud de permiso de forma dinámica en el primer intento de utilizar cualquiera de los métodos de la nueva API. Siga leyendo para obtener más información.

los isMultiScreen() método

Para utilizar la API de ubicación de ventanas multipantalla, primero llamaré al
Window.isMultiScreen() método. Devuelve una promesa que se resuelve con true o false, dependiendo de si hay una o varias pantallas conectadas actualmente a la máquina. Para mi configuración, vuelve true.

await window.isMultiScreen();

los getScreens() método

Ahora que sé que la configuración actual es multipantalla, puedo obtener más información sobre la segunda pantalla usando Window.getScreens(). Devuelve una promesa que se resuelve con una matriz de Screen objetos. En mi MacBook Air 13 con un iPad conectado, esto devuelve una matriz de dos Screen objetos:

await window.getScreens();

Observe cómo el valor de left para el iPad comienza en 1680, que es exactamente el width de la pantalla incorporada. Esto me permite determinar exactamente cómo están dispuestas lógicamente las pantallas (una al lado de la otra, una encima de la otra, etc.). También hay datos ahora para cada pantalla para mostrar si es un internal uno y si es un primary uno. Tenga en cuenta que la pantalla incorporada
no es necesariamente la pantalla principal. Ambos también tienen id, que, si persiste en las sesiones del navegador, permite restaurar la distribución de las ventanas.

los screenschange evento

Lo único que falta ahora es una forma de detectar cuándo cambia la configuración de mi pantalla. Un nuevo evento
screenschange, hace exactamente eso: dispara cada vez que se modifica la constelación de la pantalla. (Tenga en cuenta que «pantallas» está en plural en el nombre del evento). También se activa cuando cambia la resolución de una de las pantallas conectadas o cuando una pantalla nueva o existente está (física o virtualmente en el caso de Sidecar) conectada o desconectada .

Tenga en cuenta que debe buscar los detalles de la nueva pantalla de forma asincrónica, screenschange El evento en sí no proporciona estos datos. Esto puede cambio en el futuro. Por ahora, puede buscar los detalles de la pantalla llamando window.getScreens() Como se muestra abajo.

window.addEventListener('screenschange', async (event) => {
console.log('I am there, but mostly useless', event);
const details = await window.getScreens();
});

Nuevas opciones de pantalla completa

Hasta ahora, podía solicitar que los elementos se mostraran en modo de pantalla completa a través del nombre apropiado
requestFullScreen()

método. El método toma un options parámetro donde puedes pasar
FullscreenOptions. Hasta ahora, su única propiedad ha sido
navigationUI. La API de ubicación de ventanas multipantalla agrega una nueva screen propiedad que le permite determinar en qué pantalla iniciar la vista de pantalla completa. Por ejemplo, si desea que la pantalla principal sea de pantalla completa:

try {
const primaryScreen = (await getScreens()).filter((screen) => screen.primary)[0];
await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
console.error(err.name, err.message);
}

Polyfill

No es posible rellenar la API de ubicación de ventanas multipantalla, pero puede ajustar su forma para poder codificar exclusivamente con la nueva API:

if (!("getScreens" in window)) {
window.getScreens = async () => [window.screen];
window.isMultiScreen = async () => false;
}

Los otros aspectos de la API: el onscreenschange evento y el screen propiedad de la
FullscreenOptions: Los navegadores no compatibles nunca dispararían o ignorarían silenciosamente, respectivamente.

Manifestación

Si eres como yo, vigilas de cerca el desarrollo de las distintas criptomonedas. (En realidad no lo hago, pero, por el bien de este artículo, supongo que sí.) Para realizar un seguimiento de las criptomonedas que poseo, he desarrollado una aplicación web que me permite observar los mercados en toda la vida. situaciones, como desde la comodidad de mi cama, donde tengo una configuración de pantalla única decente.

Al tratarse de criptografía, los mercados pueden volverse agitados en cualquier momento. Si esto sucediera, puedo moverme rápidamente a mi escritorio donde tengo una configuración de múltiples pantallas. Puedo hacer clic en la ventana de cualquier moneda y ver rápidamente los detalles completos en una vista de pantalla completa en la pantalla opuesta. A continuación se muestra una foto reciente mía tomada durante la última Baño de sangre YCY. Me tomó completamente desprevenido y me dejó
con mis manos en mi cara.

Puedes jugar con el manifestación incrustado a continuación, o ver su código fuente en falla.

Seguridad y permisos

El equipo de Chrome ha diseñado e implementado la API de ubicación de ventanas multipantalla utilizando los principios básicos definidos en Controlar el acceso a las potentes funciones de la plataforma web, incluido el control del usuario, la transparencia y la ergonomía. La API de ubicación de ventanas multipantalla expone nueva información sobre las pantallas conectadas a un dispositivo, lo que aumenta la superficie de huellas dactilares de los usuarios, especialmente aquellos con varias pantallas conectadas constantemente a sus dispositivos. Como mitigación de este problema de privacidad, las propiedades de la pantalla expuesta se limitan al mínimo necesario para los casos de uso de ubicación común. Se requiere permiso de usuario para que los sitios obtengan información de múltiples pantallas y coloquen ventanas en otras pantallas.

Control de usuario

El usuario tiene el control total de la exposición de su configuración. Pueden aceptar o rechazar la solicitud de permiso y revocar un permiso otorgado previamente a través de la función de información del sitio en el navegador.

Transparencia

El hecho de que se haya otorgado el permiso para usar la API de ubicación de ventanas multipantalla se expone en la información del sitio del navegador y también se puede consultar a través de la API de permisos.

Persistencia de permisos

El navegador conserva las concesiones de permisos. El permiso se puede revocar a través de la información del sitio del navegador.

Realimentación

El equipo de Chrome desea conocer sus experiencias con la API de ubicación de ventanas multipantalla.

Cuéntanos sobre el diseño de la API

¿Hay algo en la API que no funciona como esperaba? ¿O faltan métodos o propiedades que necesita para implementar su idea? ¿Tiene alguna pregunta o comentario sobre el modelo de seguridad?

• Presentar un problema de especificaciones en el correspondiente Repositorio de GitHubo agregue sus pensamientos a un problema existente.

Informar un problema con la implementación

¿Encontraste un error con la implementación de Chrome? ¿O la implementación es diferente de la especificación?

• Presentar un error en new.crbug.com. Asegúrese de incluir todos los detalles que pueda, instrucciones simples para reproducir e ingrese Blink>WindowDialog en el
  Componentes caja. Falla funciona muy bien para compartir repros rápidos y fáciles.

Mostrar apoyo a la API

¿Está pensando en utilizar la API de ubicación de ventanas multipantalla? Su soporte público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es brindarles soporte.

• Comparta cómo planea usarlo en el Hilo del discurso de la WICG
• Enviar un tweet a @Cromodev con el #WindowPlacement hashtag y háganos saber dónde y cómo lo está usando.
• Solicite a otros proveedores de navegadores que implementen la API.

Enlaces Útiles

Quiero ir mas profundo

Agradecimientos

La especificación de la API de ubicación de ventanas multipantalla fue editada por
Víctor Costan y
Joshua Bell. La API fue implementada por
Mike Wasserman. Este artículo fue revisado por
Joe Medley,
François Beauforty Kayce vascos. Gracias a Laura Torrent Puig por las fotos.