अपने प्रोग्रेसिव वेब ऐप्लिकेशन में मौजूद टैब की मदद से, एक बार में एक से ज़्यादा दस्तावेज़ों पर काम करें
कंप्यूटिंग की दुनिया में, डेस्कटॉप मेटाफ़ोर, इंटरफ़ेस का एक रूप है. यह ग्राफ़िकल यूज़र इंटरफ़ेस (जीयूआई) में इस्तेमाल होने वाले यूनिफ़ाइड कॉन्सेप्ट का सेट होता है. इसकी मदद से, उपयोगकर्ता कंप्यूटर के साथ आसानी से इंटरैक्ट कर पाते हैं. डेस्कटॉप रूपों के मुताबिक, जीयूआई टैब को किताबों, पेपर फ़ाइलों या कार्ड इंडेक्स में शामिल किए गए पारंपरिक कार्ड टैब के बाद मॉडल किया जाता है. टैब वाला दस्तावेज़ इंटरफ़ेस (टीडीआई) या टैब एक ग्राफ़िकल कंट्रोल एलिमेंट है. इसकी मदद से एक ही विंडो में एक से ज़्यादा दस्तावेज़ों या पैनल को शामिल किया जा सकता है. दस्तावेज़ों के सेट के बीच स्विच करने के लिए, नेविगेशन वाले विजेट के तौर पर टैब का इस्तेमाल किया जाता है.
प्रोग्रेसिव वेब ऐप्लिकेशन, वेब ऐप्लिकेशन मेनिफ़ेस्ट में मौजूद 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. खास जानकारी का शुरुआती ड्राफ़्ट बनाएं | Not started |
| 3. लोगों की राय जानें और डिज़ाइन को बेहतर बनाएं | प्रोसेस जारी है |
| 4. ऑरिजिन ट्रायल | प्रोसेस जारी है |
| 5. लॉन्च करना | Not started |
टैब वाले ऐप्लिकेशन मोड का इस्तेमाल किया जा रहा है
टैब किए गए ऐप्लिकेशन मोड का इस्तेमाल करने के लिए, डेवलपर को वेब ऐप्लिकेशन मेनिफ़ेस्ट में
"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"की मुख्य"icons"प्रॉपर्टी में,"auto"की वैल्यू या आइकॉन की कलेक्शन वाली वैल्यू दी गई हैं.
'नया टैब' बटन
अगर 'नया टैब' बटन मौजूद हो, तो इससे ऐप्लिकेशन के दायरे में आने वाले यूआरएल पर एक नया टैब खुलना चाहिए. ऐप्लिकेशन इस बटन के लिए कस्टम यूआरएल और आइकॉन सेट करने का विकल्प चुन सकता है. ब्राउज़र यह तय कर सकते हैं कि नई विंडो बनाने या ब्राउज़र टैब के साथ जोड़ने के लिए, इन टैब को खींचकर कैसे मैनेज करना है.
"new_tab_button" के लिए इन वैल्यू का इस्तेमाल किया जा सकता है:
"auto", ताकि ब्राउज़र यह तय कर सके कि क्या करना है.- ब्राउज़र को नया टैब बटन न दिखाने के लिए
"absent". - दो सब-प्रॉपर्टी वाला ऑब्जेक्ट:
"url"में"auto"की वैल्यू डालें या नए टैब खोलने के लिए नीति के दायरे में आने वाला यूआरएल डालें."icons"की मुख्य"icons"प्रॉपर्टी में,"auto"की वैल्यू या आइकॉन की कलेक्शन वाली वैल्यू दी गई हैं.
उदाहरण को पूरा करें
टैब किए गए इंटरफ़ेस वाले ऐप्लिकेशन के व्यवहार को कॉन्फ़िगर करने का पूरा उदाहरण इस तरह दिख सकता है:
{
"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 हैंडलर API के साथ इंटरैक्शन
लॉन्च हैंडलर API की मदद से साइटें, ऐप्लिकेशन को मौजूदा ऐप्लिकेशन विंडो में रीडायरेक्ट कर सकती हैं. ऐसा करके, डुप्लीकेट विंडो को खुलने से रोका जा सकता है. जब टैब किया गया कोई ऐप्लिकेशन "client_mode": "navigate-new" को सेट करता है, तो ऐप्लिकेशन लॉन्च होने से मौजूदा ऐप्लिकेशन विंडो में एक नया टैब खुलेगा.
डेमो
ब्राउज़र फ़्लैग सेट करके, टैब किए गए ऐप्लिकेशन मोड को आज़माया जा सकता है:
#enable-desktop-pwas-tab-stripफ़्लैग सेट करें.- ऐप्लिकेशन tabbed-Application-mode.glitch.me इंस्टॉल करें (सोर्स कोड).
- अलग-अलग टैब पर मौजूद अलग-अलग लिंक पर क्लिक करें.
सुझाव/राय दें या शिकायत करें
Chrome टीम, टैब किए गए ऐप्लिकेशन मोड के आपके अनुभवों के बारे में जानना चाहती है.
हमें इस एपीआई के डिज़ाइन के बारे में बताएं
क्या टैब किए गए ऐप्लिकेशन मोड में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? हमारी ओर से बनाई गई वेब ऐप्लिकेशन मेनिफ़ेस्ट समस्या पर टिप्पणी करें.
लागू करने से जुड़ी समस्या की शिकायत करें
क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? new.crbug.com पर गड़बड़ी की शिकायत करें. जितना हो सके ज़्यादा से ज़्यादा जानकारी शामिल करें, सामग्री को फिर से बनाने के आसान निर्देश दें और कॉम्पोनेंट बॉक्स में UI>Browser>WebAppInstalls डालें.
Glitch का इस्तेमाल करके, रीप्रोडक्शन को तेज़ी से और आसानी से शेयर किया जा सकता है.
एपीआई के साथ काम करता है
क्या आपको टैब किए गए ऐप्लिकेशन मोड का इस्तेमाल करना है? आपकी सार्वजनिक मदद से Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, दूसरे ब्राउज़र वेंडर को यह भी पता चलता है कि उनकी मदद करना कितना ज़रूरी है.
हैशटैग #TabbedApplicationMode का इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें
और हमें बताएं कि आप उसका इस्तेमाल कहां और कैसे कर रहे हैं.
काम के कुछ लिंक
- पूरी जानकारी
- वेब ऐप्लिकेशन मेनिफ़ेस्ट की खास जानकारी
- Chromium की गड़बड़ी
- ब्लिंक कॉम्पोनेंट:
UI>Browser>WebAppInstalls
स्वीकार हैं
टैब वाले ऐप्लिकेशन मोड को Matt Giuca ने एक्सप्लोर किया था. Chrome में इसे आज़माने के लिए एलन कटर का काम किया गया था. इस लेख की समीक्षा जो मेडली ने की है. Wikiमीडिया कॉमंस पर टिल नीरमैन की हीरो इमेज.
