विंडो मैनेजमेंट एपीआई की मदद से कई डिसप्ले मैनेज करना

कनेक्ट किए गए डिसप्ले के बारे में जानकारी पाना और उन डिसप्ले के हिसाब से विंडो की पोज़िशन तय करना.

Thomas Steiner

Window Management API

Window Management API की मदद से, अपनी मशीन से कनेक्ट किए गए डिसप्ले की सूची बनाई जा सकती है और विंडो को खास स्क्रीन पर रखा जा सकता है.

इस्तेमाल के सुझाए गए उदाहरण

इस एपीआई का इस्तेमाल करने वाली साइटों के उदाहरणों में ये शामिल हैं:

• Gimp जैसे कई विंडो वाले ग्राफ़िक एडिटर, बदलाव करने वाले अलग-अलग टूल को सही जगह पर रख सकते हैं.
• वर्चुअल ट्रेडिंग डेस्क, मार्केट के रुझानों को कई विंडो में दिखा सकते हैं. इनमें से किसी भी विंडो को फ़ुलस्क्रीन मोड में देखा जा सकता है.
• स्लाइड शो वाले ऐप्लिकेशन, डिवाइस की मुख्य स्क्रीन पर प्रज़ेंटर के नोट और बाहरी प्रोजेक्टर पर प्रज़ेंटेशन दिखा सकते हैं.

Window Management API का इस्तेमाल करने का तरीका

समस्या

विंडो को कंट्रोल करने का समय-समय पर आज़माया गया तरीका, Window.open(), माफ़ करें, यह अन्य स्क्रीन के बारे में नहीं जानता. इस एपीआई के कुछ पहलू थोड़े पुराने लगते हैं. जैसे, इसका windowFeatures DOMString पैरामीटर. इसके बावजूद, यह एपीआई पिछले कई सालों से हमारी मदद कर रहा है. किसी विंडो की पोज़िशन तय करने के लिए, निर्देशांक को left और top (या screenX और screenY) के तौर पर पास किया जा सकता है. साथ ही, अपनी पसंद के साइज़ को width और height (या innerWidth और innerHeight) के तौर पर पास किया जा सकता है. उदाहरण के लिए, बाईं ओर 50 पिक्सल और सबसे ऊपर 50 पिक्सल पर, 400×300 विंडो खोलने के लिए, इस कोड का इस्तेमाल किया जा सकता है:

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

window.screen प्रॉपर्टी की मदद से, मौजूदा स्क्रीन के बारे में जानकारी पाई जा सकती है. यह प्रॉपर्टी, Screen ऑब्जेक्ट दिखाती है. मेरे MacBook Pro 13″ पर यह आउटपुट दिखता है:

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

टेक्नोलॉजी से जुड़े ज़्यादातर लोगों की तरह, मुझे भी काम करने के नए तरीके के हिसाब से अपने आपको ढालना पड़ा है. साथ ही, मैंने अपने घर में एक निजी ऑफ़िस भी सेट अप किया है. मेरा सेटअप नीचे दी गई फ़ोटो जैसा दिखता है. अगर आपको इस बारे में ज़्यादा जानकारी चाहिए, तो मेरे सेटअप के बारे में पूरी जानकारी पढ़ें. मेरे MacBook के बगल में मौजूद iPad, Sidecar की मदद से लैपटॉप से कनेक्ट है. इसलिए, जब भी ज़रूरत पड़े, मैं iPad को दूसरी स्क्रीन में तुरंत बदल सकता हूं.

अगर मुझे बड़ी स्क्रीन का फ़ायदा लेना है, तो ऊपर दिए गए कोड सैंपल में मौजूद पॉप-अप को दूसरी स्क्रीन पर दिखाया जा सकता है. मैं इसे इस तरह करता/करती हूं:

popup.moveTo(2500, 50);

यह अनुमानित अनुमान है, क्योंकि दूसरी स्क्रीन के डाइमेंशन का पता लगाने का कोई तरीका नहीं है. window.screen से मिली जानकारी सिर्फ़ डिवाइस में पहले से मौजूद स्क्रीन पर लागू होती है, न कि iPad की स्क्रीन पर. डिवाइस में पहले से मौजूद स्क्रीन का width रिपोर्ट किया गया 1680 पिक्सल था. इसलिए, 2500 पिक्सल पर ले जाने से, हो सकता है कि विंडो को iPad पर शिफ़्ट किया जा सके, क्योंकि मुझे पता है कि यह मेरे MacBook की दाईं ओर है. आम तौर पर, इसे कैसे किया जा सकता है? हालांकि, अनुमान लगाने के बजाय, एक बेहतर तरीका है. यह तरीका, Window Management API है.

फ़ीचर का पता लगाना

यह देखने के लिए कि Window Management API काम करता है या नहीं, इनका इस्तेमाल करें:

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

window-management की अनुमति

Window Management API का इस्तेमाल करने से पहले, मुझे उपयोगकर्ता से अनुमति लेनी होगी. window-management अनुमति के लिए, Permissions API से इस तरह क्वेरी की जा सकती है:

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

अनुमति के पुराने और नए नाम वाले ब्राउज़र इस्तेमाल में होने के दौरान, अनुमति का अनुरोध करते समय, नीचे दिए गए उदाहरण की तरह ही, डिफ़ेंसिव कोड का इस्तेमाल करना न भूलें.

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

ब्राउज़र, नए एपीआई के किसी भी तरीके का इस्तेमाल करने के पहले, अनुमति का अनुरोध डाइनैमिक तौर पर दिखाने का विकल्प चुना सकता है. ज़्यादा जानने के लिए आगे पढ़ें.

window.screen.isExtended प्रॉपर्टी

यह जानने के लिए कि मेरे डिवाइस से एक से ज़्यादा स्क्रीन कनेक्ट हैं या नहीं, मैं window.screen.isExtended प्रॉपर्टी को ऐक्सेस करता/करती हूं. यह true या false दिखाता है. मेरे सेटअप के लिए, यह true दिखाता है.

window.screen.isExtended;
// Returns `true` or `false`.

getScreenDetails() तरीका

अब मुझे पता है कि मौजूदा सेटअप में एक से ज़्यादा स्क्रीन हैं. इसलिए, Window.getScreenDetails() का इस्तेमाल करके, दूसरी स्क्रीन के बारे में ज़्यादा जानकारी पाई जा सकती है. इस फ़ंक्शन को कॉल करने पर, अनुमति का एक प्रॉम्प्ट दिखेगा. इसमें मुझसे पूछा जाएगा कि क्या साइट को मेरी स्क्रीन पर विंडो खोलने और प्लेस करने की अनुमति दी जा सकती है. यह फ़ंक्शन एक प्रॉमिस दिखाता है, जो ScreenDetailed ऑब्जेक्ट के साथ रिज़ॉल्व होता है. मेरे MacBook Pro 13 में, कनेक्ट किए गए iPad पर, इसमें दो ScreenDetailed ऑब्जेक्ट वाला screens फ़ील्ड शामिल है:

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

कनेक्ट की गई स्क्रीन की जानकारी, screens कलेक्शन में उपलब्ध होती है. ध्यान दें कि iPad के लिए left की वैल्यू 1680 से शुरू होती है. यह बिल्ट-इन डिसप्ले की width वैल्यू से मेल खाती है. इससे मुझे यह तय करने में मदद मिलती है कि स्क्रीन को लॉजिक के हिसाब से कैसे व्यवस्थित किया जाए. जैसे, एक-दूसरे के बगल में, एक-दूसरे के ऊपर वगैरह. अब हर स्क्रीन के लिए डेटा भी उपलब्ध है, ताकि यह पता चल सके कि वह isInternal वाली स्क्रीन है या isPrimary वाली. ध्यान दें कि ज़रूरी नहीं है कि पहले से मौजूद स्क्रीन ही प्राइमरी स्क्रीन हो.

currentScreen फ़ील्ड, मौजूदा window.screen से जुड़ा लाइव ऑब्जेक्ट है. ऑब्जेक्ट, स्क्रीन पर विंडो के अलग-अलग प्लेसमेंट या डिवाइस में हुए बदलावों के हिसाब से अपडेट होता है.

screenschange इवेंट

अब बस एक चीज़ की कमी है. मुझे यह पता लगाने का तरीका चाहिए कि मेरी स्क्रीन का सेटअप कब बदला. नया इवेंट, screenschange, ठीक यही करता है: जब भी स्क्रीन कॉन्स्टेलेशन में बदलाव किया जाता है, तब यह ट्रिगर होता है. (ध्यान दें कि इवेंट के नाम में "स्क्रीन" की संख्या कई है.) इसका मतलब है कि जब भी कोई नई स्क्रीन या मौजूदा स्क्रीन (Sidecar के मामले में, फ़िज़िकली या वर्चुअल तौर पर) प्लग इन या अनप्लग की जाती है, तब यह इवेंट ट्रिगर होता है.

ध्यान दें कि आपको नई स्क्रीन की जानकारी को अलग-अलग समय पर देखना होगा. screenschange इवेंट खुद यह डेटा नहीं देता. स्क्रीन की जानकारी देखने के लिए, कैश मेमोरी में सेव किए गए Screens इंटरफ़ेस के लाइव ऑब्जेक्ट का इस्तेमाल करें.

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

currentscreenchange इवेंट

अगर मुझे सिर्फ़ मौजूदा स्क्रीन में हुए बदलावों (यानी, लाइव ऑब्जेक्ट currentScreen की वैल्यू) में दिलचस्पी है, तो मैं currentscreenchange इवेंट को सुन सकता/सकती हूं.

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

change इवेंट

आखिर में, अगर मुझे सिर्फ़ किसी खास स्क्रीन में हुए बदलावों के बारे में जानना है, तो मैं उस स्क्रीन के change इवेंट को सुन सकता/सकती हूं.

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

फ़ुलस्क्रीन मोड के नए विकल्प

अब तक, एलिमेंट को फ़ुलस्क्रीन मोड में दिखाने का अनुरोध, requestFullScreen() के नाम से जाने जाने वाले तरीके से किया जा सकता था. यह तरीका options पैरामीटर लेता है, जिसमें FullscreenOptions को पास किया जा सकता है. अब तक, इसकी सिर्फ़ एक प्रॉपर्टी navigationUI है. Window Management API, एक नई screen प्रॉपर्टी जोड़ता है. इससे यह तय किया जा सकता है कि फ़ुलस्क्रीन व्यू को किस स्क्रीन पर शुरू करना है. उदाहरण के लिए, अगर आपको प्राइमरी स्क्रीन को फ़ुलस्क्रीन में दिखाना है, तो:

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

Polyfill

Window Management API को पॉलीफ़िल नहीं किया जा सकता. हालांकि, इसके आकार में बदलाव किया जा सकता है, ताकि आप नए एपीआई के लिए खास तौर पर कोड लिख सकें:

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

एपीआई के अन्य पहलू, जैसे कि स्क्रीन में बदलाव होने से जुड़े अलग-अलग इवेंट और FullscreenOptions की screen प्रॉपर्टी, काम न करने वाले ब्राउज़र में कभी ट्रिगर नहीं होंगी या चुपचाप अनदेखा कर दी जाएंगी.

डेमो

अगर आप भी मेरी तरह हैं, तो आपने अलग-अलग क्रिप्टो करंसी के डेवलपमेंट पर नज़र बनाए रखी होगी. (असल में, मुझे यह बिलकुल पसंद नहीं है, क्योंकि मुझे यह ग्रह बहुत पसंद है. हालांकि, इस लेख के लिए मान लें कि मुझे यह पसंद है.) मेरे पास जो क्रिप्टो करंसी हैं उनका ट्रैक रखने के लिए, मैंने एक वेब ऐप्लिकेशन बनाया है. इसकी मदद से, मैं अपने बिस्तर पर आराम से, किसी भी स्थिति में मार्केट पर नज़र रख सकता हूं.

क्रिप्टो करंसी के बारे में बताने वाले इस चैनल पर, कभी भी मार्केट में उतार-चढ़ाव हो सकते हैं. अगर ऐसा होता है, तो मैं तुरंत अपने डेस्क पर जा सकती हूं, जहां मेरे पास कई स्क्रीन का सेटअप है. मैं किसी भी मुद्रा की विंडो पर क्लिक करके, दूसरी स्क्रीन पर फ़ुलस्क्रीन व्यू में पूरी जानकारी तुरंत देख सकता/सकती हूं. यहां मेरी हाल ही की एक फ़ोटो दी गई है, जो YCY bloodbath के दौरान ली गई थी. इस बात का मुझे बिल्कुल अंदाज़ा नहीं था. इस वजह से, मेरे चेहरे पर हाथ थे.

यहां एम्बेड किए गए डेमो को चलाया जा सकता है या glitch पर इसका सोर्स कोड देखा जा सकता है.

सुरक्षा और अनुमतियां

Chrome की टीम ने Window Management API को डिज़ाइन और लागू किया है. इसके लिए, वेब प्लैटफ़ॉर्म की बेहतर सुविधाओं के ऐक्सेस को कंट्रोल करना में बताए गए मुख्य सिद्धांतों का इस्तेमाल किया गया है. इनमें उपयोगकर्ता कंट्रोल, पारदर्शिता, और काम करने के तरीके से जुड़े सिद्धांत शामिल हैं. Window Management API, किसी डिवाइस से कनेक्ट की गई स्क्रीन के बारे में नई जानकारी दिखाता है. इससे उपयोगकर्ताओं के फ़िंगरप्रिंट की जानकारी इकट्ठा करने की सुविधा बढ़ जाती है. खास तौर पर, उन उपयोगकर्ताओं के लिए जिनके डिवाइसों से लगातार कई स्क्रीन कनेक्ट रहती हैं. इस निजता से जुड़ी चिंता को कम करने के लिए, एक्सपोज़ की गई स्क्रीन प्रॉपर्टी को सामान्य प्लेसमेंट के इस्तेमाल के उदाहरणों के लिए, ज़रूरत के मुताबिक सीमित किया गया है. मल्टी-स्क्रीन की जानकारी पाने और अन्य स्क्रीन पर विंडो प्लेस करने के लिए, साइटों को उपयोगकर्ता की अनुमति लेनी होगी. Chromium, स्क्रीन के लेबल की पूरी जानकारी दिखाता है. हालांकि, ब्राउज़र कम जानकारी वाले या खाली लेबल दिखा सकते हैं.

उपयोगकर्ता कंट्रोल

उपयोगकर्ता के पास अपने सेटअप को एक्सपोज़र देने का पूरा कंट्रोल होता है. उपयोगकर्ता, अनुमति के लिए मिले प्रॉम्प्ट को स्वीकार या अस्वीकार कर सकते हैं. साथ ही, ब्राउज़र में साइट की जानकारी की सुविधा का इस्तेमाल करके, पहले दी गई अनुमति को वापस ले सकते हैं.

एंटरप्राइज़ कंट्रोल

Chrome Enterprise के उपयोगकर्ता, Window Management API के कई पहलुओं को कंट्रोल कर सकते हैं. इनके बारे में, एटमिक नीति ग्रुप की सेटिंग के काम के सेक्शन में बताया गया है.

पारदर्शिता

ब्राउज़र की साइट की जानकारी में यह जानकारी दिखती है कि विंडो मैनेजमेंट एपीआई का इस्तेमाल करने की अनुमति दी गई है या नहीं. साथ ही, Permissions API की मदद से भी इसकी क्वेरी की जा सकती है.

अनुमति का बना रहना

ब्राउज़र, अनुमतियों को सेव रखता है. ब्राउज़र की साइट जानकारी की मदद से, अनुमति रद्द की जा सकती है.

सुझाव/राय दें या शिकायत करें

Chrome की टीम, Window Management API के इस्तेमाल से जुड़े आपके अनुभवों के बारे में जानना चाहती है.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में कोई ऐसी चीज़ है जो आपकी उम्मीद के मुताबिक काम नहीं करती? क्या आपके आइडिया को लागू करने के लिए, कोई तरीका या प्रॉपर्टी मौजूद नहीं है? क्या आपका सुरक्षा मॉडल के बारे में कोई सवाल या टिप्पणी है?

• उससे जुड़े GitHub repo पर, खास जानकारी से जुड़ी समस्या दर्ज करें या किसी मौजूदा समस्या में अपने सुझाव जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chrome में इस सुविधा को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका, खास जानकारी से अलग है?

• new.crbug.com पर गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी दें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें. इसके बाद, कॉम्पोनेंट बॉक्स में Blink>Screen>MultiScreen डालें. Glitch, समस्या की जानकारी तुरंत और आसानी से शेयर करने के लिए बहुत अच्छा है.

एपीआई के लिए सहायता दिखाना

क्या आपको Window Management API का इस्तेमाल करना है? सार्वजनिक तौर पर सहायता करने से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.

• WICG के Discourse थ्रेड पर शेयर करें कि आपको इसका इस्तेमाल कैसे करना है.
• #WindowManagement हैशटैग का इस्तेमाल करके, @ChromiumDev को ट्वीट करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.
• अन्य ब्राउज़र वेंडर से एपीआई लागू करने के लिए कहें.

मददगार लिंक

• स्पेसिफ़िकेशन का ड्राफ़्ट
• सार्वजनिक तौर पर जानकारी देने की सुविधा
• Window Management API का डेमो | Window Management API का डेमो सोर्स
• Chromium ट्रैकिंग बग
• ChromeStatus.com पर मौजूद जानकारी
• Blink कॉम्पोनेंट: Blink>Screen>MultiScreen
• टैग की समीक्षा
• प्रयोग करने का मकसद

आभार

Window Management API स्पेसिफ़िकेशन में बदलाव करने वाले लोगों में विक्टर कोस्टन, जोशुआ बेल, और माइक वाटरमैन शामिल हैं. एपीआई को माइक वाटरमैन और ऐड्रियन वॉकर ने लागू किया था. इस लेख की समीक्षा जो मेडली, फ़्रैंसुआ बफ़ोर, और केस बेस्केस ने की. फ़ोटो के लिए, Laura Torrent Puig को धन्यवाद.