इंस्टॉल किए गए PWA में नेविगेशन मैनेज करना

Demián Renzulli
Demián Renzulli
Dan Murphy
Dan Murphy
Dibyajyoti Pal
Dibyajyoti Pal
Vincent Scheib
Vincent Scheib

पब्लिश किया गया: 19 अगस्त, 2025

नेविगेशन मैनेजमेंट में, यह कंट्रोल करने के तरीके शामिल होते हैं कि प्रोग्रेसिव वेब ऐप्लिकेशन (PWA), उपयोगकर्ता के नेविगेशन को कैसे हैंडल करता है. इसका एक अहम कॉम्पोनेंट नेविगेशन कैप्चर करना है. यह ब्राउज़र प्रोसेस तय करती है कि किसी लिंक पर क्लिक करने से, इंस्टॉल किया गया PWA लॉन्च होना चाहिए या नया ब्राउज़र टैब खुलना चाहिए.

इस गाइड में, नेविगेशन कैप्चर करने के नए वर्शन के बारे में बताया गया है. यह Chrome 139 से उपलब्ध है. हालांकि, ब्राउज़र का डिफ़ॉल्ट व्यवहार ज़्यादातर मामलों के लिए सही होता है. अगर आपको अपने उपयोगकर्ताओं के लिए सबसे अच्छा अनुभव देना है, तो इन मैनेजमेंट तकनीकों और उनसे जुड़े एपीआई के बारे में ज़्यादा जानकारी होना ज़रूरी है.

डेवलपर कंट्रोल सेक्शन में बताया गया है कि अपने PWA को लॉन्च करने का सबसे अच्छा अनुभव देने के लिए, नेविगेशन को कैसे पसंद के मुताबिक बनाया जा सकता है.

डिफ़ॉल्ट ऐक्शन और सेटिंग

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

नेविगेशन कैप्चर करने के लिए, एक नया और बेहतर तरीका उपलब्ध कराया गया है. इससे लिंक अपने-आप, इंस्टॉल किए गए पीडब्ल्यूए में खुलते हैं. लिंक सिर्फ़ तब ब्राउज़र टैब पर वापस जाएंगे, जब PWA इंस्टॉल न किया गया हो या उपयोगकर्ता ने ऑप्ट आउट किया हो. यह नई सुविधा, Windows, Mac, और Linux के लिए Chrome 139 से उपलब्ध है. ChromeOS के लिए यह सुविधा, आने वाले समय में उपलब्ध होगी.

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

नेविगेशन कैप्चर करना, नेविगेशन मैनेज करने की प्रोसेस का हिस्सा है. इस प्रोसेस में, उपयोगकर्ता की शुरुआती कार्रवाई से लेकर ब्राउज़र के फ़ैसलों और डेवलपर के कॉन्फ़िगर किए गए नतीजों तक का पूरा फ़्लो शामिल होता है:

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

इन एलिमेंट के इंटरप्ले से यह तय होता है कि PWA, स्टैंडअलोन विंडो में खुलेगा या ब्राउज़र टैब में.

नेविगेशन मैनेजमेंट, उपयोगकर्ता की कार्रवाइयों, ब्राउज़र के फ़ैसलों, और डेवलपर के कंट्रोल का नतीजा होता है.

नेविगेशन मैनेजमेंट का एक बुनियादी उदाहरण तब होता है, जब कोई उपयोगकर्ता ब्राउज़र में किसी दूसरे पेज से इंस्टॉल किए गए PWA के लिंक पर क्लिक या टैप करता है. यहां दिए गए उदाहरण में, उस उपयोगकर्ता के बारे में बताया गया है जिसने Google Chat PWA इंस्टॉल किया है. साथ ही, Google Calendar के न्योते में दिए गए लिंक पर क्लिक किया है.

उपयोगकर्ता, calendar.google.com से chat.google.com (PWA के तौर पर इंस्टॉल किया गया) के लिंक पर क्लिक करता है.

उपयोगकर्ता की कार्रवाइयां

उपयोगकर्ता की हर कार्रवाई में तीन मुख्य एलिमेंट होते हैं: इवेंट (जैसे कि क्लिक या टैप), सरफ़ेस जहां यह कार्रवाई होती है (जैसे कि वेबपेज या डेस्कटॉप शॉर्टकट) और लिंक टाइप जिसे चालू किया जा रहा है (जैसे कि एचटीटीपीएस यूआरएल). उदाहरण के लिए, किसी उपयोगकर्ता की कार्रवाई यह हो सकती है कि वह calendar.google.com पर मौजूद किसी वेबपेज से, Google Chat PWA के दायरे में मौजूद https://chat.google.com/meeting_room_id के लिंक पर क्लिक करे.

ब्राउज़र के फ़ैसले

उपयोगकर्ता की किसी कार्रवाई के बाद, जैसे कि पिछले चरण में उपयोगकर्ता के क्लिक करने पर, ब्राउज़र नेविगेशन कैप्चर करने की प्रोसेस शुरू करता है. इससे यह तय किया जाता है कि लिंक को ब्राउज़र टैब में खोला जाना चाहिए या इंस्टॉल किए गए PWA में. इसमें ये चरण शामिल हैं:

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

इस डायग्राम में, इस प्रोसेस के बारे में खास जानकारी दी गई है:

इमेज
नेविगेशन कैप्चर करना: ब्राउज़र यह तय करने के लिए ये चरण पूरे करता है कि उपयोगकर्ता की कार्रवाई पर, लिंक को ब्राउज़र टैब में खोलना है या PWA लॉन्च करना है.

डेवलपर के कंट्रोल

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

Launch Handler API

यह एपीआई तब काम करता है, जब ब्राउज़र PWA लॉन्च करने का फ़ैसला करता है. इससे आपको यह कंट्रोल करने का मौका मिलता है कि PWA कैसे लॉन्च किया जाए. उदाहरण के लिए, नई या मौजूदा विंडो में.

किसी मौजूदा विंडो पर फ़ोकस करके या नई विंडो खोलकर, PWA लॉन्च किया जा सकता है.
लॉन्च हैंडलर एपीआई: इससे यह तय किया जा सकता है कि PWA कैसे लॉन्च होगा.

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

  • focus-existing: इसका इस्तेमाल, ऐप्लिकेशन की मौजूदा विंडो में लिंक को मैनेज करने के लिए किया जाता है. जैसे, स्टैंडअलोन मोड में पहले से चल रहा कोई PWA.
  • navigate-existing: इस विकल्प में, वेब ऐप्लिकेशन की विंडो में हाल ही में इंटरैक्ट किए गए ब्राउज़िंग कॉन्टेक्स्ट को लॉन्च के टारगेट यूआरएल पर ले जाया जाता है.
  • navigate-new: इस विकल्प की मदद से, वेब ऐप्लिकेशन की विंडो में एक नया ब्राउज़िंग कॉन्टेक्स्ट बनाया जाता है, ताकि लॉन्च के टारगेट यूआरएल को लोड किया जा सके.

अतिरिक्त पैरामीटर देने और खास मामलों को हैंडल करने के लिए, launchQueue API का इस्तेमाल करें. लॉन्च हैंडलर एपीआई, Chrome 110 से उपलब्ध है. हालांकि, नेविगेशन कैप्चर करने से जुड़े अपडेट के बाद, यह ज़्यादा काम का हो जाता है. इसके बारे में ज़्यादा जानने के लिए, Launch Handler API का दस्तावेज़ पढ़ें.

मिलते-जुलते अन्य एपीआई

लॉन्च हैंडलिंग के अलावा, इस प्रोसेस में अन्य एपीआई भी भूमिका निभा सकते हैं. हालांकि, यह आपके ऐप्लिकेशन की खास ज़रूरतों पर निर्भर करता है. इनमें ये शामिल हैं: यूआरएल प्रोटोकॉल हैंडलर. इनकी मदद से, कोई वेब ऐप्लिकेशन, http और https के अलावा अन्य यूआरएल स्कीम को हैंडल करने की अपनी क्षमता रजिस्टर कर सकता है. उदाहरण के लिए, mailto: जैसे स्टैंडर्ड प्रोटोकॉल या web+music जैसे कस्टम प्रोटोकॉल. इसके अलावा, वेब ऐप्लिकेशन स्कोप एक्सटेंशन एपीआई (यह सुविधा फ़िलहाल डेवलपमेंट में है) की मदद से, अपने PWA के स्कोप को बढ़ाया जा सकता है. इससे अन्य ऑरिजिन, जैसे कि सबडोमेन से लिंक कैप्चर किए जा सकते हैं. इससे जब कोई उपयोगकर्ता किसी जुड़े हुए ऑरिजिन के लिंक पर क्लिक करता है, तो PWA लॉन्च किया जा सकता है. इस लेख में इनके बारे में ज़्यादा जानकारी नहीं दी गई है. हालांकि, ज़्यादा जानने के लिए इनसे जुड़े लिंक देखे जा सकते हैं.

आखिर में, जानें कि Google Chat के PWA को पहले से इंस्टॉल कर चुके उपयोगकर्ता के लिए, Google Calendar के लिंक पर क्लिक करने पर, अलग-अलग कॉम्पोनेंट एक साथ कैसे काम करते हैं.

नेविगेशन कैप्चर करने से पहले

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

नेविगेशन की जानकारी कैप्चर करने के बाद

इस वीडियो में, उपयोगकर्ता के उसी वर्कफ़्लो को दिखाया गया है. हालांकि, अब इसमें नेविगेशन कैप्चर करने का नया तरीका इस्तेमाल किया गया है. इस वर्शन में, Google Calendar में मौजूद Google Chat के लिंक पर क्लिक करने से, चैट रूम सीधे इंस्टॉल किए गए PWA में खुलता है. इसके अलावा, Google Chat की टीम ने वेब ऐप्लिकेशन मेनिफ़ेस्ट में launch_handler एट्रिब्यूट जोड़कर, लॉन्च हैंडलिंग लागू की है. client_mode को focus-existing पर सेट करके, वे यह पक्का करते हैं कि लिंक, PWA के मौजूदा इंस्टेंस में खुले. ऐसा तब होता है, जब PWA पहले से चल रहा हो. नए ब्राउज़र टैब को खोलने और फिर पेज लोड करने में लगने वाले समय को कम करके, 'उपयोगकर्ता के इंटरैक्ट करने में लगने वाले समय' को डिज़ाइन के हिसाब से कम किया जा सकता है. दरअसल, Google Chat ने नए ऐप्लिकेशन को लॉन्च करने की ज़रूरत को खत्म करके, नेविगेशन में लगने वाले समय को काफ़ी कम कर दिया है.

नतीजा और अगले चरण

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

लेख में बताए गए अलग-अलग चरण.
नेविगेशन कैप्चर करने का डायग्राम (पूरा वर्शन)

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