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

Thomas Steiner

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

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

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

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

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

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

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

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

about://flags से चालू करना

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

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

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

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

डेमो

डेक्लेरेटिव लिंक कैप्चरिंग के डेमो में, दो डेमो होते हैं जो एक साथ इंटरैक्ट करते हैं:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

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

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

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

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

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

  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 फ़ील्ड और डेक्लेरेटिव लिंक कैप्चरिंग ऑरिजिन ट्रायल का रजिस्ट्रेशन 30 मार्च, 2022 तक मान्य है. इससे यह पक्का होगा कि Chromium 97 और उससे पहले के वर्शन का इस्तेमाल करने वाले लोग, अब भी कैप्चर किए गए लिंक पर वेब ऐप्लिकेशन को लॉन्च कर पाएंगे.

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

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

Chromium की टीम, डेक्लेरेटिव लिंक कैप्चरिंग के बारे में आपके अनुभवों के बारे में जानना चाहती है.

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

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

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

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

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

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

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

मददगार लिंक

आभार

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