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

Thomas Steiner

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

डिक्लेरेटिव लिंक कैप्चर करने की सुविधा क्या है?

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

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

• दूसरे वेब पेजों से लिंक पर क्लिक किया.
• यूआरएल, ऑपरेटिंग सिस्टम में किसी प्लैटफ़ॉर्म के हिसाब से लॉन्च होता है.
• App Shortcuts API से जनरेट होने वाले नेविगेशन.
• यूआरएल प्रोटोकॉल हैंडलर से जुड़े लिंक.
• फ़ाइल हैंडलर की वजह से होने वाले नेविगेशन.
• शेयर टारगेट एपीआई से होने वाले नेविगेशन.
• ...और अन्य.

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

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

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

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

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

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

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

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

डिक्लेरेटिव लिंक कैप्चर करने की सुविधा को इस्तेमाल करने का तरीका?

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

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

ध्यान दें: ऐसे विकल्पों को जोड़ने के बारे में चर्चा हो रही है जिनसे कोई विंडो नहीं खुलती, बल्कि चुनी गई फ़ोरग्राउंड विंडो या सर्विस वर्कर में launch इवेंट ट्रिगर होता है. ज़्यादा जानकारी के लिए, launch इवेंट के बारे में जानकारी देने वाला टूल देखें. खास तौर पर, existing-client-event और service-worker के सेक्शन भी देखें.

डेमो

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

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

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

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

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

हैंडलर API लॉन्च करने के लिए माइग्रेट करें

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

लिंक कैप्चर करना

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

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

फ़िलहाल, लिंक कैप्चर करने की सुविधा सिर्फ़ ChromeOS पर काम करती है. Windows, macOS, और Linux पर यह सुविधा काम कर रही है.

हैंडलर API लॉन्च करें

इनकमिंग नेविगेशन के कंट्रोल को Launch हैंडलर 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" }. इस विकल्प की मदद से, लिंक नेविगेशन कैप्चर करने पर, आपके ऐप्लिकेशन के स्कोप में शामिल पेज अपने-आप नेविगेट नहीं होंगे. नेविगेशन चालू करने के लिए, आपको window.launchQueue.setConsumer() को कॉल करके JavaScript में LaunchParams को हैंडल करना होगा.

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

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

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

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

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

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

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

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

एपीआई के साथ काम करता है

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

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

मददगार लिंक

• खास जानकारी वाला ड्राफ़्ट
• पूरी जानकारी
• Chromium की गड़बड़ी
• प्रोटोटाइप के बारे में जानकारी
• प्रयोग करने की इच्छा
• ChromeStatus एंट्री

स्वीकार हैं

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