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

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

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

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

लक्ष्य

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

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

असल में, इसका मतलब दो और खास लक्ष्य हैं:

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

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

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

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

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

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

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

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

अगर कोई उपयोगकर्ता, 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/web-app-origin-association (जुड़ा हुआ ऑरिजिन)

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

डेमो

डेमो में दो साइटें शामिल हैं:

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

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

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

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

एक्सटेंडेड स्कोप में ऑरिजिन के लिंक वाला डेमो पीडब्ल्यूए और एक्सटेंडेड स्कोप में ऑरिजिन नहीं है.

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

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

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

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

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

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

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

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

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

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

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

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

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

अन्य संसाधन

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

Acknowledgements

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