PWA के लिए, टैब वाला ऐप्लिकेशन मोड

प्रोग्रेसिव वेब ऐप्लिकेशन में टैब की मदद से, एक से ज़्यादा दस्तावेज़ों पर एक साथ काम करना

Thomas Steiner

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

प्रोग्रेसिव वेब ऐप्लिकेशन, अलग-अलग डिसप्ले मोड में चल सकते हैं. ये मोड, वेब ऐप्लिकेशन के मेनिफ़ेस्ट में मौजूद 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. लॉन्च करें पूरा हो गया (ChromeOS)

टैब वाले ऐप्लिकेशन मोड का इस्तेमाल करना

टैब वाले ऐप्लिकेशन मोड का इस्तेमाल करने के लिए, डेवलपर को अपने ऐप्लिकेशन के लिए ऑप्ट इन करना होगा. इसके लिए, वेब ऐप्लिकेशन मेनिफ़ेस्ट में कोई खास "display_override" मोड वैल्यू सेट करें.

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

इसके बाद, टैब के व्यवहार को बेहतर बनाने के लिए, "tab_strip" प्रॉपर्टी का इस्तेमाल किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. इसमें दो सब-प्रॉपर्टी, "home_tab" और "new_tab_button" इस्तेमाल की जा सकती हैं. अगर "tab_strip" प्रॉपर्टी मौजूद नहीं है, तो यह डिफ़ॉल्ट रूप से इस ऑब्जेक्ट पर सेट हो जाएगी:

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

होम टैब

होम टैब एक पिन किया गया टैब होता है. अगर किसी ऐप्लिकेशन के लिए यह टैब चालू किया जाता है, तो ऐप्लिकेशन खुला होने पर यह हमेशा दिखना चाहिए. इस टैब से कभी भी नेविगेट नहीं किया जाना चाहिए. इस टैब से क्लिक किए गए लिंक, ऐप्लिकेशन के नए टैब में खुलने चाहिए. ऐप्लिकेशन, इस टैब को लॉक किए गए यूआरएल और टैब पर दिखाए जाने वाले आइकॉन को पसंद के मुताबिक बना सकते हैं.

"tab_strip" ऑब्जेक्ट के "home_tab" सदस्य में, एक खास "होम टैब" के बारे में जानकारी होती है. इसका मकसद, ऐप्लिकेशन के लिए टॉप-लेवल मेन्यू के तौर पर काम करना है. इसमें यह सदस्य शामिल है:

  • "scope_patterns": "scope_patterns" एलिमेंट, यूआरएल पैटर्न की सूची होती है. इससे मेनिफ़ेस्ट यूआरएल के हिसाब से, होम टैब का दायरा तय होता है.

नया टैब खोलने का बटन

"tab_strip" ऑब्जेक्ट का "new_tab_button" सदस्य, यूज़र इंटरफ़ेस (यूआई) के किसी एफ़र्डेंस (जैसे कि बटन) के व्यवहार के बारे में बताता है. इस पर क्लिक करने/चालू करने पर, ऐप्लिकेशन विंडो में एक नया ऐप्लिकेशन कॉन्टेक्स्ट खुलता है. इसमें ये सदस्य शामिल हैं:

  • "url": "url" एलिमेंट एक स्ट्रिंग होती है, जो प्रोसेस किए गए मेनिफ़ेस्ट के दायरे में आने वाले मेनिफ़ेस्ट यूआरएल से जुड़ा यूआरएल दिखाती है.

अगर प्रोसेस किए गए मेनिफ़ेस्ट के new_tab_button के "url" एलिमेंट का दायरा, होम टैब के दायरे से बाहर है, तो ऐप्लिकेशन में नया टैब बटन होता है. अगर ऐप्लिकेशन में नया टैब बटन नहीं है, तो ब्राउज़र उपयोगकर्ता के लिए "नया टैब" सुविधा उपलब्ध नहीं कराता.

पूरा उदाहरण

टैब वाले इंटरफ़ेस वाले ऐप्लिकेशन के व्यवहार को कॉन्फ़िगर करने का पूरा उदाहरण कुछ ऐसा दिख सकता है:

{
  "name": "Tabbed App Example",
  "start_url": "/",
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [
        {"pathname": "/"},
        {"pathname": "/index.html"}
      ]
    },
    "new_tab_button": {
      "url": "/create"
    }
  }
}

टैब वाले ऐप्लिकेशन मोड का पता लगाना

ऐप्लिकेशन यह पता लगा सकते हैं कि वे टैब वाले ऐप्लिकेशन मोड में चल रहे हैं या नहीं. इसके लिए, वे सीएसएस या 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" सेट करता है, तो ऐप्लिकेशन लॉन्च होने पर, ऐप्लिकेशन की मौजूदा विंडो में नया टैब खुलेगा.

डेमो

ChromeOS पर टैब वाले ऐप्लिकेशन को आज़माने के लिए:

  1. tabbed-application-mode.glitch.me ऐप्लिकेशन (सोर्स कोड) इंस्टॉल करें.
  2. अलग-अलग टैब पर मौजूद अलग-अलग लिंक पर क्लिक करें.

tabbed-application-mode.glitch.me पर, टैब किए गए ऐप्लिकेशन मोड का डेमो.

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

Chrome की टीम, टैब वाले ऐप्लिकेशन मोड के इस्तेमाल से जुड़े आपके अनुभवों के बारे में जानना चाहती है.

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

क्या टैब वाले ऐप्लिकेशन मोड में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? हमने वेब ऐप्लिकेशन मेनिफ़ेस्ट से जुड़ी समस्या के बारे में बताया है. इस पर टिप्पणी करें.

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

क्या आपको Chrome में इस सुविधा को लागू करने में कोई गड़बड़ी मिली? new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी दें. साथ ही, गड़बड़ी को दोहराने के निर्देश दें. इसके बाद, Components बॉक्स में UI>Browser>WebAppInstalls डालें. गड़बड़ी की सुविधा, समस्या के जल्दी ठीक होने के उदाहरणों को शेयर करने के लिए बहुत अच्छी है.

एपीआई के लिए सहायता दिखाना

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

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

धन्यवाद

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