विंडो मैनेजमेंट

ब्राउज़र के बाहर का PWA अपनी विंडो खुद मैनेज करता है. इस चैप्टर में, आपको ऑपरेटिंग सिस्टम में विंडो को मैनेज करने के एपीआई और क्षमताओं के बारे में जानकारी मिलेगी.

पीडब्ल्यूए विंडो

अपने पीडब्ल्यूए से मैनेज की जाने वाली अपनी विंडो पर चलने वाले ऐप्लिकेशन के लिए, उस ऑपरेटिंग सिस्टम में मौजूद किसी भी विंडो के सभी फ़ायदे और ज़िम्मेदारियां लागू होती हैं. जैसे:

• Windows या ChromeOS जैसे मल्टी-विंडो ऑपरेटिंग सिस्टम पर, विंडो का साइज़ बदलने और उसे एक जगह से दूसरी जगह ले जाने की सुविधा.
• iPadOS के स्प्लिट मोड या Android के स्प्लिट-स्क्रीन मोड की तरह, स्क्रीन को अन्य ऐप्लिकेशन विंडो के साथ शेयर करना.
• डेस्कटॉप पर डॉक, टास्कबार, और Alt-Tab मेन्यू में दिखने के साथ-साथ, मोबाइल डिवाइसों पर मल्टी-टास्क विंडो की सूचियों में भी दिखते हैं.
• विंडो को छोटा करने, उसे स्क्रीन और डेस्कटॉप पर ले जाने, और उसे किसी भी समय बंद करने की सुविधा.

विंडो को एक जगह से दूसरी जगह ले जाना और उसका साइज़ बदलना

डेस्कटॉप ऑपरेटिंग सिस्टम पर, आपकी PWA विंडो किसी भी साइज़ की हो सकती है और उसे स्क्रीन पर कहीं भी रखा जा सकता है. डिफ़ॉल्ट रूप से, जब कोई उपयोगकर्ता ऐप्लिकेशन इंस्टॉल करने के बाद पहली बार PWA खोलता है, तो पीडब्ल्यूए को मौजूदा स्क्रीन के कुछ प्रतिशत हिस्से का डिफ़ॉल्ट विंडो साइज़ मिलता है. इसका रिज़ॉल्यूशन, स्क्रीन के सबसे ऊपर बाएं कोने में ज़्यादा से ज़्यादा 1920x1080 होता है.

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

मेनिफ़ेस्ट में, अपने PWA के पसंदीदा साइज़ और पोज़िशन को तय करने का कोई तरीका नहीं है. सिर्फ़ JavaScript API का इस्तेमाल करके विंडो की जगह और साइज़ बदला जा सकता है. अपने कोड से, window ऑब्जेक्ट के moveTo(x, y) और resizeTo(x, y) फ़ंक्शन का इस्तेमाल करके, अपनी PWA विंडो को एक जगह से दूसरी जगह ले जाया जा सकता है या उसका साइज़ बदला जा सकता है.

उदाहरण के लिए, PWA लोड होने पर, उसकी विंडो का साइज़ बदला जा सकता है और उसे एक जगह से दूसरी जगह ले जाया जा सकता है. इसके लिए, इनका इस्तेमाल किया जा सकता है:

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);
   }
});

window.screen ऑब्जेक्ट का इस्तेमाल करके, स्क्रीन के मौजूदा साइज़ और पोज़िशन के बारे में क्वेरी की जा सकती है. window ऑब्जेक्ट से resize इवेंट का इस्तेमाल करके, यह पता लगाया जा सकता है कि विंडो का साइज़ कब बदला गया है. विंडो के मूव होने को कैप्चर करने के लिए कोई इवेंट नहीं है. इसलिए, आपके पास पोज़िशन के बारे में बार-बार क्वेरी करने का विकल्प है.

अन्य साइटों को ब्राउज़ करना

अगर उपयोगकर्ता को किसी ऐसी बाहरी साइट पर भेजना है जो आपके PWA के दायरे से बाहर है, तो स्टैंडर्ड <a href> एचटीएमएल एलिमेंट का इस्तेमाल करके ऐसा किया जा सकता है. इसके लिए, location.href का इस्तेमाल करें या साथ काम करने वाले प्लैटफ़ॉर्म पर नई विंडो खोलें.

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

इन-ऐप्लिकेशन ब्राउज़र की कुछ सुविधाएं ये हैं:

• ये आपके कॉन्टेंट के सबसे ऊपर दिखते हैं.
• इनमें एक स्टैटिक यूआरएल बार होता है, जिसमें मौजूदा ऑरिजिन, विंडो का टाइटल, और मेन्यू दिखता है. आम तौर पर, ये आपके मेनिफ़ेस्ट के theme_color के हिसाब से थीम वाले होते हैं.
• कॉन्टेक्स्ट मेन्यू से, उस यूआरएल को ब्राउज़र में खोला जा सकता है.
• उपयोगकर्ता, ब्राउज़र को बंद कर सकते हैं या वापस जा सकते हैं.

अनुमति देने के फ़्लो

वेब की पुष्टि करने और अनुमति देने के कई फ़्लो में, उपयोगकर्ता को किसी अलग ऑरिजिन वाले किसी दूसरे यूआरएल पर रीडायरेक्ट करना शामिल होता है. ऐसा करके, उपयोगकर्ता को अपने PWA के ऑरिजिन पर वापस आने वाला टोकन पाने के लिए कहा जाता है. जैसे, OAuth 2.0 का इस्तेमाल करना.

इन मामलों में, इन-ऐप्लिकेशन ब्राउज़र यह प्रोसेस अपनाता है:

1. उपयोगकर्ता आपका PWA खोलता है और लॉगिन पर क्लिक करता है.
2. आपका PWA, उपयोगकर्ता को ऐसे यूआरएल पर रीडायरेक्ट करता है जो PWA के दायरे से बाहर है. इससे रेंडरिंग इंजन, आपके PWA में इन-ऐप्लिकेशन ब्राउज़र खोल देगा.
3. उपयोगकर्ता किसी भी समय, इन-ऐप्लिकेशन ब्राउज़र को रद्द कर सकता है और आपके पीडब्ल्यूए पर वापस जा सकता है.
4. उपयोगकर्ता, इन-ऐप्लिकेशन ब्राउज़र में लॉग इन करता है. ऑथेंटिकेशन सर्वर, उपयोगकर्ता को आपके PWA के ऑरिजिन पर रीडायरेक्ट करता है. साथ ही, टोकन को आर्ग्युमेंट के तौर पर भेजता है.
5. इन-ऐप्लिकेशन ब्राउज़र तब अपने-आप बंद हो जाता है, जब उसे किसी ऐसे यूआरएल का पता चलता है जो पीडब्ल्यूए के स्कोप का हिस्सा है.
6. इंजन, PWA की मुख्य विंडो के नेविगेशन को उस यूआरएल पर रीडायरेक्ट करता है जिस पर पुष्टि करने वाला सर्वर, इन-ऐप्लिकेशन ब्राउज़र में मौजूद होने के दौरान गया था.
7. आपका PWA, टोकन हासिल करता है, टोकन को सेव करता है, और पीडब्ल्यूए को रेंडर करता है.

ब्राउज़र के नेविगेशन को ज़बरदस्ती लागू करना

अगर आपको इन-ऐप्लिकेशन ब्राउज़र के बजाय, ब्राउज़र को ज़बरदस्ती किसी यूआरएल से खोलना है, तो <a href> एलिमेंट के _blank टारगेट का इस्तेमाल किया जा सकता है. यह सुविधा सिर्फ़ डेस्कटॉप पर काम करती है. मोबाइल डिवाइसों पर, यूआरएल की मदद से ब्राउज़र खोलने का विकल्प नहीं होता.

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

नई विंडो खोली जा रही हैं

डेस्कटॉप पर, उपयोगकर्ता एक ही PWA की एक से ज़्यादा विंडो खोल सकते हैं. हर विंडो, एक ही start_url पर ले जाने वाली अलग-अलग नेविगेशन होगी. जैसे, एक ही यूआरएल के दो ब्राउज़र टैब खोलने पर. PWA के मेन्यू में जाकर, उपयोगकर्ता 'फ़ाइल' और फिर 'नई विंडो' को चुन सकते हैं. इसके बाद, अपने PWA कोड से, open() फ़ंक्शन वाली नई विंडो खोल सकते हैं. ज़्यादा जानकारी के लिए, दस्तावेज़ देखें.

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

iOS या iPadOS पर PWA विंडो में open() को कॉल करने पर, null दिखता है और कोई विंडो नहीं खुलती. Android पर नई विंडो खोलने से, यूआरएल के लिए एक नया इन-ऐप्लिकेशन ब्राउज़र बन जाता है. भले ही, यूआरएल आपके PWA के दायरे में हो. आम तौर पर, इससे बाहरी ब्राउज़िंग का अनुभव ट्रिगर नहीं होता.

विंडो का टाइटल

<title> एलिमेंट का इस्तेमाल मुख्य रूप से एसईओ के लिए किया जाता है, क्योंकि ब्राउज़र टैब में कम जगह होती है. PWA में, ब्राउज़र से अपनी विंडो पर जाने पर, टाइटल बार की सभी स्पेस आपके लिए उपलब्ध हो जाती हैं.

टाइटल बार में दिखने वाले कॉन्टेंट को तय किया जा सकता है:

• आपके एचटीएमएल <title> एलिमेंट में स्टैटिक तौर पर.
• document.title स्ट्रिंग प्रॉपर्टी को किसी भी समय डाइनैमिक तौर पर बदलना.

डेस्कटॉप के PWA में, टाइटल ज़रूरी होता है. साथ ही, इसका इस्तेमाल विंडो के टाइटल बार में और कभी-कभी टास्क मैनेजर या एक साथ कई टास्क चुनने में किया जाता है. अगर आपके पास एक पेज वाला ऐप्लिकेशन है, तो हो सकता है कि आप हर रूट पर अपना टाइटल अपडेट करना चाहें.

टैब किया गया मोड

टैब मोड​ नाम के एक्सपेरिमेंटल वर्शन की मदद से, आपके पीडब्ल्यूए को वेब ब्राउज़र की तरह टैब-आधारित डिज़ाइन दिया जा सकता है. इस मामले में, उपयोगकर्ता के पास एक ही PWA से कई टैब खोलने का विकल्प होता है. हालांकि, ये सभी टैब एक ही ऑपरेटिंग सिस्टम विंडो में एक साथ जुड़े होते हैं. इस बारे में ज़्यादा जानने के लिए, नीचे दिया गया वीडियो देखें:

एक्सपेरिमेंट के तौर पर उपलब्ध इस सुविधा के बारे में ज़्यादा जानने के लिए, PWA के लिए टैब किए गए ऐप्लिकेशन मोड पर जाएं.

विंडो कंट्रोल ओवरले

हमने बताया है कि आप <title> एलिमेंट या document.title प्रॉपर्टी की वैल्यू तय करके, विंडो के टाइटल को बदल सकते हैं. हालांकि, यह हमेशा स्ट्रिंग वैल्यू होती है. अगर हम एचटीएमएल, सीएसएस, और इमेज का इस्तेमाल करके, टाइटल बार को अपनी पसंद के मुताबिक डिज़ाइन कर पाते, तो क्या होता? ऐसे में, विंडो कंट्रोल ओवरले की सुविधा काम आती है. यह डेस्कटॉप पर PWA इस्तेमाल करने के लिए, Microsoft Edge और Google Chrome में एक्सपेरिमेंट के तौर पर उपलब्ध नई सुविधा है.

इस सुविधा के बारे में ज़्यादा जानने के लिए, अपने PWA के टाइटल बार के विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाएं लेख पढ़ें.

विंडो मैनेजमेंट

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

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

Window Management API की मदद से, PWA ऐसा और भी बहुत कुछ कर सकते हैं.

स्क्रीन की जानकारी पाना

विंडो मैनेजमेंट एपीआई, window.getScreenDetails() नाम का एक नया तरीका जोड़ता है. यह, अटैच की गई स्क्रीन के ऐसे कलेक्शन के तौर पर स्क्रीन वाला ऑब्जेक्ट दिखाता है जिसमें बदलाव नहीं किया जा सकता. ScreenDetails.currentScreen से भी एक लाइव ऑब्जेक्ट ऐक्सेस किया जा सकता है, जो मौजूदा window.screen से जुड़ा होता है.

screens कलेक्शन में बदलाव होने पर, दिखाया गया ऑब्जेक्ट एक screenschange इवेंट भी ट्रिगर करता है. (अलग-अलग स्क्रीन पर एट्रिब्यूट बदलने पर ऐसा नहीं होता.) window.screen या screens कलेक्शन में मौजूद किसी स्क्रीन के एट्रिब्यूट में बदलाव होने पर, वह भी change इवेंट ट्रिगर करता है.

// 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;
});

अगर उपयोगकर्ता या ऑपरेटिंग सिस्टम, आपके PWA की विंडो को एक स्क्रीन से दूसरी स्क्रीन पर ले जाते हैं, तो स्क्रीन की जानकारी वाले ऑब्जेक्ट से भी currentscreenchange इवेंट ट्रिगर होगा.

स्क्रीन 'वेक लॉक'

कल्पना करें: आप रसोई में हैं और टैबलेट पर रेसिपी देख रहे हैं. आपने अभी-अभी अपने आइटम के लिए सामग्री तैयार कर ली है. आपके हाथों में गंदगी है और आपको अगला चरण पढ़ने के लिए अपने डिवाइस पर वापस जाना है. आपदा! स्क्रीन काली हो गई है! स्क्रीन वेक लॉक एपीआई आपके लिए उपलब्ध है. इसकी मदद से, PWA, स्क्रीन की रोशनी कम होने, स्लीप मोड में जाने या लॉक होने से रोक सकता है. इससे उपयोगकर्ता, बिना किसी परेशानी के ऐप्लिकेशन को बंद कर सकते हैं, फिर से चालू कर सकते हैं, छोड़ सकते हैं, और वापस आ सकते हैं.

// 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();

वर्चुअल कीबोर्ड

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

VirtualKeyboard API की मदद से, आपके PWA के पास अब navigator.virtualKeyboard इंटरफ़ेस का इस्तेमाल करके, काम करने वाले प्लैटफ़ॉर्म पर कीबोर्ड को बेहतर तरीके से कंट्रोल करने का विकल्प है. इनमें ये शामिल हैं:

• navigator.virtualKeyboard.show() और navigator.virtualKeyboard.hide() फ़ंक्शन की मदद से, वर्चुअल कीबोर्ड को दिखाना और छिपाना.
• navigator.virtualKeyboard.overlaysContent को true के बराबर सेट करके, ब्राउज़र को यह बताना कि वर्चुअल कीबोर्ड को खुद बंद किया जा रहा है.
• navigator.virtualKeyboard के इवेंट geometrychange की मदद से, यह जानना कि कीबोर्ड कब दिखता है और कब नहीं दिखता.
• virtualkeyboardpolicy एचटीएमएल एट्रिब्यूट की मदद से, होस्ट एलिमेंट में बदलाव करने पर वर्चुअल कीबोर्ड की नीति सेट करना (contenteditable का इस्तेमाल करके). नीति की मदद से यह तय किया जा सकता है कि आपको वर्चुअल कीबोर्ड को auto वैल्यू का इस्तेमाल करके, ब्राउज़र से अपने-आप मैनेज कराना है या manual वैल्यू का इस्तेमाल करके, अपनी स्क्रिप्ट से मैनेज कराना है.
• वर्चुअल कीबोर्ड के दिखने के बारे में जानकारी पाने के लिए, सीएसएस एनवायरमेंट वैरिएबल का इस्तेमाल करना. जैसे, keyboard-inset-height और keyboard-inset-top.

इस एपीआई के बारे में ज़्यादा जानने के लिए, वर्चुअलकीबोर्ड एपीआई की मदद से पूरा कंट्रोल पर जाएं.

संसाधन

• विंडो मैनेजमेंट एपीआई की मदद से कई डिसप्ले मैनेज करना
• MDN: Window Management API
• पीडब्ल्यूए के लिए टैब किया गया ऐप्लिकेशन मोड
• Screen Wake Lock API की मदद से, डिवाइस की स्क्रीन चालू रखना
• VirtualKeyboard API की मदद से पूरा कंट्रोल
• अपने PWA के टाइटल बार के विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाना
• टाइटल बार में कॉन्टेंट दिखाना