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

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

अपने 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 इवेंट का इस्तेमाल करके, यह पता लगाया जा सकता है कि विंडो का साइज़ कब बदला गया. विंडो के मूव होने को कैप्चर करने के लिए कोई इवेंट नहीं है. इसलिए, आपके पास पोज़िशन के बारे में बार-बार क्वेरी करने का विकल्प है.

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

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

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

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

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

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

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

जब इन-ऐप्लिकेशन ब्राउज़र स्क्रीन पर होता है, तब आपका PWA बैकग्राउंड में इंतज़ार कर रहा होता है. ऐसा लगता है कि कोई दूसरी विंडो उसे छिपा रही है.

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

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

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

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

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

ब्राउज़र के नेविगेशन को फ़ोर्स करना

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

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 को वेब ब्राउज़र की तरह टैब-आधारित डिज़ाइन दिया जा सकता है. इस मामले में, उपयोगकर्ता एक ही 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 पर सेट करें.
  • geometrychange इवेंट की मदद से, यह पता लगाएं कि कीबोर्ड कब दिखता है और कब नहीं दिखता.
  • होस्ट एलिमेंट में बदलाव करने पर वर्चुअल कीबोर्ड की नीति सेट करने के लिए, virtualkeyboardpolicy एचटीएमएल एट्रिब्यूट के साथ contenteditable को auto या manual पर सेट करें. नीति की मदद से यह तय किया जा सकता है कि वर्चुअल कीबोर्ड को ब्राउज़र (auto) या स्क्रिप्ट (manual) में से किसके ज़रिए अपने-आप मैनेज किया जाए.
  • वर्चुअल कीबोर्ड के दिखने के बारे में जानकारी पाने के लिए, सीएसएस एनवायरमेंट वैरिएबल का इस्तेमाल करें. जैसे, keyboard-inset-height और keyboard-inset-top.

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