अपने PWA के टाइटल बार की विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाएं

अपने PWA को ऐप्लिकेशन जैसा बनाने के लिए, विंडो कंट्रोल के बगल में मौजूद टाइटल बार एरिया का इस्तेमाल करें.

Amanda Baker

Thomas Steiner

अगर आपको मेरा लेख अपने PWA को ऐप्लिकेशन जैसा बनाएं याद है, तो आपको याद होगा कि मैंने ऐप्लिकेशन जैसा अनुभव देने के लिए, अपने ऐप्लिकेशन के टाइटल बार को पसंद के मुताबिक बनाने की रणनीति के बारे में बताया था. यहां macOS पर Podcasts ऐप्लिकेशन दिखाने के लिए, इसकी इमेज का उदाहरण दिया गया है.

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

विंडो कंट्रोल ओवरले के कॉम्पोनेंट

विंडो कंट्रोल ओवरले में चार सब-सुविधाएं होती हैं:

1. वेब ऐप्लिकेशन मेनिफ़ेस्ट में, "display_override" फ़ील्ड की "window-controls-overlay" वैल्यू.
2. सीएसएस एनवायरमेंट वैरिएबल titlebar-area-x, titlebar-area-y, titlebar-area-width, और titlebar-area-height.
3. वेब कॉन्टेंट में खींचे और छोड़े जा सकने वाले क्षेत्रों की जानकारी देने के लिए, पहले से मालिकाना हक वाली CSS प्रॉपर्टी -webkit-app-region को app-region प्रॉपर्टी के तौर पर स्टैंडर्ड किया गया है.
4. window.navigator के windowControlsOverlay सदस्य के ज़रिए, विंडो कंट्रोल क्षेत्र के बारे में क्वेरी करने और उससे जुड़ी समस्या हल करने का तरीका.

विंडो कंट्रोल ओवरले क्या है

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

मौजूदा स्थिति

Window Controls Overlay का इस्तेमाल करने का तरीका

वेब ऐप्लिकेशन के मेनिफ़ेस्ट में window-controls-overlay जोड़ना

कोई प्रोग्रेसिव वेब ऐप्लिकेशन, विंडो कंट्रोल ओवरले के लिए ऑप्ट-इन कर सकता है. इसके लिए, उसे वेब ऐप्लिकेशन मेनिफ़ेस्ट में "window-controls-overlay" को प्राइमरी "display_override" मेंबर के तौर पर जोड़ना होगा:

{
  "display_override": ["window-controls-overlay"]
}

विंडो कंट्रोल ओवरले सिर्फ़ तब दिखेगा, जब ये सभी शर्तें पूरी होंगी:

1. ऐप्लिकेशन, ब्राउज़र में नहीं, बल्कि एक अलग PWA विंडो में खुलता है.
2. मेनिफ़ेस्ट में "display_override": ["window-controls-overlay"] शामिल है. (इसके बाद, अन्य वैल्यू इस्तेमाल की जा सकती हैं.)
3. PWA, डेस्कटॉप ऑपरेटिंग सिस्टम पर चल रहा हो.
4. मौजूदा ऑरिजिन, उस ऑरिजिन से मेल खाता है जिसके लिए PWA इंस्टॉल किया गया था.

इसकी वजह से, टाइटल बार का खाली हिस्सा दिखता है. साथ ही, ऑपरेटिंग सिस्टम के हिसाब से, विंडो के सामान्य कंट्रोल बाईं या दाईं ओर दिखते हैं.

कॉन्टेंट को टाइटल बार में ले जाना

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

<div class="search">
  <img src="logo.svg" alt="Wikimedia logo." width="32" height="32" />
  <label>
    <input type="search" />
    Search for words in articles
  </label>
</div>

इस div को टाइटल बार में ऊपर ले जाने के लिए, कुछ सीएसएस की ज़रूरत होगी:

.search {
  /* Make sure the `div` stays there, even when scrolling. */
  position: fixed;
  /**
   * Gradient, because why not. Endless opportunities.
   * The gradient ends in `#36c`, which happens to be the app's
   * `<meta name="theme-color" content="#36c">`.
   */
  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
  /* Use the environment variable for the left anchoring with a fallback. */
  left: env(titlebar-area-x, 0);
  /* Use the environment variable for the top anchoring with a fallback. */
  top: env(titlebar-area-y, 0);
  /* Use the environment variable for setting the width with a fallback. */
  width: env(titlebar-area-width, 100%);
  /* Use the environment variable for setting the height with a fallback. */
  height: env(titlebar-area-height, 33px);
}

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

यह तय करना कि टाइटल बार के कौनसे हिस्से खींचे और छोड़े जा सकते हैं

ऊपर दिए गए स्क्रीनशॉट से पता चलता है कि आपने टास्क पूरा कर लिया है. हालांकि, ऐसा नहीं है. PWA विंडो को अब खींचा और छोड़ा नहीं जा सकता. ऐसा इसलिए है, क्योंकि विंडो कंट्रोल बटन को खींचा और छोड़ा नहीं जा सकता. साथ ही, टाइटल बार के बाकी हिस्से में खोज विजेट होता है. इसे ठीक करने के लिए, drag वैल्यू वाली app-region सीएसएस प्रॉपर्टी का इस्तेमाल करें. इस मामले में, input एलिमेंट के अलावा, बाकी सभी एलिमेंट को खींचकर छोड़ा जा सकता है.

/* The entire search `div` is draggable… */
.search {
  -webkit-app-region: drag;
  app-region: drag;
}

/* …except for the `input`. */
input {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

इस सीएसएस के लागू होने के बाद, उपयोगकर्ता div, img या label को खींचकर, ऐप्लिकेशन विंडो को सामान्य तौर पर खींच सकता है. सिर्फ़ input एलिमेंट इंटरैक्टिव है, ताकि खोज क्वेरी डाली जा सके.

फ़ीचर का पता लगाना

विंडो कंट्रोल ओवरले की सुविधा के काम करने की जांच करने के लिए, windowControlsOverlay के मौजूद होने की जांच करें:

if ('windowControlsOverlay' in navigator) {
  // Window Controls Overlay is supported.
}

windowControlsOverlay की मदद से, विंडो कंट्रोल वाले सेक्शन के बारे में क्वेरी करना

फ़िलहाल, कोड में एक समस्या है: कुछ प्लैटफ़ॉर्म पर विंडो कंट्रोल दाईं ओर होते हैं, जबकि कुछ पर बाईं ओर. इसके अलावा, प्लैटफ़ॉर्म के हिसाब से, Chrome के "तीन बिंदु" वाले मेन्यू की जगह भी बदल जाएगी. इसका मतलब है कि लीनियर ग्रेडिएंट बैकग्राउंड इमेज को #131313→maroon या maroon→#131313→maroon से चलाने के लिए, डाइनैमिक तौर पर अडैप्ट करना ज़रूरी है, ताकि यह टाइटल बार के maroon बैकग्राउंड रंग के साथ ब्लेंड हो जाए. यह रंग <meta name="theme-color" content="maroon"> से तय होता है. ऐसा करने के लिए, navigator.windowControlsOverlay प्रॉपर्टी पर getTitlebarAreaRect() एपीआई से क्वेरी करें.

if ('windowControlsOverlay' in navigator) {
  const { x } = navigator.windowControlsOverlay.getTitlebarAreaRect();
  // Window controls are on the right (like on Windows).
  // Chrome menu is left of the window controls.
  // [ windowControlsOverlay___________________ […] [_] [■] [X] ]
  if (x === 0) {
    div.classList.add('search-controls-right');
  }
  // Window controls are on the left (like on macOS).
  // Chrome menu is right of the window controls overlay.
  // [ [X] [_] [■] ___________________windowControlsOverlay [⋮] ]
  else {
    div.classList.add('search-controls-left');
  }
} else {
  // When running in a non-supporting browser tab.
  div.classList.add('search-controls-right');
}

पहले की तरह, .search क्लास के सीएसएस नियमों में बैकग्राउंड इमेज को सीधे तौर पर शामिल करने के बजाय, बदले गए कोड में अब दो क्लास का इस्तेमाल किया जाता है. ऊपर दिया गया कोड, इन क्लास को डाइनैमिक तौर पर सेट करता है.

/* For macOS: */
.search-controls-left {
  background-image: linear-gradient(90deg, #36c, 45%, #131313, 90%, #36c);
}

/* For Windows: */
.search-controls-right {
  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
}

यह पता लगाना कि विंडो कंट्रोल ओवरले दिख रहा है या नहीं

विंडो कंट्रोल ओवरले, हर स्थिति में टाइटल बार के हिस्से में नहीं दिखेगा. यह विकल्प, विंडो कंट्रोल ओवरले की सुविधा के साथ काम न करने वाले ब्राउज़र पर नहीं दिखेगा. साथ ही, यह तब भी नहीं दिखेगा, जब जिस PWA की बात हो रही है वह टैब में चल रहा हो. इस स्थिति का पता लगाने के लिए, windowControlsOverlay की visible प्रॉपर्टी से क्वेरी की जा सकती है:

if (navigator.windowControlsOverlay.visible) {
  // The window controls overlay is visible in the title bar area.
}

इसके अलावा, JavaScript और/या सीएसएस में display-mode मीडिया क्वेरी का इस्तेमाल भी किया जा सकता है:

// Create the query list.
const mediaQueryList = window.matchMedia('(display-mode: window-controls-overlay)');

// Define a callback function for the event listener.
function handleDisplayModeChange(mql) {
  // React on display mode changes.
}

// Run the display mode change handler once.
handleDisplayChange(mediaQueryList);

// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener('change', handleDisplayModeChange);

@media (display-mode: window-controls-overlay) { 
  /* React on display mode changes. */ 
}

ज्यामिति में हुए बदलावों की सूचना पाना

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

आपको ज्यामिति में हुए बदलावों की सूचना तब मिल सकती है, जब आप navigator.windowControlsOverlay.ongeometrychange की सदस्यता लें या geometrychange इवेंट के लिए इवेंट लिसनर सेट अप करें. यह इवेंट सिर्फ़ तब ट्रिगर होगा, जब विंडो कंट्रोल ओवरले दिख रहा हो. इसका मतलब है कि जब navigator.windowControlsOverlay.visible true हो.

const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

if ('windowControlsOverlay' in navigator) {
  navigator.windowControlsOverlay.ongeometrychange = debounce((e) => {
    span.hidden = e.titlebarAreaRect.width < 800;
  }, 250);
}

ongeometrychange को कोई फ़ंक्शन असाइन करने के बजाय, यहां बताए गए तरीके से windowControlsOverlay में इवेंट लिसनर भी जोड़ा जा सकता है. इन दोनों के बीच के अंतर के बारे में जानने के लिए, MDN पर जाएं.

navigator.windowControlsOverlay.addEventListener(
  'geometrychange',
  debounce((e) => {
    span.hidden = e.titlebarAreaRect.width < 800;
  }, 250),
);

टैब में चलाने और काम न करने वाले ब्राउज़र पर चलाने पर, ऐप्लिकेशन के काम करने की सुविधा

यहां दो संभावित मामले हैं:

• ऐसा तब होता है, जब कोई ऐप्लिकेशन ऐसे ब्राउज़र में चल रहा हो जो Window Controls Overlay की सुविधा के साथ काम करता हो, लेकिन ऐप्लिकेशन का इस्तेमाल ब्राउज़र टैब में किया जा रहा हो.
• ऐसा तब होता है, जब कोई ऐप्लिकेशन ऐसे ब्राउज़र में चल रहा हो जो विंडो कंट्रोल ओवरले के साथ काम नहीं करता.

दोनों ही मामलों में, विंडो कंट्रोल ओवरले के लिए बनाया गया एचटीएमएल, डिफ़ॉल्ट रूप से सामान्य एचटीएमएल कॉन्टेंट की तरह इनलाइन दिखेगा. साथ ही, पोज़िशनिंग के लिए env() वैरिएबल की फ़ॉलबैक वैल्यू काम करेंगी. साथ ही, जिन ब्राउज़र पर यह सुविधा काम करती है उन पर, विंडो कंट्रोल ओवरले के लिए तय किए गए एचटीएमएल को न दिखाने का विकल्प भी चुना जा सकता है. इसके लिए, ओवरले की visible प्रॉपर्टी की जांच करें. अगर यह false दिखाती है, तो उस एचटीएमएल कॉन्टेंट को छिपाएं.

हम आपको याद दिलाना चाहते हैं कि जिन ब्राउज़र पर यह सुविधा काम नहीं करती वे "display_override" वेब ऐप्लिकेशन मेनिफ़ेस्ट प्रॉपर्टी को बिलकुल भी इस्तेमाल नहीं करेंगे या "window-controls-overlay" को नहीं पहचानेंगे. इसलिए, वे फ़ॉलबैक चेन के हिसाब से अगली संभावित वैल्यू का इस्तेमाल करेंगे. उदाहरण के लिए, "standalone".

यूज़र इंटरफ़ेस (यूआई) से जुड़ी बातें

ऐसा करने का मन तो हो सकता है, लेकिन हमारा सुझाव है कि आप विंडो कंट्रोल ओवरले एरिया में क्लासिक ड्रॉपडाउन मेन्यू न बनाएं. ऐसा करने पर, macOS पर डिज़ाइन के दिशा-निर्देशों का उल्लंघन होगा. इस प्लैटफ़ॉर्म पर, उपयोगकर्ताओं को स्क्रीन पर सबसे ऊपर मेन्यू बार (सिस्टम से मिले और पसंद के मुताबिक बनाए गए, दोनों) दिखने चाहिए.

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

डेमो

मैंने एक डेमो बनाया है, जिसे अलग-अलग ब्राउज़र पर आज़माया जा सकता है. इनमें, ऐसे ब्राउज़र भी शामिल हैं जिन पर यह सुविधा काम करती है और जिन पर नहीं करती. साथ ही, इसे इंस्टॉल किए गए और इंस्टॉल नहीं किए गए वर्शन में भी आज़माया जा सकता है. विंडो कंट्रोल ओवरले की असल सुविधा का इस्तेमाल करने के लिए, आपको ऐप्लिकेशन इंस्टॉल करना होगा. यहां दो स्क्रीनशॉट दिए गए हैं, जिनसे आपको पता चलेगा कि यह सुविधा कैसी है. ऐप्लिकेशन का सोर्स कोड, Glitch पर उपलब्ध है.

विंडो कंट्रोल ओवरले में खोजने की सुविधा पूरी तरह से काम करती है:

सुरक्षा से जुड़ी बातें

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

स्पूफ़िंग

साइटों को टाइटल बार का कुछ कंट्रोल देने से, डेवलपर के पास उस कॉन्टेंट को बदलने का मौका होता है जो पहले भरोसेमंद और ब्राउज़र के कंट्रोल वाले हिस्से में होता था. फ़िलहाल, Chromium ब्राउज़र में स्टैंडअलोन मोड में एक टाइटल बार होता है. शुरुआती लॉन्च पर, बाईं ओर वेबपेज का टाइटल और दाईं ओर पेज का ऑरिजिन दिखता है. इसके बाद, "सेटिंग और ज़्यादा" बटन और विंडो कंट्रोल दिखते हैं. कुछ सेकंड बाद, ओरिजनल टेक्स्ट गायब हो जाता है. अगर ब्राउज़र को दाईं से बाईं ओर (आरटीएल) लिखी जाने वाली भाषा पर सेट किया गया है, तो यह लेआउट इस तरह फ़्लिप हो जाता है कि मूल टेक्स्ट बाईं ओर दिखे. अगर ऑरिजिन और ओवरले के दाएं किनारे के बीच पैडिंग कम है, तो ऑरिजिन को स्पूफ़ करने के लिए विंडो कंट्रोल ओवरले खुलता है. उदाहरण के लिए, "evil.ltd" ऑरिजिन को भरोसेमंद साइट "google.com" के साथ जोड़ा जा सकता है. इससे उपयोगकर्ताओं को लगता है कि सोर्स भरोसेमंद है. हमारा प्लान है कि इस ऑरिजिन टेक्स्ट को बनाए रखा जाए, ताकि उपयोगकर्ताओं को पता रहे कि ऐप्लिकेशन का ऑरिजिन क्या है. इससे वे यह भी पक्का कर पाएंगे कि ऐप्लिकेशन उनकी उम्मीदों के मुताबिक है या नहीं. आरटीएल कॉन्फ़िगर किए गए ब्राउज़र के लिए, ऑरिजिन टेक्स्ट के दाईं ओर ज़रूरत के मुताबिक पैडिंग होनी चाहिए. इससे, नुकसान पहुंचाने वाली वेबसाइट को असुरक्षित ऑरिजिन को भरोसेमंद ऑरिजिन के साथ जोड़ने से रोका जा सकता है.

ऑनलाइन ट्रैकिंग

विंडो को ऊपर लाने की सुविधा और खींचे और छोड़े जा सकने वाले इलाकों को चालू करने पर, सुविधा का पता लगाने के अलावा, निजता से जुड़ी कोई गंभीर समस्या नहीं होती. हालांकि, अलग-अलग ऑपरेटिंग सिस्टम में विंडो कंट्रोल बटन के साइज़ और पोज़िशन अलग-अलग होने की वजह से, navigator.windowControlsOverlay.getTitlebarAreaRect() वाला तरीका एक DOMRect दिखाता है. इसकी पोज़िशन और डाइमेंशन से, उस ऑपरेटिंग सिस्टम के बारे में जानकारी मिलती है जिस पर ब्राउज़र चल रहा है. फ़िलहाल, डेवलपर उपयोगकर्ता एजेंट स्ट्रिंग से ओएस का पता लगा सकते हैं. हालांकि, फ़िंगरप्रिंट से जुड़ी समस्याओं की वजह से, UA स्ट्रिंग को फ़्रीज़ करने और ओएस वर्शन को एक करने के बारे में चर्चा की जा रही है. ब्राउज़र कम्यूनिटी में यह पता लगाने की कोशिश की जा रही है कि अलग-अलग प्लैटफ़ॉर्म पर, विंडो कंट्रोल ओवरले का साइज़ कितनी बार बदलता है. फ़िलहाल, यह माना जा रहा है कि ये सभी ऑपरेटिंग सिस्टम के वर्शन पर एक जैसे होते हैं. इसलिए, इनसे ऑपरेटिंग सिस्टम के छोटे वर्शन को समझने में मदद नहीं मिलेगी. हालांकि, यह फ़िंगरप्रिंटिंग से जुड़ी एक संभावित समस्या है, लेकिन यह सिर्फ़ उन इंस्टॉल किए गए PWA पर लागू होती है जो कस्टम टाइटल बार की सुविधा का इस्तेमाल करते हैं. यह सामान्य ब्राउज़र के इस्तेमाल पर लागू नहीं होती. इसके अलावा, navigator.windowControlsOverlay एपीआई, PWA में एम्बेड किए गए iframe के लिए उपलब्ध नहीं होगा.

नेविगेशन

किसी PWA में किसी दूसरे ऑरिजिन पर जाने पर, वह सामान्य स्टैंडअलोन टाइटल बार पर वापस आ जाएगा. भले ही, वह ऊपर बताई गई शर्तों को पूरा करता हो और विंडो कंट्रोल ओवरले के साथ लॉन्च किया गया हो. यह किसी दूसरे ऑरिजिन पर नेविगेट करने पर दिखने वाले काले बार को शामिल करने के लिए है. ओरिजनल ऑरिजिन पर वापस जाने के बाद, विंडो कंट्रोल ओवरले का फिर से इस्तेमाल किया जाएगा.

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

Chromium की टीम, Window Controls Overlay API के इस्तेमाल से जुड़े आपके अनुभवों के बारे में जानना चाहती है.

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

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

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

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

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

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

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

मदद के लिए लिंक

• एक्सप्लेनर
• स्पेसिफ़िकेशन का ड्राफ़्ट
• Chromium में गड़बड़ी
• Chrome Platform Status पर मौजूद एंट्री
• टैग की समीक्षा
• Microsoft Edge से जुड़े दस्तावेज़

आभार

विंडो कंट्रोल ओवरले को Microsoft Edge टीम की अमांडा बेकर ने लागू किया और इसके बारे में बताया. इस लेख की समीक्षा जो मेडली और केनेथ रोहडे क्रिश्चियन्सन ने की है. Unsplash पर Sigmund की दी गई हीरो इमेज.