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

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

Demián Renzulli

Thomas Steiner

खास जानकारी

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

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

लक्ष्य

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

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

इसका मतलब है कि आपको दो और खास लक्ष्य हासिल करने होंगे:

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

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

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

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

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

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

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

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

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

लागू करना

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

उससे जुड़े ऑरिजिन की सूची बताना

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

वेब ऐप्लिकेशन मेनिफ़ेस्ट (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 यूआरआई है.

/.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. फ़ुल स्क्रीन पीडब्ल्यूए में, ओरिजिन के एक्सटेंडेड स्कोप में नहीं वाले लिंक पर क्लिक करें.
2. इस वजह से, नेविगेशन होता है और 'दायरे से बाहर' बार दिखाया जाता है.

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

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

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

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

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

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

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

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

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

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

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

अन्य संसाधन

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

धन्यवाद

इस एपीआई को डेवलप करने वाली टीम का खास धन्यवाद. स्कोप एक्सटेंशन की सुविधा को एलन कटर और लू हुआंग ने मैट जूका के सुझाव के साथ शुरू किया था. इस एपीआई को Google Chrome के एलन कटर और Microsoft Edge के हसन तलत, क्रिस्टिन ली, और लू हुआंग ने लागू किया था.