चुनें कि इन-स्कोप में मौजूद लिंक, डिक्लेरेटिव लिंक कैप्चर करके आपके PWA को कैसे खोलें

Thomas Steiner

डिक्लेरेटिव लिंक कैप्चरिंग क्या है?

वेब पर मौजूद लिंक पर क्लिक करने से, कभी-कभी आपको कुछ नया देखने को मिल सकता है. उदाहरण के लिए, मोबाइल डिवाइस पर YouTube के वेब पेज के लिंक पर क्लिक करने से, YouTube का iOS या Android ऐप्लिकेशन खुल जाता है. हालांकि, ऐसा तब होता है, जब ऐप्लिकेशन इंस्टॉल हो. हालांकि, डेस्कटॉप कंप्यूटर पर YouTube PWA इंस्टॉल करने के बाद, किसी लिंक पर क्लिक करने से वह ब्राउज़र टैब में खुलता है.

हालांकि, यह इससे भी ज़्यादा पेचीदा है. अगर लिंक किसी वेबसाइट पर नहीं, बल्कि Google के किसी चैट ऐप्लिकेशन में मिले चैट मैसेज में दिखता है, तो क्या होगा? डेस्कटॉप ऑपरेटिंग सिस्टम पर, ऐप्लिकेशन की अलग-अलग विंडो होती हैं. अगर ऐप्लिकेशन पहले से खुला है, तो क्या हर लिंक पर क्लिक करने के लिए नई विंडो या टैब बनाया जाना चाहिए? लिंक और नेविगेशन को कई तरीकों से कैप्चर किया जा सकता है. इनमें ये शामिल हैं, लेकिन इनके अलावा और भी तरीके हो सकते हैं:

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

कुछ खास स्थितियों में, लिंक कैप्चर करने की सुविधा ट्रिगर नहीं होती. जैसे, लिंक पर बीच में क्लिक करना या लिंक पर राइट क्लिक करके "नए टैब में खोलें" पर क्लिक करना. इससे कोई फ़र्क़ नहीं पड़ता कि लिंक target=_self है या target=_blank. इससे ब्राउज़र विंडो (या किसी दूसरे PWA की विंडो) में क्लिक किए गए लिंक, PWA में खुलेंगे. भले ही, आम तौर पर वे उसी टैब में नेविगेशन की वजह बनते हों.

इस्तेमाल के सुझाए गए उदाहरण

इस एपीआई का इस्तेमाल करने वाली साइटों के उदाहरण:

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

about://flags के ज़रिए चालू करना

ओरिजिन ट्रायल टोकन के बिना, स्थानीय तौर पर डिक्लेरेटिव लिंक कैप्चरिंग की सुविधा को आज़माने के लिए, #enable-desktop-pwas-link-capturing में about://flags फ़्लैग चालू करें.

डिक्लेरेटिव लिंक कैप्चरिंग का इस्तेमाल कैसे करें?

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

  • "none" (डिफ़ॉल्ट): लिंक कैप्चर नहीं किए जाते. इस पीडब्ल्यूए के स्कोप में आने वाले लिंक पर क्लिक करने से, पीडब्ल्यूए विंडो खोले बिना सामान्य तरीके से नेविगेट किया जाता है.
  • "new-client": क्लिक किए गए हर लिंक से, उस यूआरएल पर एक नई PWA विंडो खुलती है.
  • "existing-client-navigate": क्लिक किया गया लिंक, मौजूदा PWA विंडो में खुलता है. अगर कोई विंडो उपलब्ध नहीं है, तो यह नई विंडो में खुलता है. अगर एक से ज़्यादा PWA विंडो मौजूद हैं, तो ब्राउज़र किसी भी विंडो को चुन सकता है. अगर फ़िलहाल कोई विंडो खुली नहीं है, तो यह "new-client" की तरह काम करता है. 🚨 ध्यान दें! इस विकल्प से डेटा का नुकसान हो सकता है, क्योंकि पेजों से किसी भी तरह से नेविगेट किया जा सकता है. साइटों को यह पता होना चाहिए कि इस विकल्प को चुनने पर, वे इस तरह के व्यवहार के लिए ऑप्ट-इन कर रही हैं. यह विकल्प, "सिर्फ़ पढ़ने के लिए" साइटों के लिए सबसे अच्छा काम करता है. ये साइटें, उपयोगकर्ता के डेटा को मेमोरी में सेव नहीं करती हैं. जैसे, संगीत प्लेयर. अगर उपयोगकर्ता जिस पेज से नेविगेट कर रहा है उस पर beforeunload इवेंट है, तो उसे नेविगेशन पूरा होने से पहले प्रॉम्प्ट दिखेगा.

डेमो

डिक्लेरेटिव लिंक कैप्चरिंग के डेमो में, असल में दो डेमो शामिल होते हैं. ये दोनों एक-दूसरे के साथ इंटरैक्ट करते हैं:

  1. साइट 1
  2. साइट 2

नीचे दिए गए स्क्रीनकास्ट में, दोनों के बीच इंटरैक्शन दिखाया गया है. इनमें दो अलग-अलग व्यवहार दिखाए गए हैं, "new-client" और "existing-client-navigate". ऐप्लिकेशन को अलग-अलग स्थितियों में टेस्ट करें. जैसे, किसी टैब में चल रहा हो या इंस्टॉल किए गए PWA के तौर पर चल रहा हो. इससे आपको यह पता चलेगा कि ऐप्लिकेशन अलग-अलग स्थितियों में कैसा काम करता है.

सुरक्षा और अनुमतियां

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

Launch Handler API पर माइग्रेट करना

Chromium 97 और इससे पहले के वर्शन के लिए, Declarative Link Capturing API का ऑरिजिन ट्रायल 30 मार्च, 2022 को खत्म हो गया है. Chromium 98 और इसके बाद के वर्शन में, इसे नई सुविधाओं और एपीआई के सेट से बदल दिया जाएगा. इसमें उपयोगकर्ता के लिए लिंक कैप्चर करने की सुविधा और Launch Handler API शामिल है.

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

'इससे खोलें' सेटिंग का उदाहरण. इसमें 'मेरी पसंद याद रखें' विकल्प चालू है.

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

इंस्टॉल किए गए ऐप्लिकेशन के सेटिंग पेज का उदाहरण.

फ़िलहाल, लिंक कैप्चर करने की सुविधा सिर्फ़ ChromeOS के लिए उपलब्ध है. Windows, macOS, और Linux के लिए यह सुविधा जल्द ही उपलब्ध होगी.

Launch Handler API

इनकमिंग नेविगेशन का कंट्रोल, Launch Handler API पर माइग्रेट कर दिया गया है. इससे वेब ऐप्लिकेशन को यह तय करने की अनुमति मिलती है कि लिंक कैप्चर करने, शेयर टारगेट या फ़ाइल मैनेज करने वगैरह जैसी अलग-अलग स्थितियों में वेब ऐप्लिकेशन कैसे लॉन्च होगा. Declarative Link Capturing API से Launch Handler API पर माइग्रेट करने के लिए:

  1. अपनी साइट को लॉन्च हैंडलर की ओरिजिन ट्रायल के लिए रजिस्टर करें और ओरिजिन ट्रायल की को अपने वेब ऐप्लिकेशन में डालें.

  2. अपनी साइट के मेनिफ़ेस्ट में "launch_handler" एंट्री जोड़ें.

    • "capture_links": "new-client" का इस्तेमाल करने के लिए, "launch_handler": { "route_to": "new-client" } जोड़ें.
    • "capture_links": "existing-client-navigate" का इस्तेमाल करने के लिए, "launch_handler": { "route_to": "existing-client-navigate" } जोड़ें.
    • "capture_links": "existing-client-event" का इस्तेमाल करने के लिए, यह कोड जोड़ें. इसे डिक्लेरेटिव लिंक कैप्चरिंग के ऑरिजिन ट्रायल में कभी लागू नहीं किया गया था: "launch_handler": { "route_to": "existing-client-retain" }. इस विकल्प को चुनने पर, लिंक नेविगेशन कैप्चर होने पर, आपके ऐप्लिकेशन के स्कोप में मौजूद पेज अपने-आप नेविगेट नहीं होंगे. आपको JavaScript में LaunchParams को मैनेज करना होगा. इसके लिए, नेविगेशन चालू करने के लिए window.launchQueue.setConsumer() को कॉल करें.

capture_links फ़ील्ड और Declarative Link Capturing के ऑरिजिन ट्रायल के लिए रजिस्ट्रेशन, 30 मार्च, 2022 तक मान्य है. इससे यह पक्का किया जा सकेगा कि Chromium 97 और इससे पहले के वर्शन का इस्तेमाल करने वाले लोग, कैप्चर किए गए लिंक पर जाकर वेब ऐप्लिकेशन लॉन्च कर सकें.

ज़्यादा जानकारी के लिए, ऐप्लिकेशन लॉन्च करने के तरीके को कंट्रोल करना लेख पढ़ें.

सुझाव/राय दें या शिकायत करें

Chromium टीम, Declarative Link Capturing के बारे में आपके अनुभव जानना चाहती है.

हमें एपीआई डिज़ाइन के बारे में बताएं

क्या एपीआई के बारे में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? इसके अलावा, क्या आपको अपने आइडिया को लागू करने के लिए, कुछ और तरीकों या प्रॉपर्टी की ज़रूरत है? क्या आपको सुरक्षा मॉडल के बारे में कोई सवाल पूछना है या कोई टिप्पणी करनी है? GitHub repo पर, स्पेसिफ़िकेशन से जुड़ी समस्या की शिकायत करें या किसी मौजूदा समस्या के बारे में अपने विचार जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chromium के इस्तेमाल में कोई गड़बड़ी मिली? या क्या लागू करने का तरीका, स्पेसिफ़िकेशन से अलग है? new.crbug.com पर जाकर, गड़बड़ी की रिपोर्ट करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें. इसके अलावा, कॉम्पोनेंट बॉक्स में UI>Browser>WebAppInstalls डालें.

एपीआई के लिए सहायता दिखाना

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

@ChromiumDev को ट्वीट करें. इसके लिए, हैशटैग #DeclarativeLinkCapturing का इस्तेमाल करें. साथ ही, हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

काम के लिंक

Acknowledgements

डिक्लेरेटिव लिंक कैप्चरिंग के बारे में मैट ग्यूका ने बताया था. इसमें एलन कटर और डोमिनिक एनजी ने भी योगदान दिया था. इस एपीआई को एलन कटर ने लागू किया था. इस लेख की समीक्षा जो मेडली, मैट गियूका, एलन कटर, और शुन्या शिशिदो ने की है. ज़ुल्मौरी सावेद्रा की Unsplash पर मौजूद हीरो इमेज.