प्रोग्रेसिव वेब ऐप्लिकेशन में टैब की मदद से, एक से ज़्यादा दस्तावेज़ों पर एक साथ काम करना
कंप्यूटिंग की दुनिया में, डेस्कटॉप मेटाफ़ोर एक इंटरफ़ेस मेटाफ़ोर है. यह यूनिफ़ाइंग कॉन्सेप्ट का एक सेट है. इसका इस्तेमाल ग्राफ़िकल यूज़र इंटरफ़ेस (जीयूआई) में किया जाता है, ताकि उपयोगकर्ता कंप्यूटर के साथ आसानी से इंटरैक्ट कर सकें. डेस्कटॉप मेटाफ़ोर के मुताबिक, जीयूआई टैब को किताबों, पेपर फ़ाइलों या कार्ड इंडेक्स में डाले गए पारंपरिक कार्ड टैब के हिसाब से बनाया गया है. टैब वाला दस्तावेज़ इंटरफ़ेस (टीडीआई) या टैब, एक ग्राफ़िकल कंट्रोल एलिमेंट है. इसकी मदद से, एक ही विंडो में कई दस्तावेज़ या पैनल रखे जा सकते हैं. साथ ही, दस्तावेज़ों के सेट के बीच स्विच करने के लिए, टैब को नेविगेशनल विजेट के तौर पर इस्तेमाल किया जा सकता है.
प्रोग्रेसिव वेब ऐप्लिकेशन, अलग-अलग डिसप्ले मोड में चल सकते हैं. ये मोड, वेब ऐप्लिकेशन के मेनिफ़ेस्ट में मौजूद 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 टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.
@ChromiumDev को हैशटैग #TabbedApplicationMode का इस्तेमाल करके ट्वीट करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.
काम के लिंक
- एक्सप्लेनर
- वेब ऐप्लिकेशन मेनिफ़ेस्ट स्पेसिफ़िकेशन से जुड़ी समस्या
- Chromium में गड़बड़ी
- Blink कॉम्पोनेंट:
UI>Browser>WebAppInstalls
आभार
टैब वाले ऐप्लिकेशन मोड को मैट जूका ने एक्सप्लोर किया था. Chrome में एक्सपेरिमेंट के तौर पर इसे लागू करने का काम, एलन कटर ने किया था. इस लेख की समीक्षा जो मेडली ने की है. विकिमीडिया कॉमंस पर, टिल नीरमन की दी गई हीरो इमेज.
