प्रोग्रेसिव वेब ऐप्लिकेशन में मौजूद टैब की मदद से, एक बार में एक से ज़्यादा दस्तावेज़ों पर काम करें
कंप्यूटिंग की दुनिया में, डेस्कटॉप मेटाफ़ोर एक इंटरफ़ेस मेटाफ़ोर है. यह यूनिफ़ाइंग कॉन्सेप्ट का एक सेट है. इसका इस्तेमाल ग्राफ़िकल यूज़र इंटरफ़ेस (जीयूआई) में किया जाता है, ताकि उपयोगकर्ता कंप्यूटर के साथ आसानी से इंटरैक्ट कर सकें. डेस्कटॉप मेटाफ़ोर के मुताबिक, जीयूआई टैब को किताबों, पेपर फ़ाइलों या कार्ड इंडेक्स में डाले गए पारंपरिक कार्ड टैब के हिसाब से बनाया गया है. टैब वाला दस्तावेज़ इंटरफ़ेस (टीडीआई) या टैब, एक ग्राफ़िकल कंट्रोल एलिमेंट है. इसकी मदद से, एक ही विंडो में कई दस्तावेज़ या पैनल रखे जा सकते हैं. साथ ही, दस्तावेज़ों के सेट के बीच स्विच करने के लिए, टैब को नेविगेशनल विजेट के तौर पर इस्तेमाल किया जा सकता है.
प्रोग्रेसिव वेब ऐप्लिकेशन, अलग-अलग डिसप्ले मोड में चल सकते हैं. ये मोड, वेब ऐप्लिकेशन के मेनिफ़ेस्ट में मौजूद display प्रॉपर्टी से तय होते हैं. उदाहरण के लिए, fullscreen, standalone, minimal-ui, और browser. ये डिसप्ले मोड, फ़ॉलबैक चेन ("fullscreen" → "standalone" → "minimal-ui" → "browser") के हिसाब से काम करते हैं. अगर कोई ब्राउज़र किसी दिए गए मोड के साथ काम नहीं करता है, तो वह चेन में मौजूद अगले डिसप्ले मोड पर स्विच कर जाता है. ज़रूरत पड़ने पर, डेवलपर "display_override" प्रॉपर्टी की मदद से, अपनी फ़ॉलबैक चेन तय कर सकते हैं.
टैब वाला ऐप्लिकेशन मोड क्या है
अब तक इस प्लैटफ़ॉर्म पर, PWA डेवलपर के पास अपने उपयोगकर्ताओं को टैब वाले दस्तावेज़ इंटरफ़ेस की सुविधा देने का विकल्प नहीं था. उदाहरण के लिए, एक ही PWA विंडो में अलग-अलग फ़ाइलों में बदलाव करने की सुविधा देने के लिए. टैब वाला ऐप्लिकेशन मोड, इस अंतर को कम करता है.
टैब किए गए ऐप्लिकेशन मोड के लिए, इस्तेमाल के सुझाए गए उदाहरण
टैब वाले ऐप्लिकेशन मोड का इस्तेमाल करने वाली साइटों के उदाहरणों में ये शामिल हैं:
- समय की बचत करने वाले ऐसे ऐप्लिकेशन जिनकी मदद से, उपयोगकर्ता एक ही समय पर एक से ज़्यादा दस्तावेज़ों (या फ़ाइलों) में बदलाव कर सकता है.
- कम्यूनिकेशन ऐप्लिकेशन, जो हर टैब में अलग-अलग रूम में बातचीत करने की सुविधा देते हैं.
- ऐसे ऐप्लिकेशन पढ़ना जो लेख के लिंक को नए इन-ऐप्लिकेशन टैब में खोलते हैं.
डेवलपर के बनाए हुए टैब में अंतर
अलग-अलग ब्राउज़र टैब में दस्तावेज़ होने से रिसॉर्स को मुफ़्त में अलग करना पड़ता है, जो कि आज वेब का इस्तेमाल करके संभव नहीं है. डेवलपर के बनाए गए टैब, ब्राउज़र टैब की तरह सैकड़ों टैब तक स्केल नहीं कर पाएंगे. नेविगेशन इतिहास, "इस पेज का यूआरएल कॉपी करें", "इस टैब को कास्ट करें" या "इस पेज को वेब ब्राउज़र में खोलें" जैसे ब्राउज़र के फ़ीचर, डेवलपर के बनाए गए टैब वाले इंटरफ़ेस पेज पर लागू होंगे, लेकिन फ़िलहाल चुने गए दस्तावेज़ पेज पर नहीं.
"display": "browser" से अंतर
मौजूदा "display": "browser" का पहले से ही एक
खास मतलब है:
उपयोगकर्ता एजेंट (उदाहरण के लिए, ब्राउज़र टैब या नई विंडो) में हाइपरलिंक खोलने के लिए, प्लैटफ़ॉर्म के हिसाब से बनाए गए नियम का इस्तेमाल करके वेब ऐप्लिकेशन खोलता है.
यूज़र इंटरफ़ेस (यूआई) के लिए ब्राउज़र अपनी मर्ज़ी से कुछ भी कर सकते हैं. हालांकि, अगर "display": "browser" का अचानक मतलब "ऐप्लिकेशन के हिसाब से बनी अलग विंडो में चलना, जिसमें ब्राउज़र के फ़ंक्शन न हों, बल्कि टैब वाला दस्तावेज़ इंटरफ़ेस हो" हो जाए, तो यह डेवलपर की उम्मीदों के मुताबिक नहीं होगा.
"display": "browser" सेटिंग को चालू करने का मतलब है कि आपने ऐप्लिकेशन विंडो में ऑप्ट आउट कर दिया है.
मौजूदा स्थिति
| चरण | स्थिति |
|---|---|
| 1. एक्सप्लेनर वीडियो बनाना | हो गया |
| 2. स्पेसिफ़िकेशन का शुरुआती ड्राफ़्ट बनाएं | समीक्षा शुरू नहीं हुई है |
| 3. लोगों के सुझाव, राय या शिकायतें इकट्ठा करें और डिज़ाइन पर दोहराएं | प्रोसेस जारी है |
| 4. ऑरिजिन ट्रायल | प्रोसेस जारी है |
| 5. लॉन्च करें | समीक्षा शुरू नहीं हुई है |
टैब किए गए ऐप्लिकेशन मोड का उपयोग करना
टैब वाले ऐप्लिकेशन मोड का इस्तेमाल करने के लिए, डेवलपर को वेब ऐप्लिकेशन मेनिफ़ेस्ट में "display_override" मोड की खास वैल्यू सेट करके, अपने ऐप्लिकेशन को ऑप्ट इन करना होगा.
{
"display": "standalone",
"display_override": ["tabbed"]
}
इसके बाद, टैब के व्यवहार को बेहतर बनाने के लिए, "tab_strip" प्रॉपर्टी का इस्तेमाल किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. इसमें दो अनुमति वाली सब-प्रॉपर्टी, "home_tab" और "new_tab_button" हैं. अगर "tab_strip" प्रॉपर्टी मौजूद नहीं है, तो खास प्रॉपर्टी की "auto" वैल्यू का इस्तेमाल किया जाता है. ब्राउज़र यह तय करता है कि "auto" के लिए कौनसी वैल्यू का इस्तेमाल करना है.
होम टैब
होम टैब एक पिन किया गया टैब होता है. अगर किसी ऐप्लिकेशन के लिए यह टैब चालू किया गया है, तो ऐप्लिकेशन खुला होने पर यह हमेशा दिखना चाहिए. इस टैब से कभी भी नेविगेट नहीं किया जाना चाहिए. इस टैब से क्लिक किए गए लिंक, ऐप्लिकेशन के नए टैब में खुलने चाहिए. ऐप्लिकेशन, इस टैब को लॉक किए गए यूआरएल और टैब पर दिखाए गए आइकॉन को पसंद के मुताबिक बना सकते हैं.
"home_tab" के लिए ये वैल्यू इस्तेमाल की जा सकती हैं:
"auto"का इस्तेमाल करके, ब्राउज़र को यह तय करने दें कि क्या करना है."absent"का इस्तेमाल करके, ब्राउज़र को होम टैब न दिखाने के लिए कहें.- दो सब-प्रॉपर्टी वाला ऑब्जेक्ट:
"url"को होम टैब को लॉक करने के लिए,"auto"या यूआरएल की अनुमति है."icons", जिसमें"auto"की अनुमति वाली वैल्यू या मुख्य"icons"प्रॉपर्टी में मौजूद आइकॉन का कलेक्शन हो.
नया टैब खोलने का बटन
अगर नया टैब बटन मौजूद है, तो यह ऐप्लिकेशन के दायरे में आने वाले यूआरएल पर एक नया टैब खोलना चाहिए. ऐप्लिकेशन, इस बटन के लिए कस्टम यूआरएल और आइकॉन सेट कर सकता है. ब्राउज़र यह तय कर सकते हैं कि इन टैब को खींचकर, नई विंडो बनाने या ब्राउज़र टैब के साथ जोड़ने के लिए, उन्हें कैसे हैंडल किया जाए.
"new_tab_button" के लिए ये वैल्यू इस्तेमाल की जा सकती हैं:
"auto"का इस्तेमाल करके, ब्राउज़र को यह तय करने दें कि क्या करना है.- ब्राउज़र को नया टैब बटन न दिखाने के लिए कहें. इसके लिए
"absent". - दो सब-प्रॉपर्टी वाला एक ऑब्जेक्ट:
"url", जिसमें"auto"की अनुमति वाली वैल्यू या ऐसा यूआरएल हो सकता है जिस पर नए टैब खोले जा सकें."icons", जिसमें"auto"की अनुमति वाली वैल्यू या मुख्य"icons"प्रॉपर्टी में मौजूद आइकॉन का कलेक्शन हो.
पूरा उदाहरण
टैब वाले इंटरफ़ेस वाले ऐप्लिकेशन के व्यवहार को कॉन्फ़िगर करने का पूरा उदाहरण ऐसा दिख सकता है:
{
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"url": "./home/",
"icons": [
{
"src": "./home.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
},
"new_tab_button": {
"url": "./new-tab/",
"icons": [
{
"src": "./new-tab.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
}
}
टैब किए गए ऐप्लिकेशन मोड का पता लगाया जा रहा है
ऐप्लिकेशन यह पता लगा सकते हैं कि वे टैब वाले ऐप्लिकेशन मोड में चल रहे हैं या नहीं. इसके लिए, वे सीएसएस या JavaScript में, display-mode सीएसएस मीडिया की सुविधा की जांच करते हैं:
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
Launch Handler API के साथ इंटरैक्शन
Launch Handler API की मदद से, साइटें ऐप्लिकेशन के लॉन्च को मौजूदा ऐप्लिकेशन विंडो में रीडायरेक्ट कर सकती हैं. इससे डुप्लीकेट विंडो खुलने से रोकने में मदद मिलती है. जब टैब वाला कोई ऐप्लिकेशन "client_mode": "navigate-new" सेट करता है, तो ऐप्लिकेशन लॉन्च होने पर, ऐप्लिकेशन की मौजूदा विंडो में नया टैब खुलेगा.
डेमो
ब्राउज़र फ़्लैग सेट करके टैब किए गए ऐप्लिकेशन मोड को आज़माया जा सकता है:
#enable-desktop-pwas-tab-stripफ़्लैग सेट करें.- tabbed-application-mode.glitch.me ऐप्लिकेशन (सोर्स कोड) इंस्टॉल करें.
- अलग-अलग टैब पर मौजूद अलग-अलग लिंक पर क्लिक करें.
सुझाव/राय दें या शिकायत करें
Chrome टीम टैब वाले ऐप्लिकेशन मोड के साथ आपके अनुभवों के बारे में जानना चाहती है.
हमें एपीआई के डिज़ाइन के बारे में बताएं
क्या टैब वाले ऐप्लिकेशन मोड में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? वेब ऐप्लिकेशन मेनिफ़ेस्ट से जुड़ी समस्या पर टिप्पणी करें. यह समस्या हमने बनाई है.
लागू करने से जुड़ी समस्या की शिकायत करना
क्या आपको Chrome में इस सुविधा को लागू करने में कोई गड़बड़ी मिली? new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें. इसके बाद, Components बॉक्स में UI>Browser>WebAppInstalls डालें.
गड़बड़ी, समस्या को दोहराने के उदाहरणों को तुरंत और आसानी से शेयर करने के लिए बहुत अच्छा है.
एपीआई के लिए सहायता दिखाना
क्या आपको टैब वाले ऐप्लिकेशन मोड का इस्तेमाल करना है? सार्वजनिक तौर पर सहायता करने से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.
हैशटैग #TabbedApplicationMode का इस्तेमाल करके @ChromiumDev को ट्वीट भेजें और हमें बताएं कि उनका इस्तेमाल कहां और कैसे किया जा रहा है.
काम के लिंक
- एक्सप्लेनर
- वेब ऐप्लिकेशन मेनिफ़ेस्ट स्पेसिफ़िकेशन से जुड़ी समस्या
- Chromium में गड़बड़ी
- Blink कॉम्पोनेंट:
UI>Browser>WebAppInstalls
धन्यवाद
टैब वाले ऐप्लिकेशन मोड को मैट जूका ने एक्सप्लोर किया था. Chrome को एक्सपेरिमेंट के तौर पर लागू करने की प्रोसेस, ऐलन कटर का काम थी. इस लेख की समीक्षा जो मेडली ने की है. विकिमीडिया कॉमंस पर टिल नियरमैन की हीरो इमेज.
