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

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

PWA विंडो

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

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

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

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

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

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

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

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

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

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

Android पर ऐसा इन-ऐप्लिकेशन ब्राउज़र जो स्टैंडअलोन 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");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

विंडो मैनेजमेंट एपीआई की मदद से, पीडब्ल्यूए इस्तेमाल करने के साथ-साथ और भी बहुत कुछ किया जा सकता है.

स्क्रीन की जानकारी लोड की जा रही है

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

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 के फ़ॉर्म एलिमेंट फ़ोकस में हों.

वर्चुअलकीबोर्ड एपीआई की मदद से, आपके पीडब्ल्यूए के पास 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 की मदद से पूरा कंट्रोल पर जाएं.

संसाधन