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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

डेस्कटॉप ऑपरेटिंग सिस्टम पर, इंस्टॉल किया गया एक ही PWA, जिसमें कई विंडो खुली हैं.

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

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

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

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

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

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

टैब वाला मोड

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

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

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

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

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

विंडो कंट्रोल ओवरले की मदद से, टाइटल बार में कॉन्टेंट रेंडर किया जा सकता है.

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

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

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

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

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

Window Management API में एक नया तरीका, 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.

इस एपीआई के बारे में ज़्यादा जानने के लिए, VirtualKeyboard API की मदद से पूरा कंट्रोल लेख पढ़ें.

संसाधन