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

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

Demián Renzulli

Thomas Steiner

खास जानकारी

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

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

लक्ष्य

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

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

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

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

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

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

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

स्कोप एक्सटेंशन के साथ, जब उपयोगकर्ता किसी ताकि पीडब्ल्यूए को एक ही अनुभव के तौर पर पेश किया जा सके.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अन्य संसाधन

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

स्वीकार की गई

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