वेब ऐप्लिकेशन स्कोप एक्सटेंशन

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

Demián Renzulli

Thomas Steiner

खास जानकारी

कुछ वेब ऐप्लिकेशन में एक से ज़्यादा ऑरिजिन होते हैं, उदाहरण के लिए, मुख्य ऐप्लिकेशन के तौर पर example.com और उसके बाद space_1.example.com, ..., space_n.example.com, और इन्हें सब-अनुभवों के तौर पर special-example.com के साथ जोड़ा जाता है. ये सभी वेब ऐप्लिकेशन, मुख्य ऐप्लिकेशन में काम करते हैं. इस तरह के साइट आर्किटेक्चर के असर, प्रोग्रेसिव वेब ऐप्लिकेशन के संदर्भ में होते हैं. इन सीमाओं में, सर्विस वर्कर, किसी भी तरह के डिवाइस, लोकल स्टोरेज, और सभी ऑरिजिन के लिए अनुमतियों को शेयर न कर पाना शामिल है. साथ ही, स्टैंडअलोन PWA में क्रॉस-ऑरिजिन नेविगेशन, एक विंडो यूआई ("दायरा से बाहर" बार) दिखाता है. इससे पता चलता है कि उपयोगकर्ता ने PWA का इस्तेमाल करना बंद कर दिया है. इनमें से कुछ समस्याओं को हल करने का तरीका जानने के लिए, एक से ज़्यादा ऑरिजिन वाली साइटों में प्रोग्रेसिव वेब ऐप्लिकेशन और एक ही डोमेन पर कई प्रोग्रेसिव वेब ऐप्लिकेशन बनाना लेख देखें.

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

ध्यान दें: यह फ़ॉर्म लिखते समय, इस दस्तावेज़ में शामिल स्कोप एक्सटेंशन की दोनों सुविधाओं (क्रॉस-ऑरिजिन इन-स्कोप नेविगेशन और क्रॉस-ऑरिजिन लिंक कैप्चर करने की सुविधा) के साथ, सिर्फ़ ChromeOS के साथ काम किया जा सकता है. क्रॉस-ऑरिजिन इन-स्कोप नेविगेशन Windows, macOS, और Linux पर Chrome में भी काम करता है. हालांकि, लिंक कैप्चर करने की सुविधा अभी इन प्लैटफ़ॉर्म पर उपलब्ध नहीं है. स्कोप एक्सटेंशन, फ़िलहाल मोबाइल डिवाइस पर उपलब्ध नहीं हैं.

लक्ष्य

Scope एक्सटेंशन API का मुख्य लक्ष्य, एक से ज़्यादा सबडोमेन और टॉप लेवल डोमेन को कंट्रोल करने वाली साइटों को, वेब ऐप्लिकेशन यूज़र इंटरफ़ेस (यूआई) और लिंक कैप्चर करने के लिए, एक-दूसरे से जुड़े वेब ऐप्लिकेशन की तरह काम करने की अनुमति देना होता है. उदाहरण के लिए, example.com.co.uk और support.example.com पर मौजूद साइट example.com को ज़्यादा से ज़्यादा एक वेब ऐप्लिकेशन की तरह काम करने देना.

स्कोप एक्सटेंशन की मदद से, एक से ज़्यादा ऑरिजिन वाले PWA, वेब ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के लिए, वाकई में वेब ऐप्लिकेशन की तरह काम करते हैं.

व्यावहारिक तौर पर, इसके दो और खास लक्ष्य होते हैं:

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

क्रॉस-ऑरिजिन इन-स्कोप नेविगेशन

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

जब उपयोगकर्ता किसी स्टैंडअलोन PWA में, अलग-अलग ऑरिजिन पर नेविगेट करते हैं, तब Chrome में "स्कोप से बाहर" बार दिखता है.

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

क्रॉस-ऑरिजिन लिंक कैप्चर करना

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

ChromeOS में एक टैब के लिए, Chrome के पता बार का फ़्रैगमेंट. यह एक विज़ुअल संकेत दिखाता है कि इस लिंक को PWA मैनेज कर सकता है और इस फ़ैसले को याद रखने का विकल्प मौजूद है.

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

लागू करने का तरीका

स्कोप एक्सटेंशन लागू करने के लिए, मुख्य ऑरिजिन और उससे जुड़े ऑरिजिन के बीच संबंध बनाना ज़रूरी होता है.

असोसिएट किए गए ऑरिजिन की सूची का एलान करें

वेब ऐप्लिकेशन को अन्य ऑरिजिन पर लागू करने के लिए, scope_extensions वेब ऐप्लिकेशन मेनिफ़ेस्ट के सदस्य को मुख्य PWA ऑरिजिन में जोड़ें.

वेब ऐप्लिकेशन मेनिफ़ेस्ट (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

असोसिएशन की पुष्टि करें

सूची में शामिल हर ऑरिजिन, /.well-known/web-app-origin-association कॉन्फ़िगरेशन फ़ाइल का इस्तेमाल करके वेब ऐप्लिकेशन के साथ जुड़ने की पुष्टि करता है. इस फ़ाइल का नाम web-app-origin-association होना चाहिए और इसे सही जगह पर दिखाया जाना चाहिए. ऐसा इसलिए, क्योंकि यह पूरी जानकारी वाला यूआरआई है.

/.well-known/web-app-origin-association (अफ़िलिएट ऑरिजिन)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

डेमो

डेमो में दो साइटें होती हैं:

• मुख्य PWA: वह असली PWA जो scope_extensions के सदस्य के ज़रिए, अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट में जुड़े ऑरिजिन की सूची की जानकारी देता है.
• एक्सटेंडेड स्कोप में ऑरिजिन: ऐसा ऑरिजिन, जो मुख्य PWA के स्कोप से बाहर का है, लेकिन मुख्य PWA ने असोसिएट किए गए ऑरिजिन के तौर पर उसे लिस्ट किया है और अपनी web-app-origin-association फ़ाइल की मदद से संबंध की पुष्टि करने के बाद उसे जोड़ा है.

यहां दिए गए टेस्ट करने के लिए, आपको about://flags/#enable-desktop-pwas-scope-extensions फ़्लैग को चालू करना होगा. यह Chrome v115 और उसके बाद के वर्शन में उपलब्ध है.

क्रॉस-ऑरिजिन नेविगेशन की जांच करें

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

PWA का डेमो जिसमें ऑरिजिन के लिंक शामिल हैं और जो एक्सटेंडेड स्कोप में और ऑरिजिन के लिंक के साथ काम नहीं करते हैं.

डिफ़ॉल्ट क्रॉस-ऑरिजिन नेविगेशन (एक्सटेंडेड स्कोप में नहीं)

1. फ़ुल स्क्रीन वाले PWA में, ऑरिजिन एक्सटेंडेट स्कोप में नहीं के लिंक पर क्लिक करें.
2. इस वजह से, नेविगेशन होता है और 'दायरे से बाहर' वाला बार दिखता है.

स्टैंडअलोन मोड में PWA के लिए, क्रॉस-ऑरिजिन नेविगेशन के लिए डिफ़ॉल्ट रूप से, "स्कोप से बाहर" बार दिखाया जाता है.

स्कोप एक्सटेंशन के साथ क्रॉस-ऑरिजिन नेविगेशन (एक्सटेंडेड स्कोप में)

1. PWA के होम पेज पर वापस जाएं.
2. ऑरिजिन एक्सटेंडेट स्कोप में नहीं है के लिंक पर क्लिक करें.
3. डिफ़ॉल्ट रूप से, "दायरे से बाहर" बार दिखना चाहिए, लेकिन स्कोप एक्सटेंशन असोसिएशन की वजह से, ऐसा नहीं होता.

स्कोप एक्सटेंशन की मदद से ऑरिजिन असोसिएशन बनाए जाने के बाद, क्रॉस-ऑरिजिन नेविगेशन में "स्कोप से बाहर" बार नहीं दिखाया गया है.

क्रॉस-ऑरिजिन लिंक कैप्चर करने की जांच करें

1. किसी ChromeOS डिवाइस में, मुख्य PWA खोलें और उसे इंस्टॉल करें.
2. नीचे दिए गए लिंक पर क्लिक करें: संबंधित ऑरिजिन.
3. यह लिंक, ब्राउज़र के नए टैब में खुलता है और इंस्टॉल किए गए PWA में इसे खोलने का अनुरोध दिखता है.

PWA के ऑरिजिन के लिंक पर क्लिक करने पर लिंक नए टैब में खुलता है और "ऐप्लिकेशन में खोलें" आइकॉन दिखता है. इससे उपयोगकर्ता, अपने-आप लिंक कैप्चर करने के लिए ऑप्ट-इन कर सकता है.

ऑरिजिन ट्रायल

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

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

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

ज़्यादा रिसॉर्स

• Scope एक्सटेंशन API - ऑरिजिन ट्रायल
• Chrome का स्टेटस - वेब ऐप्लिकेशन के स्कोप एक्सटेंशन
• वेब ऐप्लिकेशन के बारे में जानकारी देने वाले स्कोप एक्सटेंशन
• प्रयोग करने की इच्छा
• Mozilla के मानकों की स्थिति
• Apple के मानकों की स्थिति
• Chromium की गड़बड़ी
• एक से ज़्यादा ऑरिजिन वाली साइटों में प्रोग्रेसिव वेब ऐप्लिकेशन
• एक ही डोमेन पर, कई प्रोग्रेसिव वेब ऐप्लिकेशन बनाना

स्वीकार हैं

इस एपीआई को तैयार करने वाली टीम को खास तौर पर धन्यवाद. स्कोप एक्सटेंशन को Matt Giuca से मिले इनपुट के साथ, Alan Cutter और Lu हुआंग ने तय किया था. इस एपीआई को Google Chrome के ऐलन कटर ने लागू किया. साथ ही, Microsoft Edge से हसन तलत, क्रिस्टिन ली, और लु हुआंग ने इस एपीआई को लागू किया.