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

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

PWA विंडो

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

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

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

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

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

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

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

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

ऑथराइज़ेशन फ़्लो

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

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

  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 के कई टैब खुले हो सकते हैं, लेकिन वे सभी एक ही ऑपरेटिंग सिस्टम विंडो में खुलेंगे, जैसा कि इस वीडियो में देखा जा सकता है:

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

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

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

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

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

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

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

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

विंडो मैनेजमेंट एपीआई की मदद से, 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].pointerTypes;  // e.g. ["touch"]
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 के फ़ॉर्म एलिमेंट पर फ़ोकस होता है, तब उपयोगकर्ता टाइप कर सकते हैं.

virtualकीबोर्ड 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 जैसे वर्चुअल कीबोर्ड के दिखने के बारे में जानकारी पाने के लिए, सीएसएस एनवायरमेंट वैरिएबल का इस्तेमाल करना.

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

रिसॉर्स