यूआरएल हैंडलर के तौर पर PWA

ज़्यादा इंटिग्रेटेड अनुभव के लिए, इंस्टॉल किए गए PWA को यूआरएल मैनेज करने दें.

Thomas Steiner

यूआरएल हैंडलर के तौर पर PWA क्या हैं?

मान लें कि आपको macOS पर Messages जैसे किसी इंस्टैंट मैसेजिंग ऐप्लिकेशन का इस्तेमाल करके, अपने दोस्त से चैट करनी है और संगीत के बारे में बात करनी है. अब मान लीजिए कि आप दोनों के डिवाइसों पर music.example.com का PWA इंस्टॉल है. अगर आपको अपना पसंदीदा ट्रैक शेयर करना है, ताकि आपका दोस्त उसका आनंद ले सके, तो उसे https://music.example.com/rick-astley/never-gonna-give-you-up जैसा एक डीप लिंक भेजा जा सकता है. यह लिंक काफ़ी लंबा है, इसलिए हो सकता है कि music.example.com के डेवलपर ने हर ट्रैक के लिए एक अलग छोटा लिंक, जैसे कि https://🎵.example.com/r-a/n-g-g-y-u जोड़ने का फ़ैसला किया हो.

यूआरएल हैंडलर के तौर पर PWA को, music.example.com जैसे ऐप्लिकेशन को उन यूआरएल के लिए, यूआरएल हैंडलर के तौर पर रजिस्टर करने की अनुमति मिलती है जो https://music.example.com, https://*.music.example.com या https://🎵.example.com जैसे पैटर्न से मिलते-जुलते हैं. ऐसा इसलिए किया जाता है, ताकि PWA के बाहर के लिंक, जैसे कि इंस्टैंट मेसेंजर ऐप्लिकेशन या ईमेल क्लाइंट के लिंक से, ब्राउज़र टैब के बजाय इंस्टॉल किए गए PWA में खोलें.

यूआरएल हैंडलर के तौर पर PWA में दो चीज़ें जोड़ी गई हैं:

1. "url_handlers" वेब ऐप्लिकेशन मेनिफ़ेस्ट का सदस्य.
2. web-app-origin-association फ़ाइल फ़ॉर्मैट, जिसके अंदर और बाहर के यूआरएल असोसिएशन की पुष्टि की जा सकती है.

यूआरएल हैंडलर के तौर पर PWA के लिए, इस्तेमाल के सुझाए गए उदाहरण

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

• संगीत या वीडियो स्ट्रीम करने वाली साइटें, इसलिए ऐप्लिकेशन के प्लेयर में खुलने वाले लिंक या प्लेलिस्ट के लिंक ट्रैक करें.
• समाचार या आरएसएस रीडर, इसलिए ऐप्लिकेशन के रीडर मोड में खुलेगा.

यूआरएल हैंडलर के तौर पर PWA का इस्तेमाल करने का तरीका

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

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

"url_handlers" वेब ऐप्लिकेशन मेनिफ़ेस्ट का सदस्य

इंस्टॉल किए गए PWA को यूआरएल पैटर्न से जोड़ने के लिए, इन पैटर्न को वेब ऐप्लिकेशन मेनिफ़ेस्ट में शामिल करना होगा. यह रिफ़ंड "url_handlers" के सदस्य की मदद से मिलता है. यह, origin प्रॉपर्टी वाले ऑब्जेक्ट के कलेक्शन को स्वीकार करता है. यह एक ज़रूरी string है, जो ऑरिजिन से मेल खाने के लिए एक पैटर्न होता है. इन पैटर्न में, एक से ज़्यादा सब-डोमेन (जैसे https://*.example.com) को शामिल करने के लिए, वाइल्डकार्ड (*) प्रीफ़िक्स का इस्तेमाल किया जा सकता है. इन ऑरिजिन से मेल खाने वाले यूआरएल को यह वेब ऐप्लिकेशन मैनेज कर सकता है. इस स्कीम को हमेशा https:// माना जाता है, लेकिन साफ़ तौर पर इसके बारे में बताना ज़रूरी है.

यहां दिए गए वेब ऐप्लिकेशन मेनिफ़ेस्ट के हिस्से में दिखाया गया है कि शुरुआती पैराग्राफ़ में संगीत के PWA का उदाहरण कैसे सेट अप किया जा सकता है. वाइल्डकार्ड ("https://*.music.example.com") के साथ दूसरी एंट्री यह पक्का करती है कि ऐप्लिकेशन https://www.music.example.com या https://marketing-activity.music.example.com जैसे दूसरे संभावित उदाहरणों के लिए भी चालू हो.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

web-app-origin-association फ़ाइल

PWA किसी अलग ऑरिजिन (music.example.com) पर मौजूद है, इसलिए इसे मैनेज किए जाने वाले कुछ यूआरएल (जैसे, https://🎵.example.com), तो ऐप्लिकेशन को इन दूसरे ऑरिजिन के मालिकाना हक की पुष्टि करनी होगी. ऐसा दूसरे ऑरिजिन पर होस्ट की गई web-app-origin-association फ़ाइल में होता है.

इस फ़ाइल में मान्य JSON होना चाहिए. टॉप लेवल स्ट्रक्चर एक ऑब्जेक्ट है, जिसके सदस्य का नाम "web_apps" है. यह सदस्य, ऑब्जेक्ट का कलेक्शन है और हर ऑब्जेक्ट, किसी खास वेब ऐप्लिकेशन के लिए एंट्री दिखाता है. हर ऑब्जेक्ट में:

हर "details" ऑब्जेक्ट में:

संगीत के PWA के उदाहरण के लिए, ऊपर दी गई web-app-origin-association फ़ाइल का उदाहरण यहां दिया गया है. इसे ऑरिजिन 🎵.example.com पर होस्ट किया जाएगा और music.example.com PWA से असोसिएट किया जाएगा. PWA की पहचान, वेब ऐप्लिकेशन मेनिफ़ेस्ट यूआरएल से की जाती है.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

यूआरएल कब मैच होता है?

इन दोनों शर्तों के पूरा होने पर, PWA हैंडलिंग के लिए एक यूआरएल से मैच करता है:

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

web-app-origin-association फ़ाइल खोजे जाने से जुड़ी जानकारी

ब्राउज़र web-app-origin-association फ़ाइल खोज सके, इसके लिए डेवलपर को ऐप्लिकेशन के रूट में /.well-known/ फ़ोल्डर में web-app-origin-association फ़ाइल डालनी होगी. यह काम करे, इसके लिए फ़ाइल का नाम web-app-origin-association होना चाहिए.

डेमो

PWA को यूआरएल हैंडलर के तौर पर टेस्ट करने के लिए, पक्का करें कि आपने ऊपर बताए गए तरीके से ब्राउज़र फ़्लैग सेट किया हो. इसके बाद, https://mandymsft.github.io/pwa/ पर जाकर PWA इंस्टॉल करें. इसके वेब ऐप्लिकेशन मेनिफ़ेस्ट में, देखें कि यह इन यूआरएल पैटर्न वाले यूआरएल को हैंडल करता है: https://mandymsft.github.io और https://luhuangmsft.github.io. बाद वाला ऑरिजिन, PWA से अलग है (luhuangmsft.github.io) इसलिए, mandymsft.github.io पर PWA को मालिकाना हक की पुष्टि करनी होगी. यह पुष्टि, https://luhuangmsft.github.io/.well-known/web-app-origin-association पर होस्ट की गई web-app-origin-association फ़ाइल से की जाती है.

यह जांचने के लिए कि यह वाकई काम कर रहा है या नहीं, अपनी पसंद के इंस्टैंट मैसेजिंग ऐप्लिकेशन या ईमेल क्लाइंट में देखे गए ऐसे ईमेल का इस्तेमाल करके खुद को एक टेस्ट मैसेज भेजें जो macOS पर मेल की तरह वेब पर आधारित नहीं है. ईमेल या मैसेज में https://mandymsft.github.io या https://luhuangmsft.github.io में से कोई एक लिंक शामिल होना चाहिए. दोनों ऐप्लिकेशन, इंस्टॉल किए गए PWA में खुले होने चाहिए.

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

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

उपयोगकर्ता कंट्रोल

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

पारदर्शिता

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

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

अनुमति का बने रहना

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

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

Chromium की टीम, यूआरएल हैंडलर के तौर पर PWA के साथ आपके अनुभव के बारे में जानना चाहती है.

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

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

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

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

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

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

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

मददगार लिंक

• सार्वजनिक तौर पर जानकारी देने वाला वीडियो
• डेमोग्राफ़िक जानकारी | डेमो सोर्स
• Chromium ट्रैकिंग की गड़बड़ी
• ChromeStatus.com एंट्री
• ब्लिंक कॉम्पोनेंट: UI>Browser>WebAppInstalls
• टैग की समीक्षा
• Microsoft दस्तावेज़

स्वीकार हैं

यूआरएल हैंडलर के तौर पर PWA को Microsoft Edge की टीम से, लु हुआंग और मैंडी चेन ने तय और लागू किया है. इस लेख की समीक्षा जो मेडली ने की है. Unsplash पर ब्राइसन हैमर की हीरो इमेज.